How to Change Font Size in HTML


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.

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:

    <p style="font-size: 1.5em">This text is larger than normal.</p>
    <p style="font-size: 80%">This text is smaller.</p>
    <p style="font-size: smaller">This text is also smaller.</p>

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% ; }


  • Photo Credit Ableimages/Photodisc/Getty Images
Promoted By Zergnet



You May Also Like

Read Article

Geek Vs Geek: Robot battles, hoverboard drag race, and more

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!