Font Size Weight and Style
Control text size with font-size, weight with font-weight, and style with font-style.
Font Size Weight and Style is a free CSS Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
font-size
font-size sets the height of glyphs. It accepts any length unit. Using rem is recommended for scalable, accessible typography.
html { font-size: 16px; }
body { font-size: 1rem; } /* 16px */
h1 { font-size: 2.5rem; } /* 40px */
small { font-size: 0.75rem; } /* 12px */Keyword Font Sizes
CSS also provides absolute keyword sizes (xx-small to xx-large) and relative keywords (smaller, larger) relative to the parent font size.
p.note { font-size: smaller; }
p.big { font-size: x-large; }font-weight
font-weight sets text thickness. Use numeric values (100–900 in increments of 100) or keywords:
.thin { font-weight: 100; }
body { font-weight: 400; } /* normal */
strong { font-weight: 700; } /* bold */
.heavy { font-weight: 900; }font-weight and Variable Fonts
With variable fonts, any integer weight (e.g. font-weight: 550) is valid and the font interpolates between defined axes. This gives fine-grained typographic control.
font-style
font-style controls italic and oblique rendering:
em { font-style: italic; }
.normal { font-style: normal; }
.oblique { font-style: oblique 20deg; } /* variable fonts */font-variant
font-variant enables typographic features like small-caps:
abbr {
font-variant: small-caps;
letter-spacing: 0.05em;
}The font Shorthand
The font shorthand packs style, variant, weight, size, line-height, and family:
p {
font: italic bold 1.1rem/1.6 "Roboto", sans-serif;
/* style weight size/line-height family */
}Responsive Font Size Scaling
Use clamp() to create fluid typography that scales smoothly between a minimum and maximum size:
h1 {
font-size: clamp(1.5rem, 4vw, 3rem);
}line-height for Readability
line-height sets vertical spacing between lines. The unitless value (e.g. 1.5) is recommended — it scales with the font size of descendants.
body { line-height: 1.5; }
h1 { line-height: 1.2; }letter-spacing and word-spacing
letter-spacing adds space between characters; word-spacing adds space between words. Use em units so they scale with font size.
.heading {
letter-spacing: 0.05em;
word-spacing: 0.1em;
}Accessible Font Sizing
Never set font-size in px on the html or body element. This overrides the browser's user-set font size preference. Use rem units based on the browser default instead.
Quick Check
Which font-weight numeric value is equivalent to the keyword bold?
Recap
Use rem for font-size to respect user preferences. font-weight accepts 100–900 or keywords. The font shorthand packs multiple properties. Use clamp() for fluid typography and unitless line-height for consistent spacing.
Frequently asked questions
Is the “Font Size Weight and Style” lesson free?
Yes — the full text of “Font Size Weight and Style” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.
What will I learn in “Font Size Weight and Style”?
Control text size with font-size, weight with font-weight, and style with font-style. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start CSS Academy?
No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Font Size Weight and Style” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this CSS Academy lesson?
Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Font Family and Web-Safe Fonts
- Font Size Weight and Style
- Text Alignment Decoration and Spacing
- Google Fonts and @font-face