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

Responsive Typography Techniques
Illustration by

Responsive Typography Techniques

with Val Head

Video: Welcome

Hello and welcome to Responsive Typography Techniques.
Expand all | Collapse all
  1. 2m 40s
    1. Welcome
      47s
    2. What you should know before watching this course
      43s
    3. Using the exercise files
      34s
    4. Using challenges
      36s
  2. 25m 23s
    1. Exploring the goals of typography and responsive design
      2m 28s
    2. Identifying quality web fonts
      6m 8s
    3. Matching fonts to chunks of text content
      4m 28s
    4. Deciding between self-hosted and hosted fonts
      6m 21s
    5. Understanding how web fonts affect page weight
      5m 58s
  3. 42m 26s
    1. Exploring typography scale and vertical rhythm
      4m 8s
    2. Implementing a modular scale to create typographic hierarchy
      6m 23s
    3. Vertical rhythm with a base unit
      4m 38s
    4. Sizing your type: Pixels, ems, and rems
      10m 27s
    5. Applying viewport units (vh and vw) to typography
      6m 30s
    6. Applying and choosing our typographic scale
      8m 1s
    7. Challenge: Select and apply a different scale
      46s
    8. Solution: Select and apply a different scale
      1m 33s
  4. 20m 35s
    1. Setting up and populating prototype pages
      7m 39s
    2. Testing type across browsers and devices
      3m 19s
    3. Establishing the font stack
      7m 32s
    4. Challenge: Create a font stack
      39s
    5. Solution: Create a font stack
      1m 26s
  5. 29m 52s
    1. Maintaining line lengths for comfortable reading across screen sizes
      6m 5s
    2. Using media queries to set natural typographic breakpoints
      9m 10s
    3. Controlling line breaks for headings
      5m 15s
    4. Managing flashes of unstyled text (FOUT) using web font events
      6m 25s
    5. Challenge: Handling your own web font events
      40s
    6. Solution: Handling your own web font events
      2m 17s
  6. 6m 6s
    1. Previewing web type choices with the Typecast app
      2m 40s
    2. Tools for previewing type and media queries: ish., Edge Inspect, and more
      2m 15s
    3. Tools for controlling type dynamically with JavaScript and jQuery
      1m 11s
  7. 2m 46s
    1. Next steps: The future of responsive typography
      2m 46s

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 ...
Responsive Typography Techniques
2h 9m Intermediate Jan 30, 2014

Viewers: in countries Watching now:

Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes. Designer Val Head shows you how to choose quality web fonts, develop a typographic scale and rhythm throughout your design, and build bulletproof font stacks. Plus, learn how to use media queries and CSS rules to keep your type looking great at any size. This course is a collection of best practices and techniques that will soon be an indispensible part of any web typesetter's toolbox.

Topics include:
  • 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
  • Tools for controlling type dynamically with JavaScript and jQuery
Subjects:
Web Web Design Web Fonts Web Development
Software:
CSS
Author:
Val Head

Welcome

Hello and welcome to Responsive Typography Techniques. I'm Val Head, Freelance Designer, Speaker and Author. In this course, you'll learn how to create typography, that's both beautiful functional and created with the demands of responsive behaviors in mind. We'll look at things like how to pick quality web fonts, and how your font choices effect overall site performance. Also, how to use media queries and type tweak points to keep your line lengths comfortable to read.

We'll cover building bulletproof font stacks to keep your type looking great across all devices. I'll also show you the best methods for sizing your type for maximum flexibility. And how to use modular scales for a strong foundation for your typography. So let's get started.

There are currently no FAQs about Responsive Typography Techniques.

 
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 Responsive Typography Techniques.

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

Notes cannot be added for locked videos.

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.