Many Designer would dispute about the usage of pixel (px), point (pt) and em when it comes to font sizes and line heights.
In CSS, you’re given four different units by which you could measure the size of text as it’s displayed in the web browser.
The most confusing aspects are which of these four units best suited for the web?
First I am showing you the difference in its values & in next article you will get more about all these font-size attributes.
Here’s a chart that shows individual points to pixels, ems and % values.
It’s just an approximation, which will depend on font, browser and OS, but it’s a good starting point.
| Pixels | Points | Ems | Percent |
|---|---|---|---|
| 8px | 6pt | 0.5em | 50% |
| 9px | 7pt | 0.55em | 55% |
| 10px | 7.5pt | 0.625em | 62.5% |
| 11px | 8pt | 0.7em | 70% |
| 12px | 9pt | 0.75em | 75% |
| 13px | 10pt | 0.8em | 80% |
| 14px | 10.5pt | 0.875em | 87.5% |
| 15px | 11pt | 0.95em | 95% |
| 16px | 12pt | 1em | 100% |
| 17px | 13pt | 1.05em | 105% |
| 18px | 13.5pt | 1.125em | 112.5% |
| 19px | 14pt | 1.2em | 120% |
| 20px | 14.5pt | 1.25em | 125% |
| 21px | 15pt | 1.3em | 130% |
| 22px | 16pt | 1.4em | 140% |
| 23px | 17pt | 1.45em | 145% |
| 24px | 18pt | 1.5em | 150% |
| 26px | 20pt | 1.6em | 160% |
| 29px | 22pt | 1.8em | 180% |
| 32px | 24pt | 2em | 200% |
| 35px | 26pt | 2.2em | 220% |
| 36px | 27pt | 2.25em | 225% |
| 37px | 28pt | 2.3em | 230% |
| 38px | 29pt | 2.35em | 235% |
| 40px | 30pt | 2.45em | 245% |
| 42px | 32pt | 2.55em | 255% |
| 45px | 34pt | 2.75em | 275% |
| 48px | 36pt | 3em | 300% |
cheers!!
Joginder poswal
Nice chart. Thanks for publishing good stuff. I would appreciate if you will publish something about what is useful in which condition. waiting for such stuff.
thanks john.
I will bck soon with all your answers
Thanks for font-size: clarification. I always confused of this concept. Now I know the better use of EM and %. Thanks a lot for this useful article. I also want to know more about….
thanks a lot gaurav..
Thanks for this Chart
Very nice its useful.
Thanks….
thanks lalit
Thanks a lot Joginder. I was looking for this information from a very long time but unable to find. This is really very useful information to all designers. Thanks for sharing this wonderful inromation.
Ashwani Sharma.
Thanks Ashwani. you’ll get a lot of information on this blog very soon….
Thanks for the Info about this But actually which one (px, pt, em….%) we use for Webdesigning? Reason? Please reply to me ….
I mean which one is Better format for Webdesigning?
Thanks for the Above info, But which one ( px, pt, em…%) is better for Webdesigning? Reason? Please reply to me…….
hey hari this is not a small concept it can become a another post lol
ok
its all depends on your requirement
now days Ems are becoming popular in web documents. lots of designer and developer using it. because
Em — is a unit based on value of font-size. If you set all of the fonts for within the body of your page to be 12px than 1em is equal to 12px. em based designs became in fashion as people starting thinking about the best way to handle font resizing using the browser. In an em design, the whole design is zoom with the font-size.
PX — Px is a unit used for screen media. It’s an absolute measure. One pixel is equal to one dot on the computer screen.
Percent: The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 13pt = 100%).While using the percent unit, your text remains fully scalable for mobile devices.
Points (pt): Points are traditionally used in print media. One point is equal to 1/72 of an inch.Points are fixed-size units and cannot scale in size.
Thanks….it’s useful for me
Hi Joginder,
I need some help from you. i need some tips on cross browser compatibility testing.What rules should follow in css property, a page can run on different browser.
there are lots of thinks for browser compatibility. check my blog properly i ‘ll post more about this.
it really helped me..thx