# How to Change Font Size in HTML: Methods, Units, and What Actually Controls the Result Changing font size in HTML sounds simple — and in its basic form, it is. But the full picture involves a few different approaches, a handful of sizing units that behave very differently from each other, and some important decisions that depend on what you're building and who's going to use it. ## The Old Way: The ` ` Tag (And Why You Shouldn't Use It) HTML used to have a dedicated `` tag with a `size` attribute. You'd write something like `Your text`. It worked — but it's been **deprecated** since HTML4 and is officially obsolete in HTML5. Browsers still render it for backward compatibility, but using it today means writing code that's harder to maintain, inaccessible to modern tooling, and likely to cause problems as browser support continues to drift. The modern approach separates content (HTML) from presentation (CSS), and font size firmly belongs in CSS. ## The Modern Way: CSS `font-size` The standard method is applying `font-size` through CSS — either inline, in a ` ``` **External stylesheet example:** ```css p { font-size: 18px; } ``` All three achieve the same visual result. The difference is in maintainability and scope — inline styles apply to one element, internal styles apply to one page, and external stylesheets apply across an entire site. ## The Unit You Choose Changes Everything 🎯 This is where font sizing gets genuinely interesting. CSS offers several sizing units, and they don't just differ in scale — they differ in *behavior*. | Unit | Type | Relative To | Best For | |------|------|-------------|----------| | `px` | Absolute | Screen pixels | Fixed, predictable layouts | | `em` | Relative | Parent element's font size | Nested components | | `rem` | Relative | Root element (``) font size | Consistent scaling site-wide | | `%` | Relative | Parent element's font size | Proportional scaling | | `vw` / `vh` | Relative | Viewport width/height | Fluid, responsive typography | | `pt` | Absolute | Points (1pt = 1/72 inch) | Print stylesheets | ### `px` — Predictable but Rigid **Pixels** are the most intuitive unit. `font-size: 16px` means 16 pixels, full stop. The problem is that pixels don't scale when a user changes their browser's default font size in accessibility settings. For users who rely on larger text, a pixel-locked design can create real usability problems. ### `em` — Powerful but Compounding **em** is relative to the font size of the *parent* element. If a parent has `font-size: 20px` and a child is set to `font-size: 1.5em`, the child renders at 30px. This compounds in nested elements — a child inside that child at `1.5em` would render at 45px — which can cause unexpected results in complex layouts. ### `rem` — The Practical Sweet Spot for Most Projects **rem** (root em) is relative to the `` element's font size, which is typically `16px` by default in browsers. Because it always anchors to the root, it avoids the compounding problem of `em`. Setting `font-size: 1.5rem` always means 1.5 times the root size, regardless of nesting depth. Many developers set a base size on the root element and then use `rem` throughout the project for a consistent, scalable type system. ### `vw` / `vh` — Fluid Typography Viewport units scale with the size of the browser window. `font-size: 4vw` means 4% of the viewport width — which creates text that grows and shrinks as the window resizes. This is useful for large display text or hero headings, but can make body text too small on mobile or too large on wide screens if used without constraints. The CSS `clamp()` function is often paired with viewport units to set minimum and maximum bounds. ## Inheritance and the Cascade 🧱 Font size in HTML respects the CSS **cascade** and **inheritance** rules. Most text elements inherit their font size from their parent unless explicitly overridden. This means you can set a single `font-size` on `body` and have it flow through paragraphs, list items, and other block elements automatically — which is why global sizing decisions tend to happen at the `body` or `html` level. **Specificity** determines which rule wins when multiple rules target the same element. Inline styles override class rules, which override tag-level rules — unless `!important` is involved (which generally signals a structural problem in the CSS). ## HTML Heading Tags and Default Sizes HTML heading tags (`