Welcome, Guest

by sweety on Tuesday, 19 April 2011
Font-size em vs px


 

Font-size em vs px

 

Most of us probably know that EM was very popular back in the days of IE6 and other browsers that didn’t 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 that’s 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 can’t think of one site I’ve ever made where the client didn’t 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 wouldn’t be that big of a deal, but imagine having a very content heavy site where there are ton’s of H1-H6′s, 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 it’s 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, don’t get me wrong, but EM is better.



Blogger Image
My Blog Title

Product Engineering, software engineering company, Product Development, Product Migration, Product Re-engineering, Product Maintenance, Product Testing Commercial Application Development, Business Software development, commercial software for startups, Application Support and Maintenance, software testing Product Maintenance, Outsource product maintenance, product support and maintenance Product Migration, Product Re-engineering, product re-engineering services Product Research, Product Engineering, UI Prototyping Services Software Testing Services, Quality Assurance services, professional software testers, Load Testing, Functional Testing, Cross Platform, Browser Testing, Test Automation, Testing Tools, software quality analysis Functional Testing Services, software quality analysis, Software Testing Services, Application Testing Services, Functional Testing Types Automated Testing, Automated Testing Services, automation testing, test script development, Automation Test Tools, outsource automation testing Load Testing, Performance Testing Services, Load Testing Tools Offshore Software Development, Outsource software services, offshore outsourcing services, offshore software development services, IT outsourcing services, software quality assurance services, Offshore IT services, Custom Application Development Services, Offshore Product Engineering Benefits of IT Outsourcing, Offshore Software Development companies, offshore software development firms Outsource planning, IT outsourcing, IT development services, offshore IT companies, offshore software development Offshore Software Development, Outsource software services, offshore outsourcing services, offshore software development services, IT outsourcing services, software quality assurance services, Offshore IT services, Custom Application Development Services, Offshore Product Engineering Offshore Software Development, Outsource software services, offshore outsourcing services, offshore software development services, IT outsourcing services, software quality assurance services, Offshore IT services, Custom Application Development Services, Offshore Product Engineering