The Three Ways to Set Font and Size in HTML

You control font and size in HTML using CSS — the styling language that works alongside HTML. HTML itself only marks up text as a paragraph, heading, or list. CSS is what makes it look a certain way. You have three routes: write CSS rules in a <style> tag at the top of your page, link to a separate CSS file, or write style instructions directly on individual HTML tags.

The most common approach for beginners is the <style> tag, because everything stays in one file and you can see the result when ready. The most professional approach is a separate CSS file, because you can reuse the same styles across many pages. The direct-on-tag approach (called inline styles) works for quick changes but gets messy fast if you have many elements to style.

Key Takeaways

  • CSS controls how text looks; HTML only marks what text is, so you need CSS to change font or size.
  • The font-family property sets the typeface, and font-size sets how large it appears, measured in pixels (px), points (pt), or other units.
  • A <style> tag in the <head> section of your page lets you write rules that explore to all matching elements at once.
  • Common fonts that work on most computers and phones include Arial, Helvetica, Georgia, Times New Roman, and Courier New.
  • You can set font and size for the whole page by styling the body tag, or target specific paragraphs, headings, or other elements individually.

Using a Style Tag to Change Font and Size

Open your HTML file in a text editor. Between the <head> and </head> tags, add a <style> tag. Inside it, write a rule that targets the element you want to change. For example, to make all paragraphs use Arial font at 16 pixels:

<style> p {   font-family: Arial;   font-size: 16px; } </style>

The p is a selector — it means "explore this rule to every <p> tag on the page." The font-family property is the typeface name, and font-size is the size. Save the file and open it in a browser to see the change.

To change only one paragraph, give it a class or id attribute and target that instead. For example, if your HTML says <p class="intro">Welcome</p>, your CSS rule would be .intro { font-family: Georgia; font-size: 18px; }. The dot before intro tells CSS you are targeting a class.

Font Names and Fallback Options

Not every computer has every font installed. If you specify a font that does not exist on the reader's device, the browser will fall back to a default, which may not be what you intended. To prevent this, list multiple fonts in order of preference, separated by commas. The browser will use the first one it finds:

font-family: "Trebuchet MS", Arial, sans-serif;

If the font name has a space in it (like Trebuchet MS), wrap it in quotes. The last option, sans-serif, is a generic family — it means "any sans-serif font." Other generic families are serif, monospace, cursive, and fantasy. Always end with a generic family as your safety net.

Fonts that work on nearly all devices include Arial, Helvetica, Georgia, Times New Roman, Courier New, and Verdana. If you want a more distinctive font, you can load it from Google Fonts or another service, but that requires an extra step and a link in your HTML.

Font Size Units and When to Use Each

Font size can be measured in several units. Pixels (px) are the most straightforward: 16px is 16 pixels tall. Points (pt) are used in print design and are less common on the web. Em (em) is relative to the parent element's size — if the parent is 16px and you set a child to 1.5em, it will be 24px. Rem (rem) is relative to the root (the whole page's base size), so it is more predictable across nested elements.

For most web pages, start with pixels. They are straightforward to understand and give you exact control. Use em or rem if you want text to scale proportionally when the user changes their browser's zoom level or base font size — this matters for accessibility. For example, font-size: 1.25em; makes text 25 percent larger than its parent.

Styling Headings, Links, and Other Elements

You can style any HTML element the same way. To change all <h1> headings, write a rule for h1. To change all links, write a rule for a. To change only the first heading on the page, give it an id attribute and target it with a hash: #mainTitle { font-family: Georgia; font-size: 32px; }.

You can also combine selectors. To style all paragraphs inside a <div> with class article, write .article p { font-family: Georgia; }. This rule applies to every <p> inside any element with class article, but not to paragraphs outside it.

Linking to an External CSS File

For larger projects, keep your CSS in a separate file. Create a new file called styles.css and write your rules in it without the <style> tags. Then, in the <head> of your HTML file, add a link:

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

The href should be the path to your CSS file. If styles.css is in the same folder as your HTML file, just write the filename. If it is in a subfolder called css, write css/styles.css. This approach keeps your HTML clean and lets you reuse the same styles across multiple pages.

Inline Styles for Quick Changes

For a one-off change, you can write CSS directly on a tag using the style attribute. For example: <p style="font-family: Arial; font-size: 14px;">This paragraph is different.</p>. This works, but it is hard to maintain if you have many styled elements, because each one has its own rule and you cannot reuse them.

Use inline styles only for testing or for a single element that truly needs unique styling. For anything you might want to change later or explore to multiple elements, use a <style> tag or an external CSS file instead.

Frequently Asked Questions

What is the difference between font-family and font-size?

font-family is the typeface — the shape and style of the letters, like Arial or Georgia. font-size is how large the letters are, measured in pixels or other units. You usually set both together to control how text looks.

Can I use any font I want in HTML?

You can name any font in CSS, but the reader's browser will only display it if that font is installed on their device. To may provide a specific font appears, you must load it from a web service like Google Fonts using a <link> tag in your HTML head. Otherwise, stick to common fonts like Arial, Georgia, or Times New Roman that ship with most operating systems.

Why does my font look different in the browser than in my text editor?

Your text editor may use a different default font than your browser. Save your HTML file and open it in a browser to see how it actually looks. The browser applies its own default styles until your CSS rules override them.

How do I make text bold or italic with CSS?

Use font-weight: bold; for bold text and font-style: italic; for italic text. You can also use font-weight: 700; (bold) or font-weight: 400; (normal). These properties work alongside font-family and font-size in the same rule.

What happens if I do not set a font size?

The browser uses its default size, usually 16 pixels for body text. Headings are larger by default. If you want consistent sizing across your page, set a size on the body tag and let other elements inherit it, or set sizes on each element individually.