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.
Imagine hearing a speaker talk in a monotone voice. All the words sound the same. The person's inflection doesn't change. The rhythm and volume stay constant. Now, imagine a voice with rhythm, a voice that pauses for emphasis, creating tension, a voice that is sometime soft and sometimes loud. A voice with contrast. Successful typographic pages need rhythm and tension.
Successful typographic pages need contrast. Text has a built-in monotone rhythm created by the repetition of horizontal lines. We as typographers can break that monotone. One way is to create a focal point. Often, the focal point of a typographic page is the headline but that doesn't have to be the case. It can be a picture, a quote, a word.
Contrast can be created with size, color, weight, shape, and space. These can be carefully mixed and matched. Size and shape of font; slight size change and color; slight size change and bold; size, shape of font, and shape of text block; slight size change, shape of font, and space. The trick is to only have one main focal point on the page. If multiple focal points compete, you'll lose tension on the page.
Having only one focal point even with a clearly secondary focal point draws the reader's eye and thoughtfully guides them around the page. In addition to the focal point, we can create counterpoints to the rhythm. Subheadings, our H2s and H3s, often provide counterpoints. We can create little breaks in the monotony of the text, little explosions of contrast, sometimes using size, case, or weight, style or color, which we'll add when we add our links.
Another way to break the monotony of the text is to create a strong vertical line in the composition. This is a direct contrast to the horizontal lines in the text. On web pages, we have an automatic vertical line created by the edge of the text. We can emphasize this line. When blocks of text are close to the edge of the page, they lose the crispness of the left edge. It competes with the edge of the page. Blocks of text away from the edge of the page have a stronger vertical line.
We can also use continuation. Continuation is a theory of visual perception. The theory says our eyes will follow a line or curve and continue to the next object. Thus, aligned objects have a stronger vertical line than when the objects aren't aligned. This composition isn't bad, but just doesn't have the same tension. We can also use gutters to emphasize the vertical line. Gutters are the vertical bands of space between elements.
Here I've emphasized the gutter by moving the main heading. I try to keep a more subtle use of continuation between the Y and the text below and closing up the space a bit makes the gutter pop more. This is really subtle and it's fine this way too. I am just showing you different things to look for. Whenever you have the opportunity to work with multiple elements on the page, try to arrange them to create a gutter. The only thing I changed on this page was placement.
This may not be your final solution, but it immediately makes the page feel organized. It slices through the horizontal motion of the text and improves hierarchy. Gutters are an obvious way to use space to break the monotony of a text page. But space can be used in other ways to give a page tension. Avoiding the center will help increase tension. Although using the center can be beautiful and peaceful if done well. Using unequal margins helps increase tension.
The only change I made here was I took three very similar spaces and made them truly unequal to each other. Placing an element near the edge of the page helps create a sense of direction and movement. Though a break from the text frame may be more appropriate here. Contrasting size of white spaces, so you're using really big and really small white spaces instead of equal white spaces, helps increase tension. Here, the spaces are equal. Good vertical spacing doesn't just help us chunking text.
Always pay attention to the edge of the page. It helps increase tension. Without the edge of the page, compositions can feel as if they're floating, especially on big monitors where pages feel small compared to the browser. The page edge becomes even more important. Finally, consider the Z axis, which is whether elements feel closer or further away. The Z axis can give a page depth which in turn can increase tension. Here, a gray background makes the white page pop out.
Images in the background further emphasize the Z axis. As you can see, elements can be arranged in many ways. If you strive to create a strong focal point, use your H2s and H3s to create counterpoints, create a strong vertical line, and pay attention to how you use the space on the page and the edge of the page. You have an excellent chance of creating a visually pleasing layout. A page with more rhythm and tension, rather than a monotone page.
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.