CSS UNITS APPLICATION GUIDE - vh, fr, rem, em, px, many more

Hello hive devs,

In this article I would like to discuss about CSS units, its applications and best for use in every case.

Every property in CSS is given a value, these values can be in from of text or numbers or units. Units are also like numbers but have extra characters behind them. Units are used to specify width, height, length, and font-size, or any other required measurement styling.

Absolute and Relative Units

Length Units are grouped into two categories: absolute and relative

Absolute units are fixed and specific, any length or size specified with theses units will appear exactly that size. They are independent units.
Relative units are dependent on another length property. mostly from the parent element.

Absolute	Relative
cm	em
mm	%
in	ch
px	rem
pt	vh
pc	vw
	ex

Here are some common units in CSS

Unit	Name	Function/Description
%	Percentage	height or width relative to parent size
ch	Character Unit	measurement for monospaced and fonts widths
cm	Centimeter	specifies absolute length or size
pt	Points	length( height and width )absolute
ex	x-height	used to increase over-short characters (x)
Fr	Fractional Unit	calculates gaps and division in grid
in	Inches	specifies absolute height or width
mm	Millimeters	specifies absolute length or size
pc	Picas	can be used in lieu of pt and px performs same function
em	em typography	mostly used for font size
rem	Root em	sets length or size relative to root document
px	Pixels	widely used for screens and resolutions
vh	Viewport Height	specifies height based on viewport
vw	Viewport Width	specifies width based on viewport

% Percentage

Percentage specified is relative to the parent size of the subsequent element.

For example

since the parent div width is 500px, the inner div section will be 375px (500 * 0.75)

The ch unit works as an exact measurement for mono-spaced / fixed width fonts like Courier.

The CSS ch unit is defined as the width of the character "0" (zero, or U+0030) of the font.
It can be unpredictable with some other fonts like Arial for instance.

It varies according to font family

1pt is about 1.3333 pixels, or 1/72th of an inch.
so if I set my value to 12pt it is same as 16px and vice versa

In CSS, 1ex is the x-height of the font, or half of 1em, Since the size of X varies with font family, it is rarely used

ex gets its name from the x- character or the letter x in font

Fr is a fractional unit.
When gaps in the grid are taken into account, the Fr unit is an input that automatically calculates layout divisions.
1fr is 25% of available space.

1in = 96px = 2.54cm

Centimeters (cm)

1 cm is about 37.8 pixels, or about 25.2/64 of an inch.

1mm is about 3.78 pixels, or 1/10th of a centimeter
In conversion to centimeter, millimeter is 10X lesser than centimeter ( 1 centimeter = 10 millimeter) 3.78*10 (mm) will give us 37.8cm

1pc is about 16px, or 1/6 of an inch, or 1pc = 12 pt
This is a better option instead of inputting higher values in other units, you can use this unit.
32px = 2pc,
24pt = 2pc,
pt is 12times lesser than px in number

em as a Relative unit is relative to the font-size of the element it is contained (parent element) (2em means 2 times the size of the current font).

For example

font-size of p is 10px (10 * 1) while that of h2 is 30px(10 * 3) and h3 is 20px (2 * 10)

Root em as a relative unit is not affected by the size or setting of a parent element that is the container it dwells , instead it is based on the root(html) of the document, for websites.

Default font size is 16
HTML font-size is 16px.

For example

The font-size p will be = 24px (1.5 * 16)
This is default in most browsers, if it is changed by user, p will also follow according

Pixels, or px, is one of the most common length/size units in CSS, it is widely used and acceptable
it is one of the of the oldest screen and media unit.
1 pixel = 1/96 of an inch.
All other absolute units are based on the definition and value of pixel
1px means something in other units, pc = 0.0625, pt = 1.333

View height: 1vh is 1% of the height of the viewport.
A full web page height is 100vh by default
It works like the percentage unit as well. Specifying 10vh is equivalent to occupying 10% of entire visible screen height.

For example

The container div will fill 40% of the viewport's height. So if the browser window is 1000 pixels high, the height of the div will be 400 pixels.

1vw is = 1% of the viewport's width

The container div will fill 20% of the viewport's width. So if the browser window is 1000 pixels wide, the width of the div will be 200 pixels.

In the making of this article I made references to
- freecodecamp: https://www.freecodecamp.org/news/css-unit-guide/
- w3schools: https://www.w3schools.com/cssref/css_units.asp
Lead Photo was made with Adobe illustrator
All images are gotten by me except stated otherwise

👉 Hope this article was helpful, kindly leave a comment, reblog and upvote

Until next time,
stay woke✌️.