CSS — Font-Size & Units

CSS — Font Size & Units

The font-size property specifies the size of the text. It can be specified as a fixed size in various units, a percentage, or as a predefined keyword.

Values

Absolute-size keywords, based on the user’s default font size (which is medium).

font-size: large;

All values in pixels:

xx-small = 9px
x-small  = 10px
small    = 13.3px
smaller  = 14px
medium   = 16px (Default Paragraph Size)
large    = 18px
larger   = 19px
x-large  = 24px
xx-large = 32px

Percentage

A positive percentage value, relative to the parent element's font size.

font-size: 200%;

Pixels

Setting the font size in pixel values (px) is a good choice when you need pixel accuracy. A px value is static.

font-size: 18px;

Em

Using an em value creates a dynamic or computed font size. The numeric value acts as a multiplier of the font-size property of the element on which it is used.

font-size: 2em;

One important fact to keep in mind: em values compound according to the parent elements.

Rem

rem values were invented in order to sidestep the compounding problem. rem values are relative to the root html element, not the parent element.

font-size: 1.6rem;

Other Units

Many CSS properties take “length” values, such as width, margin, padding, font-size, etc.

vh

1vh is relative to 1% of the height of the viewport.

height: 1vh;

vw

1vw is relative to 1% of the width of the viewport.

width: 1vw;

vmin

It is the minimum between the viewport’s height or width in percentage depending on which is smaller.

font-size: 20vmin;

vmax

It is the maximum between the viewport’s height or width in percentage depending on which is bigger.

font-size: 30vmax;

Instructor ~ TARUN KUMAR

LAZY SYNTAX