Text & Fonts
Typography is huge in design! CSS lets you control font-family (typeface), font-size, font-weight (bold), line-height (spacing between lines), text-align, and text-decoration (underline, strikethrough). Use Google Fonts by adding a link in HTML, then reference the font name in CSS.
Appy Says…
Typography is 95% of web design. The right font makes an app feel premium, playful, or professional — and the wrong one makes it look amateur. CSS gives you full control over every aspect of text rendering.
What are CSS Text and Font Properties?
CSS text properties control everything about how text looks: family, size, weight, line height, spacing, alignment, and decoration.
- •
font-family: 'Inter', sans-serif; - •
font-size: 16px;/1rem/1.2em - •
font-weight: 400 | 700 | bold; - •
line-height: 1.6;(unitless ratio, relative to font-size) - •
letter-spacing: 0.05em; - •
text-align: left | center | right | justify; - •
text-decoration: none | underline; - •
text-transform: uppercase | capitalize; - •Google Fonts:
@import url('https://fonts.googleapis.com/...');
Think of it like Minecraft sign text
Minecraft signs let you write text but give no control over the font. CSS is the full font editor — change the typeface, size, spacing, weight, and colour on any text anywhere on your page.
How It Works
- •1.
font-familylists fonts in priority order with a generic fallback:'Poppins', 'Helvetica', sans-serif - •2.
remis relative to root font size (usually 16px) — better for accessibility - •3.
emis relative to the element's own font-size - •4.
line-height: 1.5means 1.5× the font size — no unit needed - •5. Load Google Fonts: add
@importat the top of CSS or<link>in HTML - •6. Variable fonts: one font file with axes for weight, width — modern and efficient
Real-World Examples
- •Apple's site uses San Francisco (system font) with precise
letter-spacing - •Medium uses Georgia serif for body text — increases readability for long articles
- •A heading:
font-size: clamp(2rem, 5vw, 4rem);— fluid sizing across screen sizes - •Brand logo text:
font-weight: 800; letter-spacing: -0.03em; text-transform: uppercase;
Key Facts
- •
font-size: 1rem= browser default (usually 16px) — always use rem for accessibility - •System font stack:
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif— fast, no download - •FOUT (Flash of Unstyled Text) happens while web fonts load — use
font-display: swap - •Variable fonts can replace an entire font family with a single file
Watch Out!
Never set a fixed pixel font size on the <html> element (e.g. font-size: 14px). This overrides users' browser accessibility settings. Use font-size: 100% or don't set it at all, then use rem everywhere else.
Remember
Use rem for font sizes (accessibility-friendly). Set line-height: 1.5–1.7 for body text. Load Google Fonts with <link> in <head>.
What You Learned
- •font-family, font-size (rem), font-weight, line-height control text appearance
- •Use rem units; load Google Fonts with @import or
- •Unlocks: professional typography, brand identity, readable body text
Key Facts
- →
font-size: 1rem= browser default (usually 16px) — always use rem for accessibility - →System font stack:
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif— fast, no download - →FOUT (Flash of Unstyled Text) happens while web fonts load — use
font-display: swap - →Variable fonts can replace an entire font family with a single file
Real-World Examples
Remember
Use rem for font sizes (accessibility-friendly). Set line-height: 1.5–1.7 for body text. Load Google Fonts with <link> in <head>.
Quick Quiz
Which property sets the typeface?