You change font size with the CSS font-size property. Write it in a style sheet rule or right on the tag, and pick a unit such as px, em or rem. We show both ways below, with code you can copy.
Why font size matters
Different font sizes help you organize your content. They make key words stand out and show your visitors what to read first.
Font size is a basic tool of Omaha web design. A big heading, a medium subheading and normal body text give a page a clear order.
Browsers show body text at 16 pixels unless you change it. That is a good size for reading, so change it with care.
Change the font size with a CSS class
The best way is a rule in your style sheet. CSS stands for cascading style sheets. Write a rule for a class like this.
.my-big-font-paragraph {
font-size: 28px;
}Next, add that class to the tag you want to change, for example <p class="my-big-font-paragraph">. Use a class when you want the same size in many places. You change the rule once, and every tag with that class changes too.
Change the font size with inline CSS
You can also write the style right on the tag. This is called inline CSS. It works well for a quick change in one spot.
<div style="font-size: 28px;">Big Text!</div>Inline CSS beats the rules in your style sheet, so it is hard to undo later. If you use it on many tags, your HTML gets messy. Keep your font sizes in one style sheet, and your pages stay the same from page to page.
Steps to set a new font size
Follow these steps on any page or theme.
Find your style sheet
Most sites use a file named style.css. In WordPress, open Appearance > Customize and look for Additional CSS.
Pick the tag or class
Choose the part of the page you want to change, such as p, h2 or a class name you made.
Add the font-size rule
Type font-size, a colon, a number with a unit, and a semicolon.
Save and reload the page
Clear your browser cache if you do not see the change right away.
Check it on a phone
Open the page on a small screen. Text that looks fine on a desktop can feel too small or too large on a phone.
Which unit should you use?
You can set the size with different units. Pixels (px) give an exact size. Percent (%), em and rem size the text compared to other text.
body {
font-size: 100%;
}
h1 {
font-size: 2em;
}
p {
font-size: 1rem;
}
.small-note {
font-size: 14px;
}The value 150% is one and a half times as large as the text around it. The rule font-size: 2em; makes text twice as large as the text around it. The rem unit is based on the size of the whole page. It stays steady inside nested boxes. We use em and rem for most text. Visitors can still enlarge it in their browser.
Common mistakes
Do not make body text smaller than 14 pixels. Small text is hard to read, especially on a phone.
Check that your rule has a unit. The value 28 alone does nothing in CSS, but 28px works.
If nothing changes, another rule may be winning. Look for an inline style or a rule with the same tag later in the file.
Do not use the font tag from old HTML. It is out of date, and CSS does the job better.
If you have any questions about font-size, or any other HTML questions, call our Omaha web design company at 402-813-4034, or use our contact form.
AboutRod and Tami Atwood
Rod and Tami Atwood and other Websnoogie contributors write the Websnoogie blog. Rod has built websites since 2004 and founded Websnoogie, LLC in Omaha in 2012. Tami is co-owner, content editor and billing expert. Call us at 402-813-4034 or write to staff@websnoogie.com.
