Join Val Head for an in-depth discussion in this video Managing flashes of unstyled text (FOUT) using web font events, part of Responsive Typography Techniques.
…Like many designers, I absolutely love web fonts.…But there's one thing about web fonts that remains just a bit ugly.…And that is the flash of unstyled text, or fout,…that we often see before our web fonts have completely loaded.…In this tutorial, we'll look at what we can do to get around the…fout, and have a say on what is shown, and when, with web font events.…All browsers handle the display and loading…of web fonts just a little bit differently.…Add to that the fact that there are…so many different devices, and ranges of connection speed, it…becomes really tough to ignore the realities of web font loading.…
Our web fonts can't be used until they load,…and we can't be certain how long that will take.…So that's where Web Font Loader comes in.…Web Font Loader is an open-source effort put together…between Google and Typekit, and it's a script that gives…us some events that we can use to specify what…should happen during the various stages of web font loading.…Web Font Loader will trigger events when web fonts are…
- Deciding between self-hosted and hosted web fonts
- Sizing your type with pixels, ems, and rems
- Applying and choosing a typographic scale
- Creating a font stack
- Maintaining line lengths
- Using media queries to set natural typographic break points
Skill Level Intermediate
1. Comparing and Choosing Web Fonts
2. Establishing Rhythm in Your Typographic System
3. Creating Type Prototype Pages
Establishing the font stack7m 32s
4. Setting Type for Readability Across Screen Sizes
5. Helpful Online Tools and Scripts
- Mark as unwatched
- Mark all as unwatched
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.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.