Join Val Head for an in-depth discussion in this video Exploring typography scale and vertical rhythm, part of Responsive Typography Techniques.
- View Offline
- Exercise Files
- Code Practice
…Typographic scales come up often when discussing typogaphy in…this tutorial we going to define what a typograpic scale…is and show you why and when you might want…to use them to establish vertcal rythym on your page.…You may have heard from Robert Branghurst never compose…with out a scale this quote comes from the…book Element of Typographic Style Which is a book…that gets quoted quite a bit in typography talks.…In Bringhurst's view, a designer should never set type…on a page without first having some plan as to how to handle the vertical rhythm.…
I think this also holds very true when it comes to responsive design.…Typographic scales are usually expressed as a list of numbers or as a ratio.…If it's listed as a ratio, the ratio is…used to calculate the next number in the series.…For example, one to 1.618 means that we will…multiply our first ratio value, by 1.618 in order…to get the second value. So if our first value happens to be 16…pixels, then the second value will be 16 times 1.618 or 28.55 pixels.…
- 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.