How to Change Font Size in HTML

Techwalla may earn compensation through affiliate links in this story.
Easily change your Web page's font size with CSS.
Image Credit: Ableimages/Photodisc/Getty Images

You can take control over the font size of your Web page using the font-size property of HTML's style language, Cascading Style Sheets. Starting with HTML 5, the CSS approach to font styling replaces the older "font" tag. While the font tag is valid for your HTML 4 formatted Web pages, it is no longer supported as a valid tag in HTML 5.


Defining the Font Size With CSS

Font sizes are set in your Web page using the CSS attribute "font-size." Font sizes are typically defined using the typographic measure "em," where 1.0 is the current font size, or percentages, where 100 percent is the current font size. You can also use the preset value names, such as "smaller," "larger," "small" and "xx-large." While defining the size in pixels or points is valid, it is not recommended because your text may not scale correctly in certain circumstances.


Video of the Day

Using CSS in Your HTML Tags

You can use styles in nearly any HTML tag in the body of your Web page. Add a "style" attribute to the tag with the CSS font-size attribute set to the size you want. The style affects the text between the beginning and end of the tag -- for example:


This text is larger than normal.

This text is smaller.

This text is also smaller.

Using CSS in Your Style Sheet

If your Web page has a CSS style sheet, either embedded in the Head of your page or defined in a separate file, you can change the font size there. Style sheets are handy for making global changes to your Web page. Find or add the declaration you would like to change and add the font-size code. For example, to make the font size larger for all paragraph tags, use:


p { font-size: 125% ; }



Report an Issue

Screenshot loading...