Setting Type for the Web

So you know your serifs from your sans serifs? Sane enough to not use more than three fonts on a single website? Cool. Once you have your heading and body font in place invest some time setting your type to make it reader friendly. Here are 7 tips to make it awesome –

1. Typographic Scale

Rarely discussed in type guides `typographic scale` refers to the size relationship between the basic type elements (Headings, Paragraph Text, Blockquotes). Setting your typography to a good scale helps establish a strong visual hierarchy to your web design.

I use this simple scale from — H1(48px), H2(24px), H3(21px), H4 H5 H6 (18px), p (base: 16–18px) and blockquote (21). H4, H5 and H6 will differ in terms of case, color and sometimes, font-family or font-style (bold, thin, italic). This might not work in all situations. So keep tweaking till you get a desired result.

Resource: Here is another type scale guide from typecast

2. Content Width and Characters Per Line (CPL)

No matter how beautiful your font choices are, if you have a content area that spans from one end of your site to the other on desktop/laptop screens, your reader is going to have a sucky time consuming your content. The maximum width recommended for a content block is around 670–680px (this is excluding the margin). This width usually accommodates 85–100 characters at 16–18px font-size. It makes for a very relaxed reading experience.

3. Line Height

This is perhaps one of the most overlooked CSS properties. I have come across countless sites whose text looks cluttered because of bad `line-height` values. I usually set this between 1.5 to 1.7 (without a unity). Sometimes I open up Dev tools and set it to these values if a site I am reading from hasn’t bothered to do so! Note that this also depends on the width of the textarea or number of characters per line.

Resource: You can use the Golden Ratio Typography Calculator to set your line-height.

4. Letter Case

When you have many elements to display in a single content block (say an article in a blog page) you might want to show a lot of meta data (date, post author, category) around the heading and might run out of ways to be able to differentiate your elements. This is where you can experiment with case to make it more distinct. For e.g the article author credit can be styled as ‘written by RAY CHARLES’ for the name to be more noticeable. However not all fonts look good in all caps and you might want to tweak the `letter-spacing` property to make this more readable. (all caps tends to look very blocky and takes longer to read).

5. Color

Color can also be used creatively to assign importance to or take away importance from your text elements. You can make some text (like blockquotes and links) stand out by using brighter hues while you can mute secondary information (category of post, date) by using colors which are lower in contrast compared to the background color. Avoid using black for body text. #444 or #333 are shades of grey that seems to work best with white or off-white backgrounds.

6. Background Color

Avoid using bright colors for backgrounds of large content areas (article body). I never experiment beyond white (#fff) or offwhite (#f8f8f8) for the same. You can use brand colors more prominently in assets like buttons, loaders, navigation menus, links etc. The background color plays a big role in making your content readable. Choose wisely.

7. Font Weights and Font Styles

Sometimes you really don’t need more than one font on a site. A lot of designers have successfully implemented awesome interfaces using just one font. Their secret? Proper use of weights and styles. Headings are usually bold but there’s nothing stopping you from using thin weights for headings. Their size already gives them importance. Blockquotes need not be an entirely new webfont altogether. Have you tried out the `italic` style of your body font?

Resource: Browse Typ.io for examples of well designed typography.


Originally published at thedigitalmonk.in on March 24, 2015.