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.
Now that the text and links are worked out, we will add a background color or image to the page. This will create an edge to our page, as well as add color and maybe even texture. When looking for a background color, we could use something with a little contrast to help emphasize the edges of the page. We need something that works with the black, blue, and yellow palette of the page. We might consider using another blue, but it feels too similar to the navigation links. We might try using red, because red is a popular modernist color and we're styling this page with a modernist theme, but quite frankly, bright colors tend to draw attention away from the content on the page.
The navigation links in particular get lost surrounded by the red. I tend to gravitate toward duller or more quiet colors, maybe a warm gray or a duller red. But neither of these is great with our blue and yellow palette. And I've been planning to bring in an image anyway. So let's do that instead. When preparing for this course before we established a color palette, I started by searching for a texture, but even a clean, geometric image feels too decorative when tiled across the background.
Maybe it's the repetition of form, or the loss of space. Maybe it's the decorative nature of a background texture. It just doesn't feel right to me when we're trying to create clarity. Then I started thinking, maybe we should use a single image, something that could just peek out from behind a web page. It could further emphasize the architectural space of the modernist page. Unlike a background texture image, it's much harder to find a single image online. Using a single image means you are going to need something meaningful, as well as formally aligned with your style.
I set some guidelines for myself to help me stay focused on choosing an appropriate image. The image should be meaningful. That is, it should be related to the content. The image should fit with our modernist theme and promote clarity and simplicity. If possible, it would be great if the image could emphasize the idea of architectural space. Maybe jutting out into the space. Maybe having strong horizontal and vertical lines. And of course it shouldn't end up feeling more important than the content itself. I was interested in playing off the idea of architectural space.
I tried using a picture of the building where I teach type classes. It has great architectural space. But the page starts to feel like it's about the place, the building, not the content of the page, which is typography resources. Next I tried using the letter a as a graphic to represent the variety and possibilities of working with type on the web. But it feels too generic and visually it has too much texture. Finally, I thought of using an image of books and a laptop to represent the resources listed on the page.
By stacking them I was able to get a bit of an architectural space in the image. Not as spectacular a structure as the building, but there are vertical and horizontal lines and I purposely created a jagged edge on the book pile to emphasize space. I like the meaning and the look of the image, but there is a problem. I don't like the white strip of emptiness to the right of the web page. This will look worse on large monitors. And I don't like the way the books are just floating in white space. What if we flipped the yellow into the background of the browser, this helps us in a couple of ways.
The white webpage pops out more, the books feel a little more grounded, and our blue links pop out more too. But I think the yellow is a little bright with the image, so I dull it down slightly and the books stand out more. Unfortunately, we lose the yellow of the original palette, but we can bring it back in a bit, adding it as an accent in the rule line. It's a shift from our original color palette, but I think it works better. Sometimes we need to be willing to make changes as our design becomes more complex.
So we've picked an image for the page. It's legal to use, I made it myself, and it works with the theme of our 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.