Wanting to learn more about web typography I picked up this book and learned quite a few tricks, I recommend that anyone interested in web typography pick up this book. But here’s a summary of what I learned with some simple CSS.
Pick a Font that Matches What the Text Conveys
People hate Comic Sans, it’s childish and hard to read but using it in context with a children’s nursery (for example) the childish aspect matches what the text is conveying. While doing a children’s nursery logo in Impact font might not make as much sense. There is not one “ultimate” font to match all of your needs, try to figure out what the text in your web project is going to say and align the font accordingly.
Contrast between Fonts
When picking fonts you probably just pick a great looking heading font and body font which is what I used to do. The two fonts need to work together by being different and similar to each other at the same time. If they are too similar why even use a 2nd font, but if they are too different you’ll confuse the reader.
Using a fancy calligraphy font for headings and a san-serif font for the body probably won’t mash up well. If you use google fonts check out the pairings section on each font where they’ve paired the font with headings and body fonts.
Picking Text Color
Color contrast ratios can also play a large part in typography. You can use a color contrast checker to ensure your text is accessible to all users. Typically you’ll want your headings to be darker than your body text.
Perfect Amount of Characters Per Line
Having around 75 to 85 characters on a line (including spaces) instantly improves readability. You know you’ve read articles where the character count is over 100 per line and your brain can’t remember where the line started, causing you to reread lines and general confusion. You can do this by limiting the width of your content area, I usually do a character count on one line after designing something.
Let your text breath with Line Height
Your line height should be at least 150% of your text size if not more. For example if you’re using a 18px text your line height should be 18px + 9px = 27px. This gives the reader enough space to distinguish between lines but at the same time keeping them close enough for reading quickly.
Picking Paragraph Margins
Paragraphs should have a bottom margin that’s about 66% to 75% of your line-height size. Margins between paragraphs let the reader scan through paragraphs quickly. A lot of readers will just look at your text as a whole and find key words they are looking for, if you don’t provide clear separation between paragraphs this gets the reader lost.
Here’s a sample heading and paragraph text code for some of the lesson’s learned
p{
font-size: 16px;
line-height: 24px;
margin-bottom: 18px;
}
p:last-child {
margin-bottom: 0;
}
All of these tips should give you a grasp on your typography but remember these are not rules, play around with the text and figure out what will work best for your content.
Looks like a worthwhile book, I think I’ll pick up a copy. Thanks for the recommendation!