Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
Node is saved as draft in My Content >> Draft
  • Font-size em vs px

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 11
    Comment on it

    Most of us probably know that EM was very popular back in the days of IE6 and other browsers that didnt support full site zooming (like moving your head closer to the screen, ctrl and + to zoom in, ctrl and to zoom out). Loads of sites had buttons to increase the font-size and if not the browser could also change the font-size. It was nice to see almost every good designer using EM in staid of PX. But since modern browsers all started supporting the full zoom designers tend to go back to the PX. PX zoom now they say. Well thats right but EM still has some advantages that makes them still good to use. The first part is flexibility in your CSS. By using EM in your CSS file you will always be more flexible later on. I cant think of one site Ive ever made where the client didnt do some late adjustments, even after being release. What if the client realizes that when using the website (rather than judging on a photoshop preview) that the site is hard to read for elders and he wants a global resize of all fonts? With EM that rather easy, you can just adjust the font-size on your body tag and voila With PX on the other hand it could take you a while. Or worse, with PX you could forget some adjustments in your css file and have different sizes all over the pace

    Flexibility, an example You have a container on your website. The inside the container has H2 title and some plain text. The font size of the H2 had been set to 16PX, the plain text has a size of 12PX like specified in the css file on the body. Say that you want to change the font-size on those two items in that container but you want to keep the defined font-size on the H2 and text on the rest of the site. You could indeed just use the cascading and target the contents of the container and specify a new font size for the H2 title and te text. In this case that wouldnt be that big of a deal, but imagine having a very content heavy site where there are tons of H1-H6s, text, links, strong text, lists, with all different sizes and you need to resize all of them. With PX you would have to specify them all over again using the cascading, while if everything was set in EM there would be alot less trouble. With EM it would suffice to set a font-size on the containers ID in your css file and you would be done

    Accessibility Because of its inheriting behaviour the use of EM would also improve accessibility. Say someone has trouble reading small text and that person sets the standard font-size of their browser this would have no effect on PX. PX font-size would just overrule the font-size that person chose. While when working with EM sizes this would be a different story.

    Conclusion PX is ok, dont get me wrong, but EM is better.

    typography fonts Fonts & Typography UI Design

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: