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.
We have learned a lot about how to choose fonts, how to choose two fonts that work together, and how to work with both web fonts and web-safe fonts. We've also learned about creating meaning with fonts, either using display web fonts like a script or a crunch font, or by using more subtle approaches like working with case, style, and serif or sans serif fonts to create meaning. Now is a good time to ask, how are fonts being used on professional sites? Here Jessica Hische uses multiple fonts in her site.
She uses @font-face to access Colonna for the text, Coquette for the orange links and headings, and Neuzon for her capitalized links. She continues using the fonts throughout her site. Working with so many fonts takes a lot of practice. I wouldn't recommend this for beginners. The Colonna is very traditional and elegant, the all caps, Bold Neuzon, is very clean and geometric, and the Coquette has a lot of personality.
The Coquette's monoline strokes have some similarity to the Neuzon, which I think helps. If she'd used an elegant script, it could have still worked formally, because Colonna is so traditional, but the entire feeling of the site would change. The fonts used here are great match for her content. They feel like they reflect her creative work, as well as the personality that comes through in her writing. Jetscram Design uses Sansumi Regular for the links, headings, and small blurbs of text.
They combine it with Verdana for large amounts of text in order to retain legibility. Again links here are all caps but not bold. They feel very clean and geometric. They also feel more powerful than the lowercase, which works with the content. The headings are contrasted nicely by the funky, stylized lowercase f in the Sansumi. The type decisions are great match for the content.
Shoes that are powerful and stylish. A List Apart uses the good old web standards, Verdana and Georgia. This is a great site to see how Verdana and Georgia can be used to create a really enjoyable and readable site. They use size for headings, italics for subtle emphasis, and bold caps to emphasize the author's names. I love that the online publication for and about web design continues to use Verdana and Georgia and use them well.
The font choice is a perfect match for the content. Khoi Vinh uses Aerial and it works perfectly. The layout here is very modern. And Verdana would be to humanist for the feeling he's conveying with his type. I know I usually say Aerial is not as legible, but he's really worked with size, line height, and line length to promote readability. Aerial is a great match here.
As you can see from analyzing the professional sites, pages can look very different. Even though they're using the same typographic concepts, the rules of typography--legibility, creating meaning, choosing two or more fonts to work together--are not intended to confine us to pages that all look alike. Rather they give us focus and help us make good decisions about type. They help us create readable pages to communicate the text for our clients, to our readers. How those rules are mixed and matched allow us to create unique results.
When you see a website with good typography, feel free to analyze their design, What fonts are they using, how are they using the fonts, are they using more than one font? Don't hesitate to learn from other people's good type decisions. It will only help you make type decisions too.
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.