Here’s a great step-by-step interactive tutorial on how to go from a basic unstyled page to a nice content-first and typography optimized page.
Here’s a great step-by-step interactive tutorial on how to go from a basic unstyled page to a nice content-first and typography optimized page.
I recently watched Aquent’s Responsive Web Design course, and one part especially catched my attention: Web Typography. This topic has always been confusing for me, and at the end of this course I finally have some ground rules for building a responsive and scalable typography for any website, which I’m sharing with you today.
The first thing to do, and I bet you already do it on your projects, is to reset your styles so you can start building a typography that will render the same on every browser and device.
Including normalize.css stylesheet in your page will do the trick, in association with this CSS code :
html { font-size: 100%; line-height: 1; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
Font-size: 100%
All browsers agreed that 100% = 16px
More info: http://filamentgroup.com/lab/how_we_learned_to_leave_body_font_size_alone/
Line-height: 1
Unitless value. 1 = 16px
More info: http://meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal/
About Unitless: http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
Text-ajust-size: 100%
Mobile browsers attempt to adjust text size to be nice to users. This code disables that auto scale feature.
More info : https://developer.mozilla.org/en-US/docs/CSS/text-size-adjust
This part is tricky. I had to replay Aquent’s course 3 times to fully understand it. It’s actually quite trivial if you know how to tackle the issue. The important thing is to start with the paragraphs (<p>) typography, to extend it to other components like headings.
It all starts with this simple formula:
EM = Target font size in PX / Default line height (16px)
So for example, if my paragraph font-size is 17px, then I should use 17px / 16px = 1.063em. Same goes for the line-height.
font-size: 17px /* 17px / 16px = 1.063 */ font-height: 20px /* 20px / 16px = 1.25 */
Let’s now style our headings. Here are our rules:
Font Size:
H1 = 3 x Paragraph Size
H2 = 2 x Paragraph SizeLine-height:
Should stay the same as for paragraphs.
So if my paragraphs font-size is 1.063em (17px), then here goes the styles for my headings:
h1 { font-size: 3.189em; /* 1.063 x 3 */ line-height: 1.25; } h2 { font-size: 2.126em; /* 1.063 x 2 */ line-height: 1.25; }
This method will allow us to determine the font-size of any component on our page and maintain some vertical rhythm (finding the ideal combination of font-size and line-height for all the text on a page).
All of it is based on magic numbers:
Scale = Paragraph font-size x Paragraph line-height
Scale: 1.063 x 1.25 = 1.3 (rounded)
3/4 Scale = 0.975
1/2 Scale = 0.65
1/4 Scale = 0.325
We can use these to determine spacing on our page.
For example, let’s say we need to add margin around our <blockquote>
element. To determine this margin, we used to try 10px, then 20px, and chose the spacing that seemed to fit the best. Now, we can use our scale.
Always start with 1 scale (1.3em). If margin: 1.3em
doesn’t seem enough, then add 1/2 scale to it, so 1.3 + 0.65 = 1.95em. It’s still up to us to use the correct spacing, but at least we guarantee vertical rhythm on our page.
The same methodology is relevant for any CSS property, from width
and height
to box-shadow
.
Copyright © 2021 VBlog
Theme by Anders Noren — Up ↑