How to Change Text Size in HTML

The three ways to set text size in HTML

You control text size in HTML through CSS (Cascading Style Sheets), not through HTML tags alone. HTML provides the structure — the words and headings — but CSS handles how large or small those words appear. You have three main routes: write CSS directly in a <style> tag in your HTML file, link to a separate CSS file, or add inline styles to individual HTML elements.

The most common approach for beginners is inline CSS, where you add a style attribute directly to the HTML tag you want to resize. For a paragraph, you would write <p style="font-size: 18px;">Your text here</p>. The number and unit (like px for pixels) tell the browser exactly how large to display that text.

For larger projects or when you want to change text size across many pages at once, a separate CSS file is cleaner and faster. You link it in the <head> section of your HTML, then write all your sizing rules in one place. This way, if you decide headings should be bigger, you change one line instead of fifty.

Key Takeaways

Text size in HTML is controlled by CSS, not by HTML tags — you need a font-size property with a value like 18px or 1.5em.
Inline styles work for single elements: <p style="font-size: 18px;">, but become repetitive if you resize many elements.
A <style> tag in the <head> section lets you set sizes for all paragraphs, headings, or other elements at once using selectors like p { font-size: 16px; }.
Relative units like em and rem scale with user preferences and parent elements, making them more flexible than fixed pixel sizes.
Headings have default sizes in HTML — <h1> is largest, <h6> is smallest — but you can override any of them with CSS.

Using inline styles for single elements

Inline styles are the quickest way to resize one piece of text without touching any other part of your page. You add the style attribute directly inside the opening tag of the element you want to change. For example, <p style="font-size: 20px;">This paragraph is larger</p> makes that one paragraph 20 pixels tall, while every other paragraph stays at its default size.

You can combine multiple CSS properties in one inline style by separating them with semicolons. If you want a paragraph that is both larger and bold, write <p style="font-size: 20px; font-weight: bold;">. The order does not matter, but each property needs its own semicolon.

Inline styles work well for quick tests or one-off changes, but they become hard to manage if you have dozens of elements to resize. If you find yourself copying the same style attribute over and over, a <style> tag or separate CSS file is a better choice.

Using a style tag to resize multiple elements at once

A <style> tag sits in the <head> section of your HTML file and holds CSS rules that explore to your entire page. Inside it, you write a selector (the name of the HTML element you want to change) followed by curly braces with the properties you want to set. For example:

<style> p { font-size: 16px; } h1 { font-size: 32px; } h2 { font-size: 24px; } </style>

This rule makes every <p> tag on the page 16 pixels, every <h1> tag 32 pixels, and every <h2> tag 24 pixels. If you later decide paragraphs should be 18 pixels instead, you change one line and the entire page updates.

You can also target specific elements by giving them a class or id attribute in HTML, then writing CSS rules for those classes or IDs. A paragraph with <p class="intro"> can be sized differently from other paragraphs by writing .intro { font-size: 20px; } in your style tag. This approach gives you fine control without cluttering your HTML with inline styles.

Choosing between pixels, em, and rem units

Pixels (px) are fixed sizes that never change. If you write font-size: 16px;, the text is always 16 pixels tall, regardless of the user's browser settings or screen size. Pixels are straightforward and predictable, which is why many beginners use them first.

Em (em) is a relative unit that scales based on the parent element's size. If a parent paragraph is 16 pixels and you set a child element to 1.5em, that child becomes 24 pixels (16 × 1.5). Em is useful when you want text to scale together — if you later change the parent size, the child scales automatically.

Rem (rem) stands for "root em" and scales based on the root element's size (usually the <html> tag), not the parent. This makes rem more predictable than em in complex layouts because every rem value is calculated from the same starting point. Many developers prefer rem for this reason.

For accessibility, relative units like em and rem are often better than pixels because they respect a user's browser text-size preferences. If someone has set their browser to display text larger, pages built with em or rem will honor that choice, while pixel-based sizes will not.

Overriding default heading sizes

HTML headings come with built-in sizes: <h1> is the largest, <h2> is smaller, and so on down to <h6>. These defaults exist so search engines and screen readers understand your page structure. But you can override them with CSS if your design calls for it.

To make an <h2> the same size as an <h1>, write h2 { font-size: 32px; } in your style tag. To make all headings the same size, you can write h1, h2, h3, h4, h5, h6 { font-size: 18px; } — the commas let you explore one rule to multiple selectors at once.

Be careful not to change heading sizes so much that they lose their semantic meaning. If an <h2> looks much larger than an <h1>, visitors and assistive technology will be confused about your page structure. Use CSS to fine-tune sizes, not to reverse the hierarchy.

Linking to an external CSS file

For larger projects, keeping CSS in a separate file makes your HTML cleaner and lets you reuse the same styles across multiple pages. Create a new file called styles.css (or any name you choose) and write your CSS rules in it without the <style> tags. Then link it in the <head> section of your HTML file with a single line:

<link rel="stylesheet" href="styles.css">

The href attribute should point to wherever your CSS file is located. If styles.css is in the same folder as your HTML file, just use the filename. If it is in a subfolder called css, write href="css/styles.css".

Once linked, all the font-size rules in your CSS file explore to your HTML page. If you have ten pages, you can link the same CSS file to all of them, and changing one rule updates text size across your entire website. This approach scales much better than inline styles or style tags as your project grows.

Testing text size in the browser

After you write your HTML and CSS, open the file in a web browser to see how the text actually looks. Most browsers let you zoom in and out with Ctrl+Plus (Windows) or Command+Plus (Mac) to test how your text size holds up at different scales. This is not the same as changing the font-size property — it is just testing how your page responds to user zoom.

If you want to test how your page looks to someone who has set their browser's default text size to large, you can usually find that setting in your browser's preferences or accessibility options. Testing at different zoom levels and text-size settings helps you catch problems before visitors see them.

Use your browser's developer tools (usually opened with F12 or right-click → Inspect) to check what CSS is actually being applied to an element. Click on any text, and the developer tools will show you the font-size property and which CSS rule is controlling it. This is invaluable for debugging when text is not the size you expected.

Frequently Asked Questions

Can I change text size with just HTML tags, no CSS?

No. HTML has tags like <big> and <small>, but they are outdated and not recommended. Modern HTML relies on CSS for all styling, including text size. You must use CSS — either inline, in a style tag, or in a separate file.

What is the best unit to use for text size?

For body text, rem is often the best choice because it scales with user preferences and is predictable across your entire page. For headings and special elements, em works well if you want them to scale relative to their parent. Avoid px for body text if accessibility is important to you.

Why does my text size not change when I add CSS?

Check that your CSS syntax is correct — each property needs a colon, and each rule needs a semicolon. Make sure your selector matches the HTML element you are trying to change. If you are using a class or ID, verify that the HTML element has the correct class or id attribute. Use your browser's developer tools to see which CSS rules are actually being applied.

Can I set different text sizes for different screen sizes?

Yes, using media queries in CSS. You can write rules that explore only when the screen is wider or narrower than a certain width. For example, @media (max-width: 600px) { p { font-size: 14px; } } makes paragraphs smaller on mobile devices. This is part of responsive design.

Should I use the same font size for all paragraphs?

Usually yes, for consistency and readability. Most websites use one size for body text (often 14px to 18px) and larger sizes for headings. You can use different sizes for special elements like captions or sidebars, but varying paragraph sizes randomly makes pages harder to read.

This guide is for general information only and is not medical, financial, legal, or other professional advice. For decisions specific to your situation, consult a qualified professional. See our Editorial Policy.