JavaScript Curriculum
Typography
easyThe coffee shop page has good structure and spacing, but the text feels generic. The right typography choices will make it feel crafted and professional — without a single image.
Typography
Typography is the visual presentation of text. On the web, it is controlled almost entirely through CSS. Getting typography right transforms a plain HTML document into something that feels intentional and crafted.
Font Properties
Five properties control how individual characters look:
The typeface. Always provide fallbacks: font-family: "Brand Font", sans-serif. The browser uses the first available font.
h1 {
font-family: sans-serif;
font-weight: 400;
font-style: normal;
text-transform: none;
letter-spacing: normal;
}Type Scale — Consistent Visual Hierarchy
A type scale is a set of font sizes related by a consistent ratio. Instead of picking random sizes, you multiply a base size by a ratio to get each step. This creates visual harmony:
:root {
--text-xs: 9px;
--text-sm: 12px;
--text-base: 16px;
--text-lg: 21.33px;
--text-xl: 28.43px;
--text-2xl: 37.9px;
--text-3xl: 50.52px;
}line-height — The Most Underrated Property
Line height controls the space between lines of text. It's the single biggest factor in body text readability:
The best coffee starts before the sun rises. Our roasters arrive at 5am to sort, roast, and cup every single batch. No shortcuts. No compromises. Just coffee the way it should be.
p {
font-size: 16px;
line-height: 1.6; /* unitless — scales with font-size */
/* computed: 16px × 1.6 = 26px per line */
}Your Challenge
Apply a full typography system to the coffee shop page — font stack, heading hierarchy, comfortable line-height, and styled navigation labels.
Challenge
Set a font stack on body, create a clear heading hierarchy using font-size and font-weight, set comfortable line-height on paragraphs, style the nav links with letter-spacing and text-transform, and use text-align to center the hero section.
Typography
easyThe coffee shop page has good structure and spacing, but the text feels generic. The right typography choices will make it feel crafted and professional — without a single image.
Typography
Typography is the visual presentation of text. On the web, it is controlled almost entirely through CSS. Getting typography right transforms a plain HTML document into something that feels intentional and crafted.
Font Properties
Five properties control how individual characters look:
The typeface. Always provide fallbacks: font-family: "Brand Font", sans-serif. The browser uses the first available font.
h1 {
font-family: sans-serif;
font-weight: 400;
font-style: normal;
text-transform: none;
letter-spacing: normal;
}Type Scale — Consistent Visual Hierarchy
A type scale is a set of font sizes related by a consistent ratio. Instead of picking random sizes, you multiply a base size by a ratio to get each step. This creates visual harmony:
:root {
--text-xs: 9px;
--text-sm: 12px;
--text-base: 16px;
--text-lg: 21.33px;
--text-xl: 28.43px;
--text-2xl: 37.9px;
--text-3xl: 50.52px;
}line-height — The Most Underrated Property
Line height controls the space between lines of text. It's the single biggest factor in body text readability:
The best coffee starts before the sun rises. Our roasters arrive at 5am to sort, roast, and cup every single batch. No shortcuts. No compromises. Just coffee the way it should be.
p {
font-size: 16px;
line-height: 1.6; /* unitless — scales with font-size */
/* computed: 16px × 1.6 = 26px per line */
}Your Challenge
Apply a full typography system to the coffee shop page — font stack, heading hierarchy, comfortable line-height, and styled navigation labels.
Challenge
Set a font stack on body, create a clear heading hierarchy using font-size and font-weight, set comfortable line-height on paragraphs, style the nav links with letter-spacing and text-transform, and use text-align to center the hero section.