` is set to `font-size: 1.5em`, the paragraph renders at 30px. This compounds in nested structures, which can cause unexpected results. ### `rem` — Relative to Root `rem` solves `em`'s compounding problem by always referencing the root `` element's font size (typically `16px` by default in browsers). Setting `font-size: 1.5rem` always means 1.5× the root size — regardless of where the element sits in the DOM. ```css html { font-size: 16px; } h1 { font-size: 2rem; /* Always 32px */ } ``` `rem` is widely favored in modern web development for body text and component sizing because it's **predictable and accessible** — users who increase their browser's base font size will see everything scale correctly. ### `vw` — Viewport Width `font-size: 4vw` means the text is 4% of the viewport width. On a 1000px-wide screen, that's 40px. On a 400px phone screen, it's 16px. Useful for large display text that should fill space responsively, though it needs minimum size constraints to stay readable on small screens. ## Targeting Specific HTML Elements You can apply `font-size` to almost any HTML element: ```css h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.5rem; } p { font-size: 1rem; } small { font-size: 0.75rem; } ``` Browser defaults give headings progressively larger sizes (`h1` through `h6`), but CSS resets — common in frameworks like Bootstrap or Tailwind — often normalize these. If you're working inside a framework, the default sizes may already be defined and your overrides need to be specific enough to take effect. 💡 ## Inheritance and the Cascade Font size **inherits** by default in CSS. Set `font-size: 18px` on a `` tag and most child elements will inherit it unless overridden. This is useful — you can set a base size once and let it flow through the document. The cascade means specificity determines which rule wins. An inline style beats a class selector beats a tag selector. If your font size changes aren't sticking, a more specific rule somewhere else is likely overriding it. ## Responsive Font Sizing Modern layouts rarely use a single fixed size. A heading that looks right on a desktop might be oversized on a phone. Two approaches handle this well: **Media queries** — change font sizes at defined breakpoints: ```css h1 { font-size: 2rem; } @media (max-width: 600px) { h1 { font-size: 1.4rem; } } ``` **CSS `clamp()`** — sets a minimum, preferred, and maximum size in one line: ```css h1 { font-size: clamp(1.4rem, 4vw, 2.5rem); } ``` This tells the browser: never go below `1.4rem`, scale with the viewport, but never exceed `2.5rem`. Fluid, with guardrails. ## What Shapes Your Actual Result The "right" approach to HTML font sizing depends on several variables specific to your project: - **Project scope** — a single static page versus a multi-page site with a component library - **Framework usage** — working inside Bootstrap, Tailwind, or a custom design system changes what you can and should override - **Accessibility requirements** — whether you need to support browser zoom and user text preferences - **Responsive targets** — how many screen sizes and orientations the layout needs to handle - **Team conventions** — whether a codebase already uses `px`, `em`, or `rem` consistently A developer building a personal blog has different constraints than one maintaining an enterprise CMS. The mechanics of `font-size` are the same — what varies is which combination of methods and units makes sense for a given context. 🎯