px = em

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  
html {font-size: em;}

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

p {margin-bottom: 1.3em;}

h1, h2, h3, h4 {
  margin: 1.414em 0 0.5em;
  font-weight: inherit;
  line-height: 1.2;
}

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

h2 {font-size: em;}

h3 {font-size: em;}

h4 {font-size: em;}

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

How to Use

I like to enter the base font size of my body content. Then I select from the surrounding values for headers and small copy.

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

Background

Most people are familiar with Tim Brown’s Modular Scale calculator. The site has raised awareness about scale and helped to improve typography on the web. It’s also the inspiration for this project.

The Modular Scale site has been a great reference over the years, but sometimes it’s difficult to choose the proper scale without a visual reference. I hope to bridge that gap with Type Scale.

Updates

I’d like to keep this project current and useful to the community. Please direct ideas and feedback to me on Twitter or the contact page on my site.

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

More Options

One Morning, When Gregor Samsa Woke

From troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.

His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. “What’s happened to me?” he thought. It wasn’t a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls.

One Morning, When Gregor Samsa Woke

From troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.

His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. “What’s happened to me?” he thought. It wasn’t a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls.

One Morning, When Gregor Samsa Woke

From troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.

His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. “What’s happened to me?” he thought. It wasn’t a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls.

One Morning, When Gregor Samsa Woke

From troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.

His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. “What’s happened to me?” he thought. It wasn’t a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls.

— Excerpt from The Metamorphosis, by Franz Kafka.