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

By: Kyle

Kyle — Tue, 24 Aug 2010 13:06:07 +0000

Ian – that’s a great question, and honestly one that I’m not quite sure of. In my experience, browser anti-aliasing has more to do with the operating system and less to do with the browser, itself (with the exception of Safari, which seems to have it’s on “deal” going on for anti-aliasing).

I have never noticed a difference in text clarity related to font size across browsers, but it’s certainly an area in which additional research could be made!

By: Ian

Ian — Mon, 23 Aug 2010 23:21:35 +0000

This is great!

Now here’s a question (actually the one that led me to this article), would using ems or percent vs. px and pt allow for browsers like firefox to display text more clearly (ie. browsers that don’t anti-alias text by default)?

By: Website Accessibility: beyond availability | Creative Underground | Indianapolis Web Design and Consulting

Tue, 10 Aug 2010 17:29:14 +0000

[...] http://www.kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/ [...]

By: Designing Body Type | Kyle Schaeffer - Interactive Media Design

Designing Body Type | Kyle Schaeffer - Interactive Media Design — Thu, 15 Jul 2010 21:26:57 +0000

[...] Enzi on Pure CSS Image HoverAngela Law on Karate Corners: XHTML/CSS Rounded CornersRomeo on CSS Font-Size: em vs. px vs. pt vs. percentJim Duncan on Input Prompt Text: A Better WayKyle on Pure CSS Image HoverOther [...]

By: Romeo

Romeo — Tue, 06 Jul 2010 14:41:56 +0000

what a clear cut instructions…This is what I have looked for..Great tutorial

By: Basic website workflow | OVMS

Basic website workflow | OVMS — Thu, 24 Jun 2010 22:47:12 +0000

[...] scaling of the page’s text by the user (a good comparison of units em, pt, px and % is available here, be sure to read the comments [...]

By: Anthony Turnham

Anthony Turnham — Sun, 20 Jun 2010 04:29:52 +0000

Good article. It highlights how many opinions there are out there on web standards and best practices. I wish there were a definitive right way to do things… sigh

By: Kyle

Kyle — Sun, 13 Jun 2010 15:30:49 +0000

Hi, Marcio. I’m not sure how resolution and DPI have anything at all to do with setting font sizes on the web. Our only options are the fonts that I have listed above (em, pt, px, and %). This is merely a comparison between these four fonts and their effect and behavior within the browser window. I generally use % as my BODY font size, and I use EM to size it from there. As long as you use % as the base (body) font size, you’ll find that font sizes are drawn more consistently across browsers.

As web designers, we really have no control whatsoever regarding resolution and DPI — we can merely size our fonts as best we can and let the client’s browser take it from there.

By: Marcio

Marcio — Sat, 12 Jun 2010 09:52:36 +0000

Nice article. However, I do not agree the the Veridict. Well, because it’s so much more complicated then that, and we need to considered so many aspects, like resolution and dpi and monitor sizes and… oh my god so many things, that stating simply that, % is more consistence then EM is just a poor conclusion.

So what should I state then?
Well… that even if we cannot get a conclusion, and rule, about what is best on a overall look, we can use see what is best on a project scope view and, the important thing to note here, more then, what is best for all is, what EM; PX; DPI; RESOLUTION; %; SCREEN SIZE; etc… mean, and how can we play will all this, consistently, and archive our goals.

So I believe,
Márcio

By: morganiseit

morganiseit — Thu, 01 Apr 2010 00:55:40 +0000

Was looking for a good explanation to show new team members – thank you!

Though, I’m not convinced on % being best as a while back we noticed that using percent for some mac browsers caused them to crash… hopefully though, this bug has vanished with the demise of IE5 and other older browsers (the issue was specific to mac and only occurred in certain scenarios).

Handy resource to share about the pros and cons. There are some really hand tools – em calculators to help you calculate em to px.

I’d love to be able to work just in pixels but sadly browsers don’t auto support resizing for pixels … yet (hopefully this will happen… one day!)