Ethan Marcotte's book, Responsive Web Design, emphasises the need for flexible designs - designs which adapt to the different media that render them. With a flexible design, your website will not only look good on desktop screens. It’ll look awesome on mobile devices like smartphones and iPads too.
So, how do you make your website #responsive
? In the next few posts, I'll be talking about techniques you can use to add more flexibility to your designs. The first of these is the technique for creating flexible type.
By making a piece of text flexible, you'll ensure that it remains the same size in relation to it's containing element, even when that element scales to different sizes when viewed on different screens. It's all about keeping things in proportion. And to do this, you need to to express font sizes using em's instead instead of pixels.
To calculate ems, you can use the following formula:
target ÷ context = result
"Context" refers to the font size set on the containing element. For example, a body element with a font-size of 100% that is equal to 16px. The "target" is the size that you want to make your font. For example, an h1 with a font-size of 24px.
To use the formula in an example, let's take the h1 and body elements above. If I needed to find out how to express the h1 font size (target) relative to its context or containing element (the body), I'd calculate 24px ÷ 16px. This would give me 1.5.
Therefore, 24px is 1.5 times larger than 16px. So I'd write my h1 font size as "font-size: 1.5em" to keep the h1 the same size in relation to the body element, even when my web page is viewed on different screen sizes.
In the next post, I'll be looking at what Ethan Marcotte's book teaches us about #responsivewebdesign
and flexible images.