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.
Typographers have placed text on the page in different ways over the years. I'm going to cover two general approaches to the typographic page in this lesson. The traditional or classic approach, and the modernist approach. First, some history. The traditional page developed from the old ways of creating books. First in scriptoriums written by hand and later with the advent of the printing press and refinement in printing technology.
The modernist page grew out of a fascination with industrialization and a desire to bring order back after years of living through the chaos of World War I. The modernist page is a stark deviation from centuries of traditional typography. More importantly, the traditional and modernist typographer had different ideas about how people read. A traditional typographer might say "Books are meant to diffuse ideas. Here is an important text.
I've set it in a pleasing manner so the reader can enjoy and contemplate it." A modernist typographer might say, "People don't read in a leisurely manner anymore so I've used emphasis and space to help people skim it, then read what is important to them." The traditional typographer was interested in pleasing the eye with elegance and beauty. The modernist typographer was interested in guiding the reader's eye, setting type with clarity.
Contemporary typographers combine formal and theoretical elements as needed. It's not necessary or practical to separate traditional and modernist approaches to typography. So now that we know the ideas behind the traditional and modernist page, let's look at the pages themselves. Traditional pages tend to use a text frame. That is, text lives in a block framed by generous margins. Margins can be filled with additional text, a border image, or even links, but the main relationship of text to space is often one of text block to margin.
Modernist pages tend to use space in an architectural manner. The text frame is gone. Text blocks can live anywhere on the page and are spatially related to each other via the grid. Shapes, not just gutters and margins, are equally important architectural elements. Elements are rarely centered or symmetrical. If we look at the two bibliographies you've been making this far, you will see one is more traditional than the other. The serif version uses more of a text frame approach while the sans serif version allows space to break into the text block.
Large areas of white space are almost as visually important as the text itself. Traditional and modernist pages tend to use different fonts. Traditional pages tend to use serif fonts. This comes out of the history of handwritten lettering and the first fonts designed for the press. Modernist pages tend to use sans serif fonts. This comes from the first modernist's desire to seek clarity and order.
If we look at our two bibliographies, you'll see we're working in a more contemporary style. We're embracing both serif and sans serif fonts in both versions. We could have easily done one version all serif and one version all sans serif and it would have been great. But serif and sans serif fonts can live beautifully on the page together. Traditional and modernist pages tend to have a different approach to the overall tone of the page.
Traditional pages tend to keep an even tone. The text is meant to be read in a relaxed, contemplative manner. Let's look at our more traditional version. Hierarchy is subtle, using changes in size, case, and style. Capital letters will usually use letter spacing to keep them from feeling too dark on the page. But we've deviated from the truly traditional page in three ways. One, we're using a bold face to help improve hierarchy for scanning information.
This is necessary, because reading on the web usually is not contemplative. The bold helps break up the page and to create chunks. Two, true traditional pages tend to use justified text to emphasize the text block, and centered headings. But justified text is difficult to work with online. So we left-aligned the text and all the headings. Three, ornaments were often used in the traditional page to add emphasis or help chunk text and we're not using any ornaments here.
With the bold Verdana subheadings, ornaments aren't necessary for emphasis and chunking. There isn't any web-based reason not to use them; we just didn't. Modernist pages on the other hand tend to use contrast to create emphasis. Let's look at our modernist version. Text on the page is meant to be glanced at quickly, so hierarchy is created with placement, size, and weight. Different levels of emphasis guide readers around the page.
This is particularly true in comparison with the more traditional version. In this version, we moved our section headings into a different column. Our sans serif bibliography follows a lot of the modernist ideals of a page, but once again we have deviated from a truly modernist page, this time in two ways. A truly modernist page would have used the space more architecturally, letting the white spaces become as important as the text areas. The white space would have helped guide a reader's eye around the entire page.
I find this can be difficult to do in web typography. It takes practice. Space is limited and readers don't see the whole page at the same time if it's long and they need to scroll. Careful placing of elements to create architectural space doesn't have the impact on a long web page as it does in a contained printed page. The modernist page would have used a grid to guide placement of type on the page. But I find text is more readable on screen if we base line length on readability rather than a modular grid.
Looking at historic approaches to the typographic page can inspire our own work as typographers. It's important to remember a couple of things though. Think about why type looked the way it did, not just how it looked. It is not necessary to separate traditional and modernist ideals and web typography especially benefits from combining the two approaches to the typographic 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.