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.
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.
-
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.
-
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. -
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.
-
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.
-
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.
-
initial forces restoration of the original font size, i.e. the value initial sets the default font size for an element.
-
inherit forces the inheritance of the font size from the parent element.
-
The font-size property is inherited.
body
{
/* Font size 10% larger than default font size */
font-size
: 1.1em
;
}