CSS Typography
Typography in CSS goes beyond fonts. It includes properties that control text transformation, decoration, alignment, spacing, shadows, orientation, and wrapping. Mastering these properties helps you create readable, accessible, and visually appealing designs.
Key Typography Properties
1. text-transform
Controls the case of text. Values: capitalize, uppercase, lowercase, none.
Code Block Loading...
2. text-decoration
Adds visual decoration. Values: underline, overline, line-through, none. You can also style and color decorations.
Code Block Loading...
Or using longhand:
Code Block Loading...
3. text-align
Aligns text horizontally.
Values: start, end, left, right, center, justify.
Code Block Loading...
4. vertical-align
Aligns inline elements vertically relative to the baseline.
Values: baseline, sub, super, top, middle, bottom.
Code Block Loading...
5. line-height
Controls spacing between lines.
Code Block Loading...
6. text-indent
Indents the first line of a paragraph.
Code Block Loading...
7. text-align-last
Aligns the last line of a paragraph differently.
Code Block Loading...
8. word-spacing and letter-spacing
Adjust spacing between words or letters.
Code Block Loading...
9. text-shadow
Adds shadow to text. Syntax: color x-offset y-offset blur.
Code Block Loading...
10. white-space
Controls how whitespace and line breaks are handled. Values: normal, nowrap, pre, pre-wrap, pre-line.
Code Block Loading...
11. tab-size
Sets tab character width.
Code Block Loading...
12. writing-mode
Controls text flow direction.
Values: horizontal-tb, vertical-rl, vertical-lr.
Code Block Loading...
13. hyphens
Controls automatic hyphenation. Values: none, manual, auto.
Code Block Loading...
14. text-orientation
Works with vertical writing modes.
Values: mixed, upright, sideways.
Code Block Loading...
15. direction
Sets text direction.
Values: ltr, rtl.
Code Block Loading...
16. word-break and overflow-wrap
Control line breaks inside words.
Code Block Loading...