em, px, pt, percent.. and the variants there of; whats the difference between them?

/, CSS, HTML/em, px, pt, percent.. and the variants there of; whats the difference between them?

em, px, pt, percent.. and the variants there of; whats the difference between them?

em, px, pt, percent. What is the difference ?

CSS offers a number of different units for expressing length and sometimes its confusing to relate them with each other, Here’s a tiny bit of explanation.
 
 
Em’s (em) :
– Scalable unit that is used in web document media.
– 1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.
– The size can be calculated from pixels to em using this formula: pixels/16=em
– Due to scalability and mobile-device-friendly nature Ems are becoming increasingly popular in Responsive Websites.
 
Pixels (px) :
– It is not related to the current font and are fixed-size units that are used in screen media.
– Your screen resolution specifies how many pixels your screen/display is made of. So when you specify: font-size: 12px;, you’re basically telling the browser that each letter should be 12 pixels high
– Used in web documents in order to produce a pixel-perfect representation of sites as it is rendered in the browser.
– Not scalable
 
Points (pt):
– Points are traditionally used in print media.
– 1pt (point) is 1 / 72 of an inch. Setting font-size: 12pt; sets the height of your characters to 12 / 72 inches.
– Fixed-size units and cannot scale in size.
 
Percent (%):
– Much like the “em” unit.
– The current font-size is equal to 100% (i.e. 12pt = 100%), font-size: 50%; sets the font size of your element to 50% of the font size of its parent element.
– Fully scalable for mobile devices and for accessibility.
 
Relation between the units : 
1em = 12pt = 16px = 100%
i.e.
pt = 3/4*px
em = pt/12
% = pt*100/12
 
 
 
Note: This article and it’s origin hail from em-px-pt-percent-what-is-difference, not a completely elaborate explanation there of but some basic information there of about the differences, and worth having around for reference.
By | 2018-06-01T06:21:36+00:00 October 9th, 2013|Code, CSS, HTML|0 Comments

About the Author:

Not much to know about me, I'm a 35+ year old coder, geek, gamer..

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: