Font family
The ordered list of typefaces the browser should try.
Platform under construction
Fonts
Fonts shape the voice of an interface. The same text can feel technical, premium, playful or cheap depending on the typeface and fallback stack.
body {
font-family: Inter, system-ui, sans-serif;
}
Typography & Visual Style
Fonts are not decoration. They are the voice of the product.
A font family controls the typeface used to render text. CSS can use system fonts, local fonts and web fonts loaded from files or font services.
A good font stack always includes fallbacks. If the preferred font fails to load, the browser should still render readable text with a similar backup.
Professional typography is not about picking the fanciest typeface. It is about readability, tone, loading performance and consistency across headings, body text and interface labels.
Fallback stack
Backup fonts that keep text readable when the first choice fails.
System fonts
Fast, familiar fonts already installed on the device.
Web fonts
Downloaded fonts that offer more brand control but need performance care.
Visual model
Make visual decisions systematic instead of random.
Typography and visual style are where CSS starts to feel like design. These models turn subjective choices into reusable decisions you can explain, test and improve.
Inter
Brand or product choice.
system-ui
Fast operating system default.
sans-serif
Final safe category.
Examples
High-end visual CSS has a reason behind every value.
Readable font stack
body {
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", sans-serif;
}
Fragile font choice
body {
font-family: FancyBrandFont;
}
h1 {
font-family: AnotherDecorativeFont;
}
Rules that matter
Visual style becomes professional when it becomes repeatable.
A beautiful one-off style is not enough. The goal is a visual system that keeps working when the site grows, content changes and new pages are added.
Start with readability
Body text should be easy to read before it feels branded.
Always provide fallbacks
A missing font should not break the visual quality of the page.
Limit font families
Too many typefaces make a site feel inconsistent and slow.
Use system fonts when speed matters
System stacks are reliable and load instantly.
Load web fonts carefully
Font files can delay rendering if they are too large or poorly configured.
Match tone to product
A learning platform, dashboard and luxury landing page should not all sound the same typographically.
Production thinking
Visual polish must survive real content, real users and real devices.
Why does this matter?
Fonts define the first emotional signal of a page. Users may not name the font, but they feel whether the interface looks careful or careless.
Accessibility
Readable fonts support dyslexia, zoom, scanning and long-form learning. Avoid overly decorative fonts for instructional content.
Production note
Audit font files, weights and fallbacks before launch. Loading five weights for one typeface can become unnecessary page weight.
SEO note
Readable, fast-loading text helps users consume content and keeps the page experience strong.
Live code lab
Change the CSS and watch the interface respond.
The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.
Mini assignment
Try this now.
- Replace the font stack with Georgia, serif and describe the tone change.
- Remove all fallbacks except Inter and explain why that is risky.
- Add a monospace font to h1 and decide whether it fits the lesson.
Practice assignment
Do this before moving to the next lesson.
- Write a body font stack with at least three fallbacks.
- Choose one heading font strategy and one body font strategy.
- Explain why your font choice fits the product tone.
Try it yourself
Build a resilient font stack
Self-check
Before you continue, prove that you understand Fonts.
Answer these questions before moving on. If your answer is vague, change the lab values and judge the visual result again.
- Can you explain what a font stack is?
- Can you write a safe fallback stack?
- Can you explain the difference between system fonts and web fonts?
- Can you avoid using decorative fonts for body text?
- Can you connect font choice to performance and readability?
Senior audit upgrade
Font loading is a performance decision.
Typography affects product feel, but web fonts also affect loading, rendering and layout stability.
font-display
Use font-display to control whether fallback text appears while fonts load.
Preload carefully
Preload only critical fonts, otherwise preloading becomes noise.
Variable fonts
A variable font can replace several files, but still needs performance testing.