1. Font Family
Defines the typeface of the text. Always include fallback fonts and a generic family like serif, sans-serif, or monospace.
CSS Example
p.serif { font-family: 'Times New Roman', serif; }
p.sans { font-family: Arial, Helvetica, sans-serif; }
p.mono { font-family: 'Courier New', monospace; }2. Font Size & Units
Controls the size of the text. Common units: px, em, rem, %.
CSS Example
p.px { font-size: 20px; }
p.em { font-size: 2em; }
p.rem { font-size: 1.5rem; }
p.percent { font-size: 120%; }3. Font Weight & Style
font-weight controls thickness of text (100 → 900). font-style is used for italic/oblique text.
CSS Example
p.normal { font-weight: normal; }
p.bold { font-weight: bold; }
p.custom { font-weight: 600; }
p.italic { font-style: italic; }4. Line Height
Defines the vertical spacing between lines of text. Useful for readability.
CSS Example
p.small { line-height: 1; }
p.medium { line-height: 1.5; }
p.large { line-height: 2; }5. Text Align & Justify
Align text horizontally: left, right, center, or justify.
CSS Example
p.left { text-align: left; }
p.center { text-align: center; }
p.right { text-align: right; }
p.justify { text-align: justify; }6. Text Transform
Changes the case of text: uppercase, lowercase, capitalize.
CSS Example
p.upper { text-transform: uppercase; }
p.lower { text-transform: lowercase; }
p.cap { text-transform: capitalize; }7. Text Decoration
Adds lines like underline, overline, or strikethrough.
CSS Example
p.underline { text-decoration: underline; }
p.overline { text-decoration: overline; }
p.lineThrough { text-decoration: line-through; }
p.none { text-decoration: none; }8. Letter Spacing / Word Spacing
Controls the space between characters and words.
CSS Example
p.letter { letter-spacing: 5px; }
p.word { word-spacing: 20px; }9. White-space & Text Overflow
white-space controls text wrapping, and text-overflow handles clipped text.
CSS Example
.nowrap { white-space: nowrap; }
.ellipsis {
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid black;
}10. Web Fonts
Use custom fonts with Google Fonts or @font-face. This improves typography beyond system fonts.
CSS Example
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
.googleFont {
font-family: 'Roboto', sans-serif;
font-weight: 700;
}