Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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 we read, we use similarity and proximity to mentally organize or chunk the contents of a page. What is similarity? Similarity is a psychological principle. Basically we read things that look alike as belonging together. For example, if I were to ask you to sort these elements into two piles, you would probably put the dots together and the lines together, because even when the dots and lines were mixed in, we see the dots as belonging together and the lines as belonging together, as forming two groups.
When we read we use similarity to mentally organize the contents on a page. We also use proximity to mentally organize the contents of a page. Proximity is another psychological principle. We read things that are close to each other as belonging together. For example, if we separate the dots and lines like so, we began to see two groups of dots and two groups of lines. As typographers we can use the principles of similarity and proximity to organize or chunk text on the page.
In fact, we need similarity and proximity to create hierarchy. Notice how when we carefully merge the lines and dots, the dots which are a bit bigger and darker stand out. They have more hierarchy. In typographical terms, they almost begin to look like headings. The opposite of similarity is contrast. The trick to creating good hierarchy is to have the right balance of similarity and contrast. If the headings in a text are too similar to the text, they get lost. Everything is so similar and it just begins to read like text.
If the headings in a text are too different from each other and they lose their similarity, it's hard to tell if they're the same level of heading. Is one higher than the other? We need headings to have the right amount of contrast from the level of heading above it or below it to create good hierarchy. Headings with the right hierarchy help readers who are scanning information. They will be scanning for words or letters in the headings trying to find what they're looking for. If a higher level heading is totally off-topic for them, they will skip all the lower-level headings and go right for the next higher level heading.
Readers learn quickly how to use similarity to their advantage. Headings with the right hierarchy also help readers who are reading casually. Headings help break up the text and give the reader a sense of what parts of the text belong to larger ideas. More likely to read whole sentences and paragraphs, casual readers may still choose to skip a section if they're not interested in the topic. They will look for the start of the next section and start reading there. Finally, headings with hierarchy help engaged readers.
Even in a novel, headings are used to separate a story into chapters and chapters into scenes. Headings and other decorative breaks in the text help engaged readers know where they are in the narrative and if it's a good place to stop. So it's important to balance similarity and contrast to create hierarchy. We want to organize text into sections and subsections. If the headings are too similar to each other, it's hard to see what's a section and what's a subsection. Here I have only used two levels of hierarchy.
The main headline and the lower-level headlines and they look so much alike they are basically one level of hierarchy. If headings are too different from each other it's also hard to see what is a section and what is a subsection. Here I have used six different kinds of hierarchy, even though I don't need that many. I only needed two. The multiple sizes, styles, cases, and weights make it hard to see what is the subsection of what. The trick is to identify how many layers of hierarchy we need and use only that number of headings. No more, no less.
For instance in a bibliography, we need a main heading, a section heading, and resource titles. That's it. Three levels of hierarchy.
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.