From the course: Responsive Typography Techniques
Unlock the full course today
Join today to access over 22,700 courses taught by industry experts or purchase this course individually.
Applying and choosing our typographic scale - CSS Tutorial
From the course: Responsive Typography Techniques
Applying and choosing our typographic scale
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
(Locked)
Exploring typography scale and vertical rhythm4m 8s
-
(Locked)
Implementing a modular scale to create typographic hierarchy6m 23s
-
(Locked)
Vertical rhythm with a base unit4m 38s
-
Sizing your type: Pixels, ems, and rems10m 27s
-
(Locked)
Applying viewport units (vh and vw) to typography6m 30s
-
(Locked)
Applying and choosing our typographic scale8m 1s
-
(Locked)
Challenge: Select and apply a different scale46s
-
(Locked)
Solution: Select and apply a different scale1m 33s
-
(Locked)
-
-
-
-