mozilla
Your Search Results

    font-weight

    Summary

    The font-weight CSS property specifies the weight or boldness of the font. However, some fonts are not available in all weights; some are available only on normal and bold.

    Syntax

    Formal syntax: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
    font-weight: normal
    font-weight: bold
    
    font-weight: lighter
    font-weight: bolder
    
    font-weight: 100
    font-weight: 200
    font-weight: 300
    font-weight: 400
    font-weight: 500
    font-weight: 600
    font-weight: 700
    font-weight: 800
    font-weight: 900
    
    font-weight: inherit

    Values

    normal
    Normal font weight. Same as 400.
    bold
    Bold font weight. Same as 700.
    lighter
    One font weight lighter than the parent element (among the available weights of the font).
    bolder
    One font weight darker than the parent element (among the available weights of the font).
    100, 200, 300, 400, 500, 600, 700, 800, 900
    Numeric font weights for fonts that provide more than just normal and bold.

    Fallback

    If the exact weight given is unavailable, then the following heuristic is used to determine the weight actually rendered:

    • If a weight greater than 500 is given, the closest available darker weight is used (or, if there is none, the closest available lighter weight).
    • If a weight less than 400 is given, the closest available lighter weight is used (or, if there is none, the closest available darker weight).
    • If a weight of exactly 400 is given, then 500 is used. If 500 is not available, then the heuristic for font weights less than 500 is used.
    • If a weight of exactly 500 is given, then 400 is used. If 400 is not available, then the heuristic for font weights less than 400 is used.

    This means that for fonts that provide only normal and bold100-500 are normal, and 600-900 are bold.

    Meaning of relative weights

    When lighter or bolder is given, the following chart is used to calculate the absolute weight of the element:

    Inherited value bolder lighter
    100 400 100
    200 400 100
    300 400 100
    400 700 100
    500 700 100
    600 900 400
    700 900 400
    800 900 700
    900 900 700

    Common weight name mapping

    The 100 to 900 values roughly correspond to the following common weight names:

    100
    Thin
    200
    Extra Light (Ultra Light)
    300
    Light
    400
    Normal
    500
    Medium
    600
    Semi Bold (Demi Bold)
    700
    Bold
    800
    Extra Bold (Ultra Bold)
    900
    Black (Heavy)

    Interpolation

    A font-weight value is interpolated via discrete steps (multiples of 100). The interpolation happens in real number space and is converted to an integer by rounding to the nearest multiple of 100, with values halfway between multiples of 100 rounded towards positive infinity.

    Examples

    /* Set paragraph text to be bold. */
    p { font-weight: bold; }
    
    /* Set h1 (level 1 heading) text to one step darker than
       normal but less than a standard bold. */
    h1 { font-weight: 500; }
    
    /* Sets text enclosed within span tag to be one step lighter
       than the parent. */
    span { font-weight: lighter; }

    View the live example

    Specifications

    Specification Status Comment
    CSS Fonts Module Level 3
    The definition of 'font-weight' in that specification.
    Candidate Recommendation No change.
    CSS Transitions
    The definition of 'font-weight' in that specification.
    Working Draft Defines font-weight as animatable.
    CSS Level 2 (Revision 1)
    The definition of 'font-weight' in that specification.
    Recommendation No change.
    CSS Level 1
    The definition of 'font-weight' in that specification.
    Recommendation  

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support 2.0 1.0 (1.7 or earlier) 3.0 3.5 1.3
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support 1.0 1.0 (1.0) 6.0 6.0 3.1

    See also

    Document Tags and Contributors

    Last updated by: kscarfone,