EduSphere
Responsive typography
Resize the browser window: every heading and paragraph on this page gets smaller on a phone, medium on a tablet and larger on a desktop.
| Element | Mobile (< 768px) | Tablet (768px+) | Desktop (1024px+) |
|---|---|---|---|
| h1 | 28px | 36px | 48px |
| h2 | ~22px | ~26px | 32px |
| h3 | ~18px | ~19px | ~22px |
| Paragraph | ~15px | 16px | 18px |
Why text size should depend on the screen
A heading that looks balanced on a 27-inch monitor takes half of a phone screen and pushes the content out of sight. Text that is comfortable on a phone looks tiny on a wide desktop, where the reader sits further away. Media queries let one stylesheet choose the right size for each case.
How it works on this page
All font sizes are stored as CSS variables in :root. The base
values are for phones. Two media queries,
@media (min-width: 768px) and
@media (min-width: 1024px), change only the variables, so every
heading and paragraph updates at once.
Example from the EduSphere catalogue
HTML & CSS Foundations is an eight-week course for complete beginners. You learn semantic markup, the box model and responsive layouts, and you finish by publishing your own site to GitHub Pages.
Mobile first
The stylesheet is written mobile first: the rules without a media query
describe the smallest screen, and min-width queries add
changes as the screen grows. Phones download and apply the simplest
version, and bigger screens build on top of it.