How to Change Font Size in HTML

You can take control over the font size of your webpage using the font-size property of HTML's style language, CSS. 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 webpages, it is no longer supported as a valid tag in HTML 5.

  1. Defining the Font Size with CSS

    • Font sizes are set in your webpage 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 ("px") or points ("pt") 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 webpage. Add a "style" attribute to the tag with the CSS font-size attribute set to the size you want. The style will affect 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>

      (See Reference 1)

    Using CSS in Your Style Sheet

    • If your webpage 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 webpage. 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% ; }

Related Searches

References

Resources

  • Photo Credit dbraphael/iStock/Getty Images

You May Also Like

Related Ads

Check It Out

Geek Vs Geek: We Fly Drones, Accidents Ensue