Typography is the art of arranging text. Good typography makes content readable and visually appealing.
Different font families create different moods and readability levels.
Serif fonts have small lines at ends of letters. (Times New Roman)
Sans-serif fonts are clean and modern. (Arial)
Monospace fonts have equal character widths. (Courier)
Cursive fonts mimic handwriting. (Brush Script)
Best Practice: Always provide fallback fonts: font-family: 'Primary', 'Fallback', generic;
12px - Small text
16px - Default browser size (recommended base)
20px - Slightly larger
24px - Heading size
1.5rem - Relative to root (scalable)
| Unit | Description | Use Case |
|---|---|---|
px |
Pixels - fixed size | Borders, fine control |
em |
Relative to parent element | Component-level scaling |
rem |
Relative to root (html) element | Global sizing (recommended) |
% |
Percentage of parent | Fluid layouts |
Weight 100 - Thin
Weight normal (400)
Weight 700 - Bold
Weight 900 - Black (Heaviest)
Normal style - upright text
Italic style - slanted text for emphasis
Oblique style - mechanically slanted
Left aligned text (default for LTR languages)
Center aligned text - good for headings
Right aligned text - used for numbers, dates
Justified text stretches to fill the line. This paragraph has extra text to demonstrate how justify spreads words evenly across the line, creating straight edges on both sides.
Underlined text - commonly used for links
Overlined text - rarely used
Strikethrough text - shows deleted content
Fancy wavy underline with custom color!
this text is transformed to uppercase
THIS TEXT IS TRANSFORMED TO LOWERCASE
each word starts with capital letter
L E T T E R S P A C I N G (letter-spacing: 5px)
Word spacing makes gaps bigger between words
Tight line height (1.0) makes text cramped.
Second line is very close to the first.
Loose line height (2.5) gives lots of breathing room.
Second line has more space above it.
Basic shadow effect
Glowing text effect
Multiple shadows for 3D effect
text-shadow: horizontal vertical blur color;
Published January 28, 2025
This is a well-formatted article paragraph. Notice the comfortable line height, readable font size, and appropriate text color. Good typography enhances readability and creates a pleasant reading experience. The contrast between the dark text and light background reduces eye strain.
"Typography is the craft of endowing human language with a durable visual form." - Robert Bringhurst