Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Learn how to choose fonts for a web site and create beautiful, legible type. Author Laura Franz shares how to create designs that maximize readability (and keep visitors on the page) by paying attention to details in size, line-height, line length, alignment, color, vertical space, and more. Laura also demonstrates how to incorporate web fonts, style type with CSS, and pick fonts that work well together.
When first presented with a new design problem, it's easy to fall into the trap of looking at a blank screen and saying, what am I going to do to make this look good? As a typographer, you don't have to start with a blank screen. You know how people read. You can figure out the underlying theme of the site asking, does the contents of the writings suggest a more traditional approach or more modernist approach and how can I be inspired by both historical approaches? Then keep true to how people read.
Instead of saying to yourself, what font am I dying to use, pick a font that is legible and meaningful and has all the styles and weights you need. Instead of saying to yourself, I want to fill up this amount of space here with an introduction, a caption and the text, find a good font size, line height, and line length for each and let the text decide how much space to fill. Figure out how to organize the elements on the page so they work together to create rhythm and tension.
How do you do that? Create the focal point. I used a larger font for the intro and placed the text block so it hangs out into open space, calling attention to itself. Create a strong vertical line. Here I used an almost central left edge on the block of text. Pay attention to the spaces and edges around the page. I've avoided equal margins, both top to bottom and left to right. Figure out your hierarchy.
Is your heading here or there? Do you incorporate a second font? You don't have to. Let the levels of hierarchy create counterpoints to the texture of the text. And before you know it, after a lot of hard work, a pleasing readable page develops and it doesn't start from a blank screen and it doesn't start from preconceived ideas. It starts from understanding the text itself and how people read. It also requires respect for words. Respect for all kinds of words, regardless of whether they are captions or footers or links, will help you design beautiful webpages.
Caption exists to explain an image. A lot of times people read captions first before reading the text. Yet I have seen captions get too small to read or have too long a line length or too short a line length for comfortable reading. I have even seen captions set in a fake italic, which loses the presence of a human hand, and in this case why even use an italic? Footers contain both extremely important information like a copyright date and at the same time boring information like a copyright date.
I've seen footers ignored and set in default text. On the other extreme, I've seen them spiced up a bit and set with fun text to try and make them more interesting. This usually draws the reader's eye to the footer, when really it's supposed to just sit there quietly, unless someone is looking for that kind of information. It also makes the information pretty hard to actually read, so we get two problems for the price of one. Links are supposed to help a reader see where they can click to get to other parts of the site or go to external sites.
Links are magical, especially to those of us who were born before the personal computer. But they should be treated much like any other text on the page. I've seen links made too big, perhaps because links are important? I've seen them made too small, perhaps because they're not as important as the text? And I've seen them made three-dimensional. Perhaps because we are suppose to click on them. I've seen them in hard to read fonts, hard to read colors, and hard to read long lists.
Long lists, by the way, can always benefit from chunking. These links have a sort of wonky shape,= because they're centered, but at least they're organized. I've also seen links spaced too close together to read as separate links, and set too far apart so they no longer feel like they belong together. Links by their very nature feel different than regular text, but they still need to be treated with respect. If you want to create a truly beautiful typographic page, you need to respect all the typographic elements.
You need to carefully consider font, style, weight, case, size, line height, line length, color, and readability. If all the typographic elements are not attended to, you will always have a weak spot in your page design.
Find answers to the most frequently asked questions about Typography for Web Designers.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.