Comments on: CSS Font-Size: em vs. px vs. pt vs. percent

By: em, px, pt | Hi, I'm Liu Ling. em, px, pt | a.k.a. Six Zero

em, px, pt | Hi, I'm Liu Ling. em, px, pt | a.k.a. Six Zero — Sat, 04 Feb 2012 09:31:25 +0000

[...] suggested practice from Kyle: use percent on the body element (body { font-size: 62.5%; }), and then use the em unit to size it [...]

By: Animal Logos

Animal Logos — Mon, 30 Jan 2012 15:16:49 +0000

Agreed but still this post is awesome, if you take a broader look then you got that its explaining many things and covering most of things.

By: 10+ Consejos sobre CSS | Alfonso González

10+ Consejos sobre CSS | Alfonso González — Mon, 30 Jan 2012 12:34:50 +0000

[...] Best Practices CSS Font Size [...]

By: Matt

Matt — Mon, 30 Jan 2012 09:58:20 +0000

I ditto Louie. I believe this all depends on who you are designing for; yourself, at your workstation, or the 85 year old grandmother on her iPad who would like to be able to read the content of your clients page; or the 6 year old kindergarden student doing the same, or middle America standing in line at Starbucks or driving to work. Pinching, pulling and general purpose finger play is best left behind closed doors or in movie theaters; at least if you care about your sites bounce rate. Anything less then 100% easy is to difficult for the large majority of those who don’t live in our bubble; oh and they happen to be our clients customers. At least that’s the way I see it.

By: ,lkio

,lkio — Mon, 30 Jan 2012 05:39:50 +0000

By: Julxz

Julxz — Sat, 28 Jan 2012 09:19:12 +0000

Thanks for this great info.. Now I can build my mobile device sites correctly…

By: Mark J Spinnover

Mark J Spinnover — Wed, 25 Jan 2012 05:05:22 +0000

Good article. I totally get your point, and that it’s a good idea to keep things scalable.

Out of curiosity, I did a ‘view source’ on a goo.gle search results page. Maybe I’m looking at it wrong… but from what I can tell, they use everything there, it seems: pt, px, em and percents, but mostly px and pt.

I’m having a problem with Firefox and font. The FF fonts displays a little smaller than what I would prefer. I’m also noticing that Google displays the same way. Now I don’t feel so bad. :)

FF may be a 2nd class browser soon if they don’t get their font inconsistencies resolved.

By: Michael

Michael — Fri, 20 Jan 2012 01:03:00 +0000

Rob, I tried your nested/un-nested example above and got the same display result regardless of whether the LI is nested in the P or not. What I am I missing? Isn’t the em relative to the body size declaration not the parent element in the cascade?

By: john

john — Wed, 18 Jan 2012 13:49:53 +0000

I would stay with pt, if I were you, because it will scale correctly if the user’s display settings are set correctly. If you start using pixels, someone with a full HD monitor would see a very tiny website.

However, if his OS knows that the dpi of his monitor is 120, instead of 72, and you use pt, the text and the images will be readable for this person too.

Some people say that browsers are able to zoom in on the whole page, so pixels are fine. But browsers were forced to implement this, because a whole bunch of retarded web develeopers think you should use px.

Using % (as the article states) is cool for text, as it would also honour a user’s display and font settings, but it makes scaling images more difficult in my opinion.

By: bharat

bharat — Tue, 17 Jan 2012 08:29:32 +0000

Your article cleared my confusion