CSS Font Properties

On this page…


    You can specify the size of your fonts using any of these:


    absolute-size Scaling Factor HTML hx
    xx-large 2/1 h1
    x-large 3/2 h2
    large 6/5 h3
    medium 1 h4
    small 8/9 h5
    x-small 3/4  
    xx-small 3/5 h6


    You have two choices:


    Use a fixed size, specified using either relative or absolute units.


    Advantages to using em:

    Disadvantages to using px:

    If you're going to use em (which I recommend), here's a good method:

    body {
        font-size: 100%;
        line-height: 1.3;
        font-family: Helvetica, Tahoma, sans-serif;
    h1 {
        font-size: 2em;
    h2 {
        font-size: 1.5em;


    Do not use absolute units to specify font sizes for use on computer screens. Instead, these are to be solely used with print style sheets.


    font-size: 1em;
    font-size: 16px;


    The percentage is relative to parent’s font size. Note that using a decimal is like using a percent sign! In other words, this:


    is the same as this:



    A font has three basic values for stretching, which can then be expanded upon:

    Condensed, Normal, Expanded

    Possible values are:

    NOTE: This was a CSS 2 property, but was dropped in CSS 2.1 due to lack of implementation, & is now a CSS3 property that (as of early 2012) is supported only by IE 9+ & Firefox 9+.


    You have four possible variants:

    Normal, Italic, Oblique


    You have three possible values:


    Possible values are:

    This table makes the preceding values more understandable:

    Numeric Weight Description font-weight Value
    100 Thin  
    200 Extra/Ultra Light  
    300 Light  
    400 Normal normal
    500 Medium  
    600 Semi/Demi Bold  
    700 Bold bold
    800 Extra/Ultra Bold  
    900 Black/Heavy  
    WebSanity Top Secret