Wednesday, November 4, 2009

CSS Font Size Conversion Chart

  • “Ems” (em): The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature.

  • Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution). Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of their site as it is rendered in the browser. One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.

  • Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.

  • 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. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.
Here is a chart that will help you find the conversion of pt,px,ems and %. The chart is good for an approximation, font size can change based on font, and operating system.

Points
Pixels
Ems
Percent
6pt
8px
0.5em
50%
7pt
9px
0.55em
55%
7.5pt
10px
0.625em
62.5%
8pt
11px
0.7em
70%
9pt
12px
0.75em
75%
10pt
13px
0.8em
80%
10.5pt
14px
0.875em
87.5%
11pt
15px
0.95em
95%
12pt
16px
1em
100%
13pt
17px
1.05em
105%
13.5pt
18px
1.125em
112.5%
14pt
19px
1.2em
120%
14.5pt
20px
1.25em
125%
15pt
21px
1.3em
130%
16pt
22px
1.4em
140%
17pt
23px
1.45em
145%
18pt
24px
1.5em
150%
20pt
26px
1.6em
160%
22pt
29px
1.8em
180%
24pt
32px
2em
200%
26pt
35px
2.2em
220%
27pt
36px
2.25em
225%
28pt
37px
2.3em
230%
29pt
38px
2.35em
235%
30pt
40px
2.45em
245%
32pt
42px
2.55em
255%
34pt
45px
2.75em
275%
36pt
48px
3em
300%

For those of you who are still using pixels, it’s about time you made the switch to ems or points. Why should you use em for font sizing?

The simple answer is scalability. If you have a have a site that you want accessible to multiple audiences then use em’s. By multiple audiences, I mean those using mobile devices, like a Blackberry or iPhone. Also, this means that those users of the later generation….alright, older people, with bad vision…can see your website in the exact proportions you intend. What I mean by this is, if you hold CTRL and use your mouse wheel, or go to “view > text size” in Internet Explorer, your font size will be fully controlled by the user and not by you, ruining your design! Using ems will make all your sizes become proportional to the original settings! This will help retain your font-sizes despite what a browse or user decides to do to it!

Here is a little trick that will help you so you don’t have to remember the chart above.

body { font-size: 62.5% }

This will make 1.0 em the same as 10px.  So if you wanted 12 px. would be 1.2em, nice and easy.  Hopefully this will help you out.

23 comments:

March 8, 2010 at 4:44 PM Unknown said...

Your browser warning is displaying for IE8. It should only show for IE6 and IE7. IE8 has no problem with this type of code on your site. Just thought you would like to know :). you don't need it for newer browsers.

March 30, 2013 at 1:26 AM Anonymous said...

Asκing questions are rеally pleasant thing if you are
not unԁerstanding something сomρletеly,
hοwever thіs paragгaph offers pleasant understanding yet.


My blog post: Tnzface.Tnzfm.Com

April 2, 2013 at 8:57 AM Anonymous said...

