px
Direct pixel sizing. Predictable, but less flexible as a system.
Platform under construction
Font Size
Font size controls hierarchy, scanning and reading comfort. Good font-size decisions create order before users read a single paragraph.
h1 {
font-size: clamp(2.5rem, 7vw, 5rem);
}
Typography & Visual Style
Font size creates visual hierarchy.
Font size tells users what matters first. A headline, label, button and paragraph should not all compete at the same size.
CSS supports absolute and relative units. Pixels are direct, rem is based on the root font size, em is based on the current element context, and clamp() creates fluid responsive sizing.
A strong website uses a type scale instead of random font sizes. That creates rhythm, consistency and easier maintenance.
rem
Relative to the root font size. Excellent for scalable typography.
em
Relative to the current font size. Useful but can compound.
clamp()
A fluid value with a minimum, preferred value and maximum.
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.
0.875rem
Metadata, captions and subtle labels.
1rem
Body text and ordinary interface text.
1.5rem
Section headings or important labels.
clamp()
Responsive display text.
Examples
High-end visual CSS has a reason behind every value.
Fluid, controlled type
:root {
--text-base: 1rem;
--text-title: clamp(2.5rem, 7vw, 5rem);
}
h1 { font-size: var(--text-title); }
Random sizes
h1 { font-size: 73px; }
h2 { font-size: 41px; }
.card-title { font-size: 27px; }
.small { font-size: 11.5px; }
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.
Use a scale
A scale makes typography feel intentional across pages.
Prefer rem for systems
rem values respond well to root size and user settings.
Use clamp for display text
Hero text can adapt without many breakpoints.
Protect body readability
Body text that is too small makes learning harder.
Do not scale everything with viewport width
Viewport-only sizing can become extreme on wide screens.
Match size to context
A dashboard panel heading should not look like a landing page hero.
Production thinking
Visual polish must survive real content, real users and real devices.
Why does this matter?
Font size is the fastest way to build hierarchy. Without it, users have to work harder to understand the page.
Accessibility
Relative units and readable base sizes support zoom, user preferences and long reading sessions.
Production note
Define type tokens early. Random font sizes multiply quickly in a large site.
SEO note
Clear hierarchy helps users scan content, which supports engagement and comprehension.
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.
- Change --step-title maximum from 5rem to 7rem and judge the result.
- Increase --step-base to 1.125rem and notice reading comfort.
- Replace clamp() with 72px and think about mobile screens.
Practice assignment
Do this before moving to the next lesson.
- Create three font-size tokens: small, base and title.
- Use clamp() for one display heading.
- Explain where rem is better than px in your example.
Try it yourself
Create a responsive type scale
Self-check
Before you continue, prove that you understand Font Size.
Answer these questions before moving on. If your answer is vague, change the lab values and judge the visual result again.
- Can you explain rem, em and px in simple terms?
- Can you create a basic type scale?
- Can you use clamp() without making text too large?
- Can you keep body text readable on mobile?
- Can you avoid random one-off font sizes?
Senior audit upgrade
Respect zoom and user settings.
Font-size decisions should survive browser zoom and user preferences. rem-based systems usually scale more predictably than fixed pixel thinking.
rem scale
Use rem for system-level type sizes that should follow the root font size.
em context
Use em when a value should relate to the current element font size.
Zoom test
Check the page at 200 percent zoom before calling a type scale production-ready.