If you enjoyed this article, get email updates (it's free).
Join over 77,235 Subscribers Today.
With the advent of much improved browsers, text rendering and high-resolution screens, technology is no longer an excuse for poor typography. In many ways typography can be elegant and an expression of the designer’s ideas when chosen wisely.
Today I will not only present you with guidelines to consider in mastering typography for the web, but give you the useful tools, techniques and resources to help you achieve effective designs.
Feel free to suggest any other tools or resources in the comments section.
To set the tone of the message you wish to communicate, you must first choose your typefaces wisely.
This article explains choosing type wisely very well.
Every site needs a well-developed hierarchy: indicators of where to start reading and how to proceed.
Sans-serif is almost always the best option to use on-screen, whereas serif fonts may become blurry or pixelated. Although it’s common to use serif’s in web typography, by using sans-serif’s for longer bodies of text you put a lot less strain on your readers eyes. Verdana is a great option for a web font as it was designed to be displayed on the computer.
As you know, leading is the amount of space between two lines. Every web page differs, but here are some general rules to keep in mind:
line-heightvalue of less than 1, can be used on short pieces of text provided care is taken to ensure ascenders and descenders do not collide. For example:
It should be noted that some browsers add a little leading by default: Safari and Internet Explorer for example; whereas others, such as Camino and Firefox, do not.
By default, browsers will render the
<h1> text to view on your page as bold. The text will also be formatted in a large font size. And the text will reside on its own line with automatic line breaks above and below it (similar to a double-spaced heading, typed in your word processor.)
Check out this article for 20 fonts designed for big, powerful headings.
The following are resources I’ve found to help you choose your fonts wisely.
Type Tester is an online application that allows you to test different typefaces. You have three columns of text and can modify the typography any way you please. You then get the CSS that accompanies your selections.
CSS Type Set is a handy tool that lets you preview your CSS text as you modify it, and it generates the code for you immediately.
This tools enables you to preview fonts installed on your system online.
This is a nice way to explore the popular typefaces you have on your computer and see which one fits the project you are working on. This is done by creating text that is displayed using various typefaces from your computer.
The following are resources I’ve found to help you develop efficient typographic techniques.
A lot of great websites out there have beautiful typography using only CSS. But simply looking at them gives you only half the picture. This post showcases examples of good clean typography using nothing but CSS, and it explains what the designers did to achieve this beautiful type.
This post is a great example of what you can do by combining and tweaking type using CSS. Different techniques are introduced: reflections, drop characters, handwriting, newspaper headlines and more.
Typography is an art form that has been around from early on. In choosing your typefaces, carefully study and test your fonts under different scenarios. One of the most important factors in web design is readability and legibility, so be creative but also make smart decisions in regards to those two factors. The best web typography lends a meaningful purpose behind the content it illustrates while triggering emotions in your readers in the process. Feel free to leave a comment if you found other resources for improving your web typography.
Join over 77,235 Subscribers Today.