New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Typography: Choosing and using web fonts

From: Design Aesthetics for Web Design

Video: Typography: Choosing and using web fonts

The third concept on foundational topics in web design is typography and choosing the right web fonts. Typography for the web was very limited up until recently with the introduction of free web fonts. In this lesson, we will examine the differences between web-safe fonts and web fonts as well as explore web fonts online. And discuss strategies for successful font pairings. Let's start with going over the differences between web-safe fonts and web fonts. Web-safe fonts must be cross-platform, which means that they need to be already installed on a visitors device, such as a computer or a tablet or a smart phone.

Typography: Choosing and using web fonts

The third concept on foundational topics in web design is typography and choosing the right web fonts. Typography for the web was very limited up until recently with the introduction of free web fonts. In this lesson, we will examine the differences between web-safe fonts and web fonts as well as explore web fonts online. And discuss strategies for successful font pairings. Let's start with going over the differences between web-safe fonts and web fonts. Web-safe fonts must be cross-platform, which means that they need to be already installed on a visitors device, such as a computer or a tablet or a smart phone.

And since there are different fonts installed on Macs and PC's, the list of web-safe fonts is actually really small. And since there's no guarantee if a visitor will have a particular web-safe font already installed on their device, most web-safe fonts are specified in CSS as part of a font set. Font sets ensure that unavailable fonts have a specified fallback. So, for instance, you could specify that Verdana is your main web-safe font, and then have Arial, Helvetica, and Sans Serif as fallbacks.

To see what I mean about limited options here is a list of 24 commonly used Web-Safe Fonts. 24 might seem like a lot, but if you use them over and over and over again year after year, they start to feel stifling. Web fonts are quite a bit different from web-safe fonts. For starters, they're platform independent, which means that they do not need to be installed on a visitor's device. What's more, there are hundreds of options for you to choose from, so you can more easily express yourself with a particular font.

Web fonts use the @font-face selector in CSS along with a link in the head area of your web font source or a jQuery library. And you may create font sets with up to four fonts as fallback just as you could with web-safe fonts. Lastly, web fonts are hosted fonts so that you do not need to install any software or host any fonts yourself though you could if you wanted to. Typically, you get your web fonts from a subscription-based or free library of hosted fonts.

Here's a list of a few popular web font resources online. Including the popular Google Fonts, Typekit, AdobeEdge fonts, and Font Squirrel. As you learn while exploring fonts in the elements of design, there are a few general categories for font types. There's serif and sans-serif. As well as display fonts like slab serif, cursive, handwriting or script, decorative, and typewriter. When selecting fonts for a website, it's often useful to choose fonts that are complimentary rather than being too similar.

Here are five pro font pairing tips. The first is contrast. Think in contrasts such as heavy and light. Curvy and straight. What definitely doesn't work, are when two fonts look too similar like this. Definitely too similar. Second, play with scale. Large with large. Large with Small. Or small with medium. Next is tone. Try to match your text and tone.

Make sure you choose fonts that fit the tone of your copy. For instance, the word summer should have a summery feel. Just as the words prickly pear should feel prickly. The word hotdog should invoke a hotdog. And the word sunshine should make you think of sunshine. Next, go big with scripts and slabs. For some reason, these two look really great together. Use script for the most important word. And a slab or sans serif for the rest of your copy. Last, be courageous. Try pairing fonts with a lot of contrast, like a curvaceous font with lots of fills and a modern font with clean lines.

You can also try pairing a bold slab serif with a whimsical serif italic. Alternatively, you can pair fonts that have a similar vibe to convey a stronger message, such as pairing a wide rounded sans serif with a tall angular sans serif. You can also find some font pairing suggestions on Google's web font directory. When you see a font you like, click the little popup icon next to the add to collection button. Then click the pairings tab and you can see how your selected font pairs with other fonts.

In addition to playing with the weight, size, form, style, leading, and color of your fonts, try exploring other techniques like overlapping texts, adding flat shadows, using inline fonts, letting your text touch, and playing with letter case. Use your best judgement to choose the right fonts for the job. And above all, remember that in addition to readability, your fonts are there to help convey meaning in a harmonious way.

Show transcript

This video is part of

Image for Design Aesthetics for Web Design
Design Aesthetics for Web Design

32 video lessons · 13968 viewers

Sue Jenkins
Author

 
Expand all | Collapse all
  1. 2m 8s
    1. Welcome
      38s
    2. Using the exercise files
      1m 30s
  2. 9m 10s
    1. Understanding aesthetics
      4m 41s
    2. Examples from art and design
      4m 29s
  3. 35m 44s
    1. Understanding the elements of design
      1m 47s
    2. Using color to set the site's mood
      5m 50s
    3. Tweaking color values to add contrast
      3m 30s
    4. Using texture to add depth
      4m 53s
    5. Repeating shapes to unify your design
      2m 43s
    6. Structuring your layout with form
      3m 50s
    7. Using space to organize your design
      4m 38s
    8. Setting boundaries with line
      4m 36s
    9. Communicating with the right fonts
      3m 57s
  4. 38m 26s
    1. Understanding the principles of design
      1m 45s
    2. Using contrast to set areas of interest
      3m 8s
    3. Applying font styles to show emphasis
      5m 23s
    4. Aligning objects to achieve balance
      4m 40s
    5. Using hyperlink styles to create a sense of unity
      4m 10s
    6. Applying background patterns to create harmony
      3m 14s
    7. Adding movement with scrolling and animation
      3m 31s
    8. Using border styles to add rhythm and repetition
      2m 57s
    9. Achieving proportion by scaling objects and text
      2m 43s
    10. Simplifying by removing the unnecessary
      3m 21s
    11. Using gradation to create perspective
      3m 34s
  5. 37m 45s
    1. Responsive web: Creating CSS for different devices
      3m 2s
    2. Composition: Using the grid to organize space
      4m 45s
    3. Typography: Choosing and using web fonts
      5m 15s
    4. Color theory: Picking harmonious colors
      4m 16s
    5. Communication: Leading viewers through a design
      6m 30s
    6. Accessibility: Using size and color effectively
      6m 10s
    7. Originality: Stepping out of the box
      7m 47s
  6. 1m 57s
    1. Next steps
      1m 57s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.