Dale Stephenson

Journal #Eight [DES501] - CSS Length Units

Journal #Eight [DES501] - CSS Length Units

CSS Length Units

JOURNAL #Eight [DES501]

CSS Length Units

There are several ways to express lengths in CSS, lengths are important due to the numerous properties that take length values including width, margin and padding. The units used for expressing lengths are split into two distinct types, absolute and relative. Length units are declared as a number followed by the unit type, several of the types available in CSS allow the for input of negative lengths.

The length units available to web designers are described as follows:

Absolute Lengths

Absolute lengths are fixed units and are always expressed as the size that is defined, because of this they are not recommended for screen display due to the varying screen sizes from desktops to laptops, tablets and phones. They are best used where the output medium is known such as print layouts, which is where pt and pc units originate.

There are instances where px can be useful, such as cases where text must be aligned next to images, or if the text needs to be very sharp, 1px will guarantee that the text looks sharp on-screen.

Unit Description Example
cm centimeter length line-height: 1cm;
mm millimeter length font-size: 5mm;
in inch length 1in = 96px line-height: 0.5in;
px pixels 1px = 1/96th of 1in font-size: 15px;
pt points 1pt = 1/72th of 1in font-size: 15pt;
pc picas 1pc = 12pt h1 {font-size: 4.5pc;}


Relative Lengths

Relative lengths are relative to other length properties, they are unit specifications that scale between various rendering mediums, which makes them better for websites that are accessed on a variety of screen sizes.

Font sizes are best when using the em length unit, to set the font size to the default size of the screen. This means that the size of the font sits comfortably on the device screen, for example H2 {font-size: 3em} is 3 times the size of the defined font of the body text.

Unit Description Example
em Length unit that is relative to the elements
font size, so 5em is 5 times the current font size		 div {
font-size: 30px;
border: 1px solid black;
}

span {
font-size: 0.5em;
}
ex Length unit that is relative to the x-height of
the current font size, this is rarely used		 div {
font-size: 30px;
border: 1px solid black;
}

span {
font-size: 1ex;
}
ch Length unit that is relative to the width of
the "0"		 body {
font-size:16px;
}

div {
font-size: 3ch;
border: 1px solid black;
}
rem Length unit that is relative to the font-size of
the root element		 html {
font-size:16px;
}

div {
font-size: 3rem;
border: 1px solid black;
}
vw Length unit that is relative to 1% of the
viewport width		 h1 {
font-size: 20vw;
}
vh Length unit that is relative to 1% of the
viewport height		 h1 {
font-size: 20vh;
}
vmin Length unit that is relative to 1% of the smaller
dimension of the viewport		 h1 {
font-size: 15vmin;
}
vmax Length unit that is relative to 1% of the larger
dimension of the viewport		 h1 {
font-size: 15vmax;
}
% Length unit that is relative to the parent
element		 body {
font-size:16px;
}

div {
font-size: 150%;
border: 1px solid black;
}

References

CSS: em, px, pt, cm, in…. (n.d.). Retrieved May 23, 2021, from https://www.w3.org/Style/Examples/007/units.en.html

CSS Units. (n.d.). Retrieved May 23, 2021, from https://www.w3schools.com/CSSref/css_units.asp