In this tutorial, you will be going to learn completely about CSS Typography and its properties with syntax, values, and some of the example programs. Let’s dive into this tutorial on typography in CSS for better knowledge & fast learnings.
Also Check:
What is Typography?
First and foremost, typography is about usability. Type is the user interface for conveying information, and conveying information is what we’re here to do on the web. There are many levers we can pull to affect the usability of reading text, and only by being deliberate about these can we create a pleasant experience for our users.
Typography Properties in CSS
Properties for typography are listed below:
- text-transform
- text-decoration
- text-align
- vertical-align
- line-height
- text-indent
- text-align-last
- word-spacing
- letter-spacing
- text-shadow
- white-space
- tab-size
- writing-mode
- hyphens
- text-orientation
- direction
- line-break
- word-break
- overflow-wrap
text-transform
Transform the case of an element.
The values are:
capitalize
to make the first letter uppercase.uppercase
to make all text uppercase.lowercase
to make all text lowercase.none
to disable transforming the text, used to avoid inheriting the property.
Example:
p { text-transform: uppercase; }
text-decoration
Used to add decoration to the texts, like:
underline
overline
line-through
blink
none
Example:
p { text-decoration: underline; } /* OR */ p { text-decoration: underline dashed yellow; /* Valid are solid, double, dotted, dashed, wavy */ }
Instead of one line, we can use specific properties of text-decoration. Like:
text-decoration-line
text-decoration-color
text-decoration-style
text-align
Specifies the alignment of the text that will be written. The default value is left, but can override with:
start
end
left
right
center
justify
Example:
p { text-align: center; }
vertical-align
Used only on elements that are arranged in inline.
Specifies how the elements are vertically aligned.
The values that we can use here are:
baseline
(the default), aligns the baseline to the baseline of the parent element.sub
makes an element subscripted, simulating thesub
HTML element result.super
makes an element superscripted, simulating thesup
HTML element result.top
align the top of the element to the top of the line.text-top
align the top of the element to the top of the parent element font.middle
align the middle of the element to the middle of the line of the parent.bottom
align the bottom of the element to the bottom of the line.text-bottom
align the bottom of the element to the bottom of the parent element font.
line-height
Help us to change the height of the line. The height of the lines refers to the empty space between two lines.
p { line-height: 0.9rem; }
text-indent
Just like starting a paragraph, we can indent the first line of it.
p { text-indent: -10px; /* can use %, rem, em */ }
text-align-last
We can change the behavior of the line of any paragraph (follows text-align property) by using this property.
p { text-align-last: right; }
word-spacing
Can modify the spaces between words.
The default value is normal.
p { word-spacing: 2px; /* can use px, rem, em */ }
letter-spacing
Can modify the spaces between each letter of a word.
The default value is normal.
p { letter-spacing: 2px; /* can use px, rem, em */ }
text-shadow
Use this property to apply a shadow effect over texts.
The shadow can be applied in both the X and Y axis but with an offset. Also, we can add a blur effect.
If no color of the shadow is specified, it will use the color of the text.
p { text-shadow: 0.2px 2px; }
white-space
White spaces are the empty spaces that are added after an indent or next to a line.
Values that collapse whites spaces are:
normal
Adds new lines when necessary as the text reaches the container end.nowrap
Do not add a new line when the text reaches the end of the container and suppresses any line break added to the text.pre-line
Adds new lines when necessary as the text reaches the container end.
Values that preserve whites spaces are:
pre
Do not add a new line when the text reaches the end of the container but preserves the line break added to the text.pre-wrap
Adds new lines when necessary as the text reaches the container end.
tab-size
Determines the size/width of the tab character.
The default value is 8 but can set any values of supported units or an integer.
p { tab-size: 1; }
writing-mode
The writing-mode
property changes the alignment of the text so that it can be read from top to bottom or from left to right, depending on the language.
Available values are:
horizontal-tb
(default).vertical-rl
content is laid out vertically. New lines are put on the left of the previous.vertical-lr
content is laid out vertically. New lines are put on the right of the previous.
hyphens
The hyphens
property controls hyphenation of text in block-level elements. You can prevent hyphenation from happening at all, allow it, or only allow it when certain characters are present.
Values are:
none
(default).manual
only add a hyphen when there is already a visible hyphen or a hidden hyphen (a special character).auto
add hyphens when determined the text can have a hyphen.
text-orientation
The text-orientation
property in CSS aligns text in a line when working with a vertical writing-mode.
Valid values are:
mixed
is the default, and if a language is vertical (like Japanese) it preserves that orientation while rotating text written in western languages.upright
makes all text be vertically oriented.sideways
makes all text horizontally oriented.
direction
The direction
property in CSS sets the direction of content flow within a block-level element. This applies to text, inline, and inline-block elements. It also sets the default alignment of text and the direction that table cells flow within a table row.
The valid values are:
ltr
– Left to Right, the defaultrtl
– Right to Leftinherit
– inherits its value from the parent element
p { direction: rtl; }
word-break
The word-break
property in CSS can be used to change when line breaks ought to occur.
Values:
normal
: use the default rules for word breaking.break-all
: any word/letter can break onto the next line.keep-all
: for Chinese, Japanese, and Korean text words are not broken. Otherwise, this is the same asnormal
.
overflow-wrap
The overflow-wrap
property in CSS allows you to specify that the browser can break a line of text inside the targeted element onto multiple lines in an otherwise unbreakable place.
.example { overflow-wrap: break-word; }
to break it at the exact length of the line, or
p { overflow-wrap: anywhere; }
word-break
property is as same as this property. We might want to pick this one on western languages, as word-break
has a unique approach for non-western languages.