How to convert Pixel to Em - Why use ems for font size?


Following on from the last post about calculating beautifully proportioned text sizes, I thought it would be good to cover the "correct" unit of text measurement rather than just sticking with pixels.

The W3C recommends that you use ems for font sizes - why?
The "em" unit is the most scalable when it comes to on-screen display (read more from W3C here)

Basically it gives users the ability to scale up all the font in a web page using their browser settings and see them "grow" proportionally. This is for accessibility reasons.
Generally when you are in the design phase using pixels sizes is easier - so in the end you'll need to convert from pixels to ems.


So how to convert pixels to ems?

Most browsers have a default font size for "medium" text of 16px.
In this case 1em = 16px.
So if you want a font size of 20px you need to divide 20 by 16 which equals 1.25em - easy.

You can use the following widget to calculate em sizes.


Another trick that many web developers use is to scale the overall font size of the body to 62.5%.
CSS: body {font-size: 62.5%}
Why? This converts the overall default font size from 16px down to 10px (16 / 100 x 62.5 = 10). Therefore 1em = 10px and all other em calculations are easy to do in your head (20px = 2em, 12px = 1.2em, OMG so easy!)

WARNING! The only thing to look out for when using ems is nested elements. Using relative sizes (ems) rather than pixels means that the relative size will not override the parent element. It will inherit it from its parent.
For example, imagine a Div (font-size:2em;) with a P (font-size:0.8em;) inside.
The font size of the P inside will actually be 1.6em (2 x 0.8) so when using ems be aware of inheritance from parent elements.

Comments

Post a Comment

Popular posts from this blog

PHP, MySQL, JavaScript & HTML5 All-in-One For Dummies

Image
PHP, javascript, and HTML5 are essential programming languages for creating dynamic websites that work with the MySQL database. PHP and MySQL provide a robust, easy-to-learn, open-source solution for creating superb e-commerce sites and content management. javascript and HTML5 add support for the most current multimedia effects. This one-stop guide gives you what you need to know about all four! Seven self-contained mini books cover web technologies, HTML5 and CSS3, PHP programming, MySQL databases, javascript, PHP with templates, and web applications.
Read more

3 Best Applications that Organize your Chat and Messaging Accounts

Image
Vast of Instant Messaging (IM) platforms are made available in the internet nowadays. It helps every users to easily exchange messages, multimedia or even real-time virtual interaction with each other through computers and other portable devices. These mode of communication are somewhat important for everyone in this modern society and this applications plays a very essential and effective role in our daily living. Some of us are just busy interacting with people in such a way of bringing everyone closer, business matters, family, friends and others. Facebook Messenger, WeChat, Skype, Google Hangouts and Slack are just a few to mention of this platforms, it offers similar services but with quite different features. One has to sign up with these IM applications to start communicating and most of this services are being offered free. As of these days, people do have multiple accounts in different platforms, interacting people from different sides for different matters. As for me, I ...
Read more

Japan Style: Architecture Interiors Design

Image
Enter the world of the stylish Japanese house, where every object in sight is a work of art. Japan Style introduces 20 special residences. With more than 200 color photographs, this book showcases the stunning beauty of old homes, and reveals how they are cared for by their owners. Traditional Japanese homes, with superbly crafted fine wood, great workmanship and seasonal interior arrangements, have an aesthetic of infinite simplicity. Unlike Japanese inns and historical buildings, the houses featured in this book are private property and are not open to public viewing. Japan Style offers a rare glimpse into the intimate world of the everyday Japanese and fascinating insight into the traditional architecture of Japan download link http://libgen.io/_ads/E7F3D5D3E376CB1E116D00AFC8E89AC4 .
Read more