CSS FONTS & TYPOGRAPHY
Typography is one of the most influential elements of UI and UX design. If HTML provides the structure and CSS delivers the style, typography defines the digital “voice” of your content.
Good typography improves readability, enhances aesthetics, and strengthens brand identity.
font-family
This property decides which font should be used to show the text.
What is a font?
A font is the style of the letters.
Example fonts:
- Arial
- Roboto
- Times New Roman
- Poppins
When you write:
font-family: "Roboto", Arial, sans-serif;It means:
- “Roboto” → Use this font first (custom/Google font).
- Arial → If Roboto fails, use Arial.
- sans-serif → If both fail, use any system default sans-serif font.
What is a fallback?
Fallback = backup font.
font-size
This property sets how big the text looks.
Units:
A. Fixed units (size never changes)
| Unit | Meaning | Example |
| Px | Pixel. Most common fixed size. | 16px |
| Pt | Point (used in print). | 12pt |
| Pc | Pica (12 points). | Rare in web |
| in | Inch | Extremely rare |
| cm / mm | Centimeters / millimeters | Not used in web UI |
B. Relative units (change based on screen or parent)
| Unit | Based On | Meaning |
| em | Parent element’s font-size | 2em = 2 × parent font size |
| rem | Root html font-size | Good for scalable designs |
| % | Percentage of parent | 150% = 1.5 × parent |
| vw | % of viewport width | 5vw = 5% of browser width |
| vh | % of viewport height | 3vh = 3% of browser height |
| vmin | Smaller of vw or vh | Responsive |
| vmax | Larger of vw or vh | Responsive |
C. Keywords
| Keyword | Meaning |
| small / smaller | Slightly smaller |
| large / larger | Slightly larger |
| xx-small → xx-large | Predefined steps |
Example:
h1 {
font-size: 5vw;/* Text grows/shrinks with screen width */
}font-weight
It Controls boldness (thickness) of text.
Keyword values
| Value | Meaning |
| normal | Regular thickness (400) |
| bold | Bold text (700) |
| bolder | More bold than parent |
| lighter | Less bold than parent |
Numeric weights (exact control)
| Weight | Name |
| 100 | Thin |
| 200 | Extra Light |
| 300 | Light |
| 400 | Normal |
| 500 | Medium |
| 600 | Semi-bold |
| 700 | Bold |
| 800 | Extra Bold |
| 900 | Black (very thick) |
Example:
h3 { font-weight: 900; }font-style
It Controls slanted text. The letters are tilted to the right instead of standing straight.
| Value | Meaning |
| normal | Straight text |
| italic | Uses actual italic version of the font |
| oblique | Fake/slanted version created by browser |
| oblique 10deg | Slants text by exact angle |
Example:
p {
font-style: italic;
}line-height
It Controls space between lines (vertical spacing).
| Type | Meaning |
| number | Multiplier (recommended) |
| Px | Fixed space |
| % | Percentage |
| normal | Browser’s default |
Example:
line-height: 1.5; /* 1.5 × font size */letter-spacing
It specify Space between letters.
| Value | Meaning |
| positive | Increases space |
| negative | Squeezes letters |
Example:
letter-spacing: 2px;word-spacing
It specifies Space between words.
Example:
word-spacing: 10px;text-transform
It Changes letter case.
| Value | Meaning |
| Uppercase | ALL CAPS(All Letters Capital) |
| Lowercase | all small letters |
| Capitalize | First Letter Of Every Word |
| none | No change |
Example:
p{
text-transform: uppercase;
}text-align
It Controls horizontal alignment of text.
| Value | Meaning |
| left | Left-aligned (default for English) |
| right | Right-aligned |
| center | Centered text |
| justify | Text spread across full width |
| start | Align according to writing direction |
| end | Opposite of start |
p{
text-align: center; /* Text will be written in center of box /*
}text-decoration
Adds lines like underline, strikethrough, etc.
A. text-decoration-line
| Value | Meaning |
| underline | Line below text |
| overline | Line above text |
| line-through | Strike-through |
| none | Remove decorations |
| multiple | underline overline |
B. text-decoration-style
| Value | Meaning |
| solid | Normal line |
| dotted | Dots |
| dashed | Dashes |
| double | Two lines |
| wavy | Wave-like underline |
C. text-decoration-color
Any color, like red, blue, green, hex, rgb, etc.
text-shadow
Creates a shadow behind text characters.
Syntax:
text-shadow: <x-offset> <y-offset> <blur-radius> <color>;Example:
text-shadow: 2px 2px 5px gray;x-offset (Horizontal Offset)
How far the shadow moves left or right from the text.
- Positive value (e.g., 2px): shadow moves to the right of the text.
- Negative value (e.g., -2px): shadow moves to the left of the text.
- 0px: shadow stays exactly behind the text horizontally.
Defines the horizontal positioning of the shadow.
y-offset (Vertical Offset)
How far the shadow moves up or down from the text.
- Positive value (e.g., 2px): shadow moves downward.
- Negative value (e.g., -2px): shadow moves upward.
- 0px: shadow stays exactly behind the text vertically.
Defines the vertical positioning of the shadow.
blur-radius
How much the shadow spreads and becomes soft.
- 0px: No blur. Shadow stays sharp and solid.
- Higher values (e.g., 5px, 10px):
- Shadow becomes softer.
- Edges become fuzzy.
- Shadow spreads outward.
Blur radius cannot be negative. Controls the softness and spread of the shadow.
color
The color that the shadow uses.
Defines the visual style of the shadow.
Often uses semi-transparent colors to make the shadow look natural.
Multiple Shadows
You can apply more than one shadow by separating them with commas:
text-shadow: 2px 2px 5px black, -2px -2px 5px red;
Each shadow has the same 4 arguments, evaluated independently.
hyphens
Controls breaking long words with a hyphen (-).
| Value | Meaning |
| none | Never break words |
| manual | Break only where is added |
| auto | Browser automatically hyphenates |
Example:
hyphens: auto;Google Fonts – How They Work
Google Fonts are fonts stored online. You load them using <link> or CSS @import.
Example:
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">Then use:
body {
font-family: "Poppins", sans-serif;
}