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

Applying and choosing our typographic scale - CSS Tutorial

From the course: Responsive Typography Techniques

Start my 1-month free trial

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…

Contents