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 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, I wrote a response to a request for rem values. My comments can be seen here on the Github project.

Additional Resources

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.

Feedback

Please use the contact page on my site to send your ideas and feedback.

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.