In the CSS world, there are plenty of CSS properties like font-size, line-height, width, height, padding, margin, etc. are declared in number followed by base unit. For example, 14px, 15em, 16pt…
Note: Do not include a whitespace between a numeric value and its base unit in a declaration, as it will result in a syntax error.
5px
5 px
Generally, the base unit is divided into 2 different types, which are:
- Absolute – the size will be displayed exactly as stated. Typically, it will be the same size across different browsers.
(for example:px, pt, pc, in, cm, mm) - Relative – the size will be scaled relative to the container or viewport size. It is suitable for responsive layout.
(for example:em, rem, vw, vh, vmin, vmax)
Absolute Unit
px
px (Pixel) is a unit of measurement commonly used in digital graphic and web design.
Pixel value is relative to the screen DPI. In the early days when pixel is originated, most monitor have 1024 x 768 resolution and 96 DPI (dots per inch). Therefore, 1 pixel is formally defined as 1/96 inch. Nowadays, in a high-resolution screen, 1px implies multiple device pixels.
HTML & CSS:
<style>
.example_px {
font-size: 15px;
}
</style>
<div class="example_px">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
Result:
pt, pc
pt (points), 1pt = 1.3333px
pc (picas), 1pc = 12pt
HTML & CSS:
<style>
.example_pt {
font-size: 12pt;
}
.example_pc {
font-size: 1pc;
}
</style>
<div class="example_pt">Points: Lorem ipsum dolor sit amet</div>
<div class="example_pc">Picas: Lorem ipsum dolor sit amet</div>
Result:
in, mm, cm
in (inches), cm (centimeters), and mm (millimeters) are unit measurements used in the real world. In the digital world, they are rarely used in CSS. It is mainly used for printing purposes.
HTML & CSS:
<style>
.example_in {
font-size: 0.2in;
}
.example_mm {
font-size: 5mm;
}
.example_cm {
font-size: 0.5cm;
}
</style>
<div class="example_in">Inches: Lorem ipsum dolor sit amet</div>
<div class="example_mm">millimeters: Lorem ipsum dolor sit amet</div>
<div class="example_cm">centimeters: Lorem ipsum dolor sit amet</div>
Result:
Relative Unit
em
The font-size value is relative to its parent element.
HTML & CSS:
<style>
.container{
font-size: 7px;
}
.example_em{
font-size: 2em;
}
</style>
<div class="container">
<p class="example_em">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
In this example, 2em = 2 times the size of the parent’s font-size (7px * 2 = 14px); hence, the browser will generate the final output in font-size: 14px;
Result:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
rem
The font-size value is relative to the root element.
HTML & CSS:
<style>
html, body {
font-size: 5px;
}
.container{
font-size: 7px;
}
.example_rem{
font-size: 2em;
}
</style>
<div class="em_container">
<p class="example_rem">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
In this example, 2em = 2 times the size of the root/document’s font-size (5px * 2 = 10px); hence, the browser will generate the final output in font-size: 10px;
Result:
vw
The font-size value is relative to 1% of the width of the viewport
HTML & CSS:
<style>
.example_vw{
width: 5vw;
height: 10px;
background: red;
}
</style>
<div class="example_vw"></div>
In this example, 5vw = 5% of the viewport width (browser’s window width)
– let’s assume: viewport width = 1800px, the browser will generate the final output in 1800px * 5% = 90px
– If you resize your browser width to 1600px, the browser will generate the final output in 1600px * 5% = 80px
Result:
Note: this output result is generated based on your current viewport width. You may try to resize the browser to see the responsive effect.
vh
The font-size value is relative to 1% of the height of the viewport
HTML & CSS:
<style>
.example_vh{
width: 2vh;
height: 10px;
background: red;
}
</style>
<div class="example_vh"></div>
In this example, 2vw = 2% of the viewport height (browser’s window height)
– let’s assume viewport height= 1200px, the browser will generate the final output in 1200px * 2% = 24px
– If you resize your browser height to 1600px, the browser will generate the final output in 1600px * 2% = 38px
Result:
Note: this output result is generated based on your current viewport height. You may try to resize the browser to see the responsive effect.
vmin
1vmin is equal to either 1vw or 1vh, whichever is smaller.
HTML & CSS:
<style>
.example_vmin{
font-size: 1vmin;
}
</style>
<div class="example_vmin">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
– let’s assume:
viewport width = 1800px; 1vw = 18px
viewport height = 1200px, 1vh= 12px
In this example, 1vh < 1vw, hence, the browser will generate the final output for 1vmin in 12px
Note: this output result is generated based on your current viewport width & height. You may try to resize the browser to see the responsive effect.
vmax
1vmax is equal to either 1vw or 1vh, whichever is larger.
HTML & CSS:
<style>
.example_vmax{
font-size: 1vmax;
}
</style>
<div class="example_vmax">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
– let’s assume:
viewport width = 1800px; 1vw = 18px
viewport height = 1200px, 1vh= 12px
In this example, 1vw > 1vh, hence, the browser will generate the final output for 1vmax in 18px
Note: this output result is generated based on your current viewport width & height. You may try to resize the browser to see the responsive effect.
ui pencil 
Leave a Reply