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

Start learning with our library of video tutorials taught by experts. Get started

Design Aesthetics for Web Design
Illustration by John Hersey

Typography: Choosing and using web fonts


From:

Design Aesthetics for Web Design

with Sue Jenkins

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.
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

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Design Aesthetics for Web Design
2h 5m Beginner Aug 29, 2013

Viewers: in countries Watching now:

A basic understanding of the principles of good design (such as contrast, unity, and balance) is the foundation for creating beautiful websites. In this course, Sue Jenkins explains design aesthetics in simple terms, and shows how to incorporate the principles of design in specific ways that improve your site. Learn how to adjust adjacent colors to add contrast, create depth with texture, incorporate movement, and use repeating shapes, patterns, and borders to unify your design. Then, in the final chapter, learn about special issues designers should address in their web layouts, such as responsive design for mobile devices, accessibility, and originality.

Topics include:
  • Understanding aesthetics
  • Picking harmonious colors
  • Structuring your layout
  • Using space to organize your design
  • Communicating with the right fonts
  • Aligning objects to achieve balance
  • Adding movement with scrolling and animation
  • Achieving proportion by scaling objects and text
  • Creating CSS for different devices
Subjects:
Design Web Design Techniques Web Design
Author:
Sue Jenkins

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.

There are currently no FAQs about Design Aesthetics for Web Design.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Design Aesthetics for Web Design.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

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.