CSS Basics: A Deep Dive into CSS Font-Size ⋄ Your Key to Web Design Excellence

DeutschDiese Seite auf Deutsch

CSS Property font-size – Setting Font Size

The font size is set using the CSS font-size property. There are a number of absolute and relative CSS Units. available to define the size of a font. Apart from px, however, absolute units play no role in web design. They are only useful for printing.

Appropriate text styling is an important part of web design, as poorly styled text can be difficult to read.

CSS Property font-size
Description Possible Values Default Value Category
font size absolute or relative font size
font size as a percentage

absolute-size keywords
xx-small
x-small
small
medium
large
x-large
xx-large

relative-size keywords
larger
smaller

additional keywords
initial
inherit		 medium fonts
lengths

The value shown in orange is the standard use of the CSS font-size property.

Note:

  1. The font size is specified as a decimal number with a length unit appended. The property accepts values in em, rem, px, vw, vh, pt and many other units. There may be no space between the number and the unit.

    The font size can also be defined as a percentage or by a keyword.

  2. As an alternative to a numeric font size, keywords can be used to specify an absolute or relative font size.

    Absolute Font Size
    xx-small 9px
    x-small 10px
    small 13px
    medium 16px
    large 19px
    x-large 24px
    xx-large 32px
    relative Schriftgröße
    larger
    smalle

    The default text sizing is set with the font-size: medium setting.

    The following applies for font-size: larger
    For example, if the parent item is medium-sized, the current item will be a large-sized.

    And for font-size: smaller the following will apply:
    For example, if the parent element is medium-sized, the current element will be set to small.

  3. The default font size in the majority of browsers is 16px, which is 1em. The user can change this default value in the browser settings according to its wishes and requirements. The value given there always corresponds to 1em.

  4. A scalable font size is required for accessible web pages. The font size in the unit em or as a percentage is scalable. Therefore, a font size in px should not be used.

  5. Font size is inherited. If a relative unit is specified for a particular HTML element, the values will be multiplied if equal elements are nested.

  6. initial forces restoration of the original font size, i.e. the value initial sets the default font size for an element.

  7. inherit forces the inheritance of the font size from the parent element.

  8. The font-size property is inherited.

Beispiel 
body {
  /* Font size 10% larger than default font size */
  font-size: 1.1em;
}