Grow your CSS skills. Land your dream job.

Which font sizing is best? EM vs PX vs %

  • # January 15, 2012 at 6:56 pm

    I jumped into a discussion on another forum regarding font sizing and a couple of its members insist PX font sizing is bad.

    Now me, ive always used PX font sizing and have built a few sites using EM and % as well, i find them messing up my designs so have always preferred PX. I set the padding, margin and other elements in PX so it just makes sense to me. Im talking about fixed width sites at the moment, i havent had a fluid site to build for a long time and dont like them. Im trying to learn responsive design and I understand using @ media queries you cant use EM font sizing?

    I know from an accessibility point of view, EM or % should be used but every time i do all the text etc just spills outside my divs and the design is ruined. Ive just been playing with the font sizing on my personal site and its becoming a headache using EM and %. When you zoom on a modern browser it zooms in all elements of the page and its fine to use PX.

    On my personaI site ive just set my body font to 100%, then the P to 85%, the H2 to 110%, the footer menu to 75% etc. Everything looks fine. I go into my browser settings (Chrome) and change the font to Extra Large, go back to my page and everything is messed up. The main text is all outside the div its sat in, the menu is messed up on two lines. I have a twitter feed, this is 220px by 500px and has a background image the same size. If i use a font other than PX the text spills outside the background by setting the browser font to large/extra large and it doesn’t work. I then click onto this forum and everything is as it should be. I had a nosy at the CSS and the font sizing is set to PX. There is a another stylesheet with various EM and % variations on some elements so i presume some debugging has been done to eliminate some of these issues.

    Some of the points raised was the fact that different devices have different dpi, whether its 96, 120, 144 etc and you can override the font sizing by changing the system font size. I cant change any font sizing on my iMac apart from in the browser so nothings overriding my stylesheets, and in fact the test i just did on Chrome when i changed to the very large font was overridden by my PX font sizing anyway, the same in Firefox and and Safari.

    I thought this would make a good topic so what do you all use? i want to hear all arguments as im a couple of months into a new web design venture and want to make sure on a commercial level im doing the right thing by my clients.

    # January 15, 2012 at 8:15 pm

    Although this article is a few years old now, it is still relevant: http://www.alistapart.com/articles/howtosizetextincss

    # January 15, 2012 at 8:54 pm

    @joshuanhibbert that article is now 5 years old. Some points may be relevant, but it is out dated in many ways.
    Px based design is now growing in many ways because browsers now use zoom to enlarge the page vs text resizing.

    # January 15, 2012 at 9:09 pm

    @springlab

    Do you use PX like me? As we both have said, browsers zoom in all the content so everything stays relevant, when you have a fixed size div and text in EMs or % you have no control over the layout if the reader increases the font size. You cant build every site with fluid divs and heights etc because you couldnt have any control of the design and the maths would be crazy. I think responsive design is the way forward, im trying to learn this at the moment.

    In my mind, the design should stay as the designer intended thats why i use PX. When i zoom in on a webpage on my 50″ living room plasma, my designs work fine using PX. If i read it on my iPhone, im still able to view it perfectly. To me thats how it should be. If a person is visually impaired and needs to increase the font size, shouldnt the other elements on the page also increase so they can see them clearly too? Thats what the modern browsers are doing.

    # January 15, 2012 at 9:12 pm

    @springlab I feel that it is actually the other way around. Pixels don’t offer nearly enough flexibility in todays age of responsive design. I firmly believe that pixels have had their time in the spotlight, but now the future will be better off with measurements like rems.

    @MrPixel This is my view: http://www.the-pastry-box-project.net/andy-clarke/2012-january-3/

    Just to make myself extra clear, I am not talking about using responsive measurements for browser zooming, I am talking about using them so that content can flexibly adapt to the device it is being viewed on.

    # January 15, 2012 at 9:33 pm

    @joshua

    That site is exactly what im looking to do with mine. I have a fixed width 960 12 column site, i love how it looks. Im looking to add the responsive side in the next few weeks where it changes the structure as you decrease the browser width. Obviously on an iPhone and such the design will be totally usable so no pinch and zoom. Thats a lovely example, thanks. How many style sheets does it take? 1 for each resolution? And how many resolutions do you consider? Do you have different size images for each stage or do you set the div size to say 50% for those pictures to decrease on the smallest setting?

    Ive just done a test. I resized my Chrome font to extra large, then Googled WEB DESIGN [MY AREA] and looked at every page in the top 20.

    3 sites used EMS, the rest all design in pixels. I could tell by the font sizes obviously, but delving into some of the stylesheets of the top 5 proved they use pixels so it isnt just me, most of the top agencies ive just browsed all use PX.

    # January 15, 2012 at 10:40 pm

    That isn’t my work, I was suggesting you read the content on that page.

    # January 16, 2012 at 12:32 am

    I didn’t really know about the application of the ideal type size. But for the em units, I think it appropriate to balance the size of the elements based on the size of the letters. eg: JQuery UI themes. It’s very nice.

    # January 16, 2012 at 7:26 am

    @joshuanhibbert responsive design and text are two different animals. Text is the least of the problem when it comes to responsive design. Px vs % in margins and paddings is the real debate. Text in responsive design is easily changed with media queries and will naturally flow with the design using px…as the same with % or ems. However, px IS WIDELY USED in design these days and many designers are making the switch to px based design for the stability of the text size.

    Use px and make life simple.

    # January 16, 2012 at 7:56 am

    @springlab We will have to agree to disagree. I take a content out approach when designing, therefore everything is focused around the typography. I’m not saying it’s always the right way, but I find that it is mostly the right way to design. And sure fluid measurements may be harder to work with, but since when should we let that stop us from doing right by our design?

    # January 16, 2012 at 8:05 am

    @joshua

    Going back to my original topic, why would most of the agencies i looked at yesterday all use PX font sizing. Google a few and see how many use EMs.

    I can only presume that PX font sizing is becoming the standard so that designs remain intact. Again, im open to all arguments as thats why i started this topic.

    # January 16, 2012 at 8:27 am

    @MrPixel I’m not sure how you expect me to speak for businesses I have nothing to do with? Everything I have said is merely my own opinion, please take it as such. I am no expert on the matter.

    # January 16, 2012 at 8:35 am

    @joshua

    Im not expecting anything bud, just some constructive discussion. Im looking at other agencies in my area and most of the top ones use PX font sizing. To me, they are either slow on the uptake, or most prefer PX font sizing as it allows them to control the layout of the design.

    # January 16, 2012 at 11:38 am

    @MrPixel px based layout is on the uprise with out question. It adapts well in any layout design…including responsive design and mobile devices. Even mobile devises use zoom so px works perfect for this. Ems was the thing to use back when browsers did not support zoom, but that has all changed and there are still some who prefer to use Ems because that is what they have grown to use.

    # January 16, 2012 at 11:56 am

    @springlab

    so im not alone in my thinking. I just wish there was a definite way then all this would be irrelevant. Im reading about REM units now, another to add into the mix. I test my designs on every browser going and on the 4 devices i own and PX has yet to let me down. I have however grown frustrated at EM sizing as it ruins my designs when on zoom. It is an interesting topic tho, and there seems to be no definite way. Like my name, ill stick with the Pixels!

Viewing 15 posts - 1 through 15 (of 44 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".