Join Val Head for an in-depth discussion in this video Applying and choosing our typographic scale, part of Responsive Typography Techniques.
- View Offline
- Exercise Files
- Code Practice
…In this tutorial we'll put together all the things been talking about in this…chapter so far to choose and implement a typographic scale for our sample project.…Our sample project is a short one.…The story of a dramatic breakfast event shared between Goldilocks and three bears.…You've probably heard of it.…As a first step, let's pick a scale for this project.…The best place to start is, of course, always the content.…The main content of this page is the story of Goldilocks and…the three bears.…To be a bit clever, I think I'm going to look for…a scale option that has a prominent multiple of three, or thirds.…
I think that would make a nice connection to our content that has three bears in it.…From some of my initial type explorations, I think…that my body text will look best around 16…pixels in size, and I would like my main…title to be set much large than my body text.…Doing a little bit of designing in the browser…and adjusting my CSS, I'm thinking that a size…of approximately 66 pixels will make for a good standout headline.…
- 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.