# How to Change the Size of Font in HTML Font size control is one of the most fundamental skills in web development. Whether you're building a simple webpage or fine-tuning a complex layout, understanding how HTML and CSS handle font sizing — and which approach suits which context — determines how readable and professional your content looks across different screens and devices. ## The Two Main Approaches: HTML Attributes vs. CSS Historically, HTML offered a ` ` tag with a `size` attribute. You'd write something like: ```html This is larger text ``` This approach still technically works in some browsers, but it's **deprecated** — meaning it's been officially removed from the modern HTML standard (HTML5). Most browsers still render it for backward compatibility, but relying on it is poor practice and will cause validation errors. The modern, correct method is **CSS** (Cascading Style Sheets), either written inline, in a ` ``` **External stylesheet** (linked `.css` file — the most scalable approach): ```css p { font-size: 1rem; } ``` Each method works, but external stylesheets are preferred for maintainability, especially as projects grow. ## Understanding Font Size Units 📐 This is where most beginners get tripped up. CSS supports multiple units for font size, and each behaves differently: | Unit | What It Does | Best Used For | |---|---|---| | `px` | Fixed pixel size | Precise control, static layouts | | `em` | Relative to parent element's font size | Nested components, scalable type | | `rem` | Relative to the root (`html`) font size | Consistent scaling across the page | | `%` | Percentage of parent's font size | Flexible, inherited scaling | | `vw` | Percentage of viewport width | Fluid, responsive headlines | | `pt` | Points (print-based unit) | Print stylesheets | **`px`** is the most intuitive starting point. If you set `font-size: 16px`, the text will render at 16 pixels regardless of anything else — predictable, but inflexible. **`rem`** is widely considered the best default for body text in responsive design. Most browsers default the root font size to `16px`, so `1rem = 16px`, `1.5rem = 24px`, and so on. If a user has changed their browser's default font size for accessibility, `rem` respects that setting. `px` does not. **`em`** compounds — if a parent element is `20px` and a child is set to `1.5em`, the child renders at `30px`. Useful inside isolated components, but can cause confusion when deeply nested. **`vw`** makes text scale with screen width — popular for large display headings, but requires careful testing across breakpoints so text doesn't become unreadably small on mobile. ## HTML Heading Tags and Default Sizes HTML has six built-in heading elements — `` through `
` — that carry default font sizes defined by the browser's user agent stylesheet. Typical browser defaults look roughly like this: | Tag | Approximate Default Size | |---|---| | `
` | ~32px (2em) | | `
` | ~24px (1.5em) | | `
` | ~20.8px (1.17em) | | `
` | ~16px (1em) | | `
` | ~12.8px (0.83em) | | `
` | ~11.2px (0.67em) | These are browser defaults, not guarantees — different browsers and operating systems may render these slightly differently. That's why most web projects include a **CSS reset** or **normalize stylesheet** to establish consistent starting values before applying custom styles. ## Responsive Font Sizing Fixed sizes work fine on a single screen width, but on mobile, a `32px` heading can feel oversized; on a large monitor, `14px` body text feels tiny. 🖥️ Two modern approaches handle this: **CSS `clamp()`** lets you set a minimum, preferred, and maximum size in one line: ```css h1 { font-size: clamp(1.5rem, 4vw, 3rem); } ``` This means the heading scales fluidly with the viewport but never goes below `1.5rem` or above `3rem`. **Media queries** let you set different sizes at different breakpoints: ```css body { font-size: 16px; } @media (min-width: 768px) { body { font-size: 18px; } } ``` Which approach works better depends on how much design flexibility your project requires and how comfortable you are with fluid typography concepts. ## Factors That Affect Which Method Works for Your Project Several variables determine which font-sizing approach actually makes sense in practice: - **Project scale** — A single static page can use `px` values without issue. A multi-page site with shared components benefits from `rem`-based systems. - **Accessibility requirements** — Sites that need to support users with low vision should use relative units (`rem`, `em`) so browser font size preferences are respected. - **Framework or CMS** — If you're working inside WordPress, Bootstrap, Tailwind, or another framework, those systems often define their own type scales. Overriding them requires understanding specificity and inheritance. - **Team and codebase conventions** — Mixing `px`, `em`, and `rem` inconsistently across a stylesheet creates debugging headaches. Whatever unit system you choose, consistency matters. - **Device targets** — A site viewed primarily on desktop has different sizing concerns than one designed mobile-first. ## Inheritance and Specificity Matter CSS font sizes **cascade and inherit**. If you set `font-size: 18px` on the `body`, every child element inherits that size unless overridden. This is useful — it means you can set a base size once — but it also means that `em` values compound in ways that can surprise you inside nested elements. CSS **specificity** determines which rule wins when multiple rules target the same element. An inline style overrides an external stylesheet. An ID selector overrides a class selector. Understanding this hierarchy prevents frustrating situations where your size changes don't seem to apply. The right sizing approach for a given project depends on the combination of your codebase's existing structure, your target audience's devices and accessibility needs, and how the typography fits into the broader design system — all of which vary from one situation to the next.