Font-size: Ems and Percentages for bulletproof CSS

font size image

Creating scalable font size on your site can make the overall task of sizing font to fit your website’s needs, much more manageable and easier to handle. I’ll be showing you how to keep a clean and scalable way of changing font size for your entire site by letting you to change just one property.The reason for this is that instead of using pixels, which are static and may not be scaled up on older browsers when the user zooms in and out of your page, we will use relative units that can be changed proportionately by allowing you to change a single property in order to adjust the rest of the font sizes within your page.

Here’s a CSS example of using Ems for bulletproof web design. Being able to use Ems for flexible text allows a more precise way of displaying text, similar to using pixels, except that with Ems, they are relative units. Below, it shows how we use the value of 62.5% (a magical percentage that gives us a font size equal to 10px) as our base value. We do this so that when we use ems, it’s easier to set them because you are setting the font as a multiplicative of 10. For instance, 1.8em will equal 18px, 1.3em will equal 13px, 2.3em will equal 23px, etc.

body {
font-size:62.5%; /* gives us a base of 10px */
}

h1 {
font-size:2em; /* 20px */
}

h2 {
font-size:1.8em; /* 18px */
}

p {
font-size:1.2em; /* 12px */
}

p abbr {       /* abbr sets a 1.4 times the actual value of p  */
font-size:2em; /* 24px since abbr is a child of p */
}

#sidebar {
font-size:1em; /* 10px */
}

——————————————————————————

In a similar manner you could also do percentages to make your site flexible.

body {
font-size: small; /*changing this keyword will affect all the other elements */
}

h1 {
font-size: 150%;
}

h2 {
font-size: 130%;
}

h3 {

font-size: 120%;
}

ul li {
font-size: 90%;
}

.note {
font-size:85%;
}

——————————————————————————

As for the actual stylesheets, Ive provided a link for the Em stylesheet which can be viewed here. You can also view the percentages stylesheet here.

Leave a Reply

Your email address will not be published. Required fields are marked *