A Visual Type Scale

A Visual Type Scale
A Visual Type Scale
A Visual Type Scale
A Visual Type Scale
A Visual Type Scale
A Visual Type Scale
A Visual Type Scale
A Visual Type Scale

Grab the CSS
@import url('https://fonts.googleapis.com/css?family=Poppins:400');

html {font-size: px;}

body {
  background-color: white;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  line-height: 1.45;
  color: #333;
}

p {margin-bottom: 1.25em;}

h1, h2, h3, h4, h5 {
  margin: 2.75rem 0 1rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  line-height: 1.15;
}

h1 {
  margin-top: 0;
  font-size: em;
}

h2 {font-size: em;}

h3 {font-size: em;}

h4 {font-size: em;}

h5 {font-size: em;}

small, .text_small {font-size: em;}

How to Use

I like to enter the base font-size for paragraph text. Then I select from the surrounding values for headers and small text.

There are no rules. Just experiment and have fun. Try using the values for line-height, margins or whatever, and see what works.

EM vs. REM Values

The rem value is the same as the em value displayed above. Both units are scalable; the only difference between the two is that em is proportionate to its nearest parent that has a font-size, whereas rem is always relative to the <html> font-size. You can read more about these units from an article I wrote on the subject, Confused About REM and EM?

Also, here’s a response I wrote to a GitHub request. There are a few examples there as well.

Additional Resources

Background

Tim Brown’s Modular Scale site raised awareness about type scales, helped to improve typography on the web, and it was the inspiration for this project.

Created by Jeremy Church
Project available on GitHub. Code licensed under MIT License.

A Crash Course in Web Design

What looked like a small patch of purple grass, above five feet square, was moving across the sand in their direction. When it came near enough he perceived that it was not grass; there were no blades, but only purple roots. The roots were revolving, for each small plant in the whole patch, like the spokes of a rimless wheel.

A Crash Course in Web Design

What looked like a small patch of purple grass, above five feet square, was moving across the sand in their direction. When it came near enough he perceived that it was not grass; there were no blades, but only purple roots. The roots were revolving, for each small plant in the whole patch, like the spokes of a rimless wheel.

A Crash Course in Web Design

What looked like a small patch of purple grass, above five feet square, was moving across the sand in their direction. When it came near enough he perceived that it was not grass; there were no blades, but only purple roots. The roots were revolving, for each small plant in the whole patch, like the spokes of a rimless wheel.

A Crash Course in Web Design

What looked like a small patch of purple grass, above five feet square, was moving across the sand in their direction. When it came near enough he perceived that it was not grass; there were no blades, but only purple roots. The roots were revolving, for each small plant in the whole patch, like the spokes of a rimless wheel.

A Crash Course in Web Design

What looked like a small patch of purple grass, above five feet square, was moving across the sand in their direction. When it came near enough he perceived that it was not grass; there were no blades, but only purple roots. The roots were revolving, for each small plant in the whole patch, like the spokes of a rimless wheel.

— Excerpt from A Voyage to Arcturus, by David Lindsay.