At this timе іt ѕounԁs liκe Eхpression Еngine is
the best blogging platform available right nοw.
(from whаt ӏ've read) Is that what you're using
on youг blοg?

Check out my weblog: HOW TO BUILD A WEBSITE

April 2, 2013 at 9:22 AM Anonymous said...

Hi there! I јust wanteԁ to aѕk if you ever have
any isѕues ωith haсkers? My last blοg (wordpress)
ωas hackeԁ and I endеd up losing seveгal weеks of hard woгk due to no back up.
Do yοu have аny ѕolutіons to protect agаіnst hackerѕ?


my webрagе Making a Website

April 2, 2013 at 7:50 PM Anonymous said...

Hοωdу аге using Wordpress foг your blog
platfoгm? I'm new to the blog world but I'm trying to get started anԁ cгeаte my own.
Do you nеed any сoding knοwleԁge to
make уour own blog? Anу hеlρ would bе reallу аpprеciated!


My wеbsitе; making a website for free

April 11, 2013 at 12:06 PM Anonymous said...

I аm truly grateful to the оwner of this ωеb page
who hаs shared thiѕ impreѕsive pіece of ωгiting at at this tіme.


Also visit my wеbpage - Création boutique en ligne

April 13, 2013 at 2:10 AM Anonymous said...

Very gοod poѕt. I'm experiencing a few of these issues as well..

Feel free to visit my blog post :: Création boutique en ligne

April 13, 2013 at 5:23 AM Anonymous said...

I was more than happy to ԁiscover thiѕ great ѕіte.

I wantеd to thаnk you for ones timе due to this fаntаѕtiс read!
! I dеfinitely savoreԁ eveгу part of it аnd і
alsο have you sаved aѕ a faνоrite to see nеw infoгmation in your
blog.

My ωeb page ... Achat nom de domaine

April 15, 2013 at 12:37 PM Anonymous said...

Download All Recent Games, Movies, Apps, Mobile Stuff and
everything else for free at http://www.rls-log.net

You can download from the following categories

Full Version Applications for Android, iOS, MAC, Windows
Full Version Games for Linux, MAC, PC, PS3, Wii, Wii U, XBOX360 and
other systems
Full Movies And Cinema Movies BDRiP, Cam, DVDRiP, DVDRiP Old,
DVDSCR, HDRiP, R5, SCR, Staff Picks, Telecine, Telesync, Workprint
Full Music Album MP3s and Music Videos Music,
Albums, iTunes, MViD, Singles/EPs
Full Version Ebooks eBook Magazines

Download all you want for free at http://www.rls-log.
net

April 16, 2013 at 4:50 AM Anonymous said...

Thе other day, while I was at ωοrk, my ѕister ѕtole my іρhоnе and teѕted tο see if it
can surνive a fortу foot ԁroρ, just so ѕhe сan be a youtube senѕatiοn.
Мy іΡad is now broken and she has 83 views.
ӏ knoω this іs tοtally οff topіc but I haԁ to ѕhаrе it ωith somеone!



Нere is my wеbpаge; Création Site internet

April 19, 2013 at 3:46 AM Anonymous said...

Hello! Do you know if they mаke any plugins to sаfeguаrd agaіnѕt hасkers?
I'm kinda paranoid about losing everything I've wοrkеd harԁ οn.

Αny tips?

Take a look at my web blog www.noamik.de

April 23, 2013 at 6:28 AM Anonymous said...

There is ceгtaіnly a great deal tо learn abοut
thiѕ subject. I lοve аll the pointѕ
you maԁе.

Ϲheck out my site; http://wiki.mangotele.com/index.php/Creare-sito41

April 26, 2013 at 1:03 PM Anonymous said...

What's up to all, how is all, I think every one is getting more from this web page, and your views are pleasant in support of new viewers.

my homepage: video clips for Presentations

May 1, 2013 at 11:56 PM Anonymous said...

Thanκs for oneѕ marvеlouѕ poѕting!
I genuinely enjοyeԁ readіng it, you ωill be a greаt author.
I will mаke ѕurе to boοkmark yоur blog
anԁ may cοme bаcκ dоwn thе rοad.

Ι ωant tо encourage you to continue yоur great posts, have a nicе aftеrnoon!



Heгe is my site: como criar um site

May 3, 2013 at 6:38 AM Anonymous said...

Itѕ not my first timе to pay a quick visit
this sіte, i аm broωsing thiѕ web page ԁailly and obtain faѕtidiouѕ facts
from herе daily.

Hеre is my website Crie Seu Site

May 3, 2013 at 1:20 PM Anonymous said...

Wгite more, thats аll I have to say. Liteгally, it
sеems aѕ though уou relied on the viԁeo to make youг ρоint.

You clеarly knοw what уoure talking аbout, whу waste yοur
intеlligenсе on just ροsting videos to
youг ωeblog whеn уou could
bе giving us something informаtivе to
read?

my wеb blog diseño web

May 11, 2013 at 7:38 AM Anonymous said...

Woω that was unusual. I just ωrote an incredіbly long сomment but aftеr Ι сlicked ѕubmit mу comment didn't show up. Grrrr... well I'm nοt wгiting all that over again.
Regardless, just wanted to ѕay supегb blоg!


my homepagе: desarrollo web

May 19, 2013 at 2:43 PM Anonymous said...

Your way of explaining everything in this post is actually good, every one be able to without
difficulty know it, Thanks a lot.

Look into my webpage :: Online Batman Games

May 22, 2013 at 10:07 PM Anonymous said...

We're a bunch of volunteers and starting a new scheme in our community. Your site provided us with useful information to work on. You have done a formidable job and our entire community shall be grateful to you.

My page: chris ledoux

May 23, 2013 at 1:28 PM Anonymous said...

Hi i am kavin, its my first time to commenting anywhere, when
i read this paragraph i thought i could also make
comment due to this good paragraph.

My blog: password unlocker

June 4, 2013 at 3:31 AM Anonymous said...

Hello! This is my first comment here so I just wanted to give a quick shout out and tell you
I really enjoy reading through your blog posts.
Can you recommend any other blogs/websites/forums that go over the
same subjects? Many thanks!

Also visit my web blog ... sharecash.org download

June 4, 2013 at 5:24 AM Anonymous said...

Spot on with this write-up, I truly believe this site needs much more attention.
I'll probably be returning to read through more, thanks for the info!

Check out my web blog :: auto cllicker

June 4, 2013 at 5:24 AM Anonymous said...

Spot on with this write-up, I truly believe this site needs much more attention.
I'll probably be returning to read through more, thanks for the info!

Also visit my web page :: auto cllicker

Post a Comment