Most design texts and designers recommend using a typographic scale to help achieve harmony. Designers use typographic scales to help them select type sizes for captions, footnotes, body text, sub titles, pull quotes, and headlines.
Type Scale: A Visual Calculator is a Type Tool by Jeremy Church:
How to use the calculator: I like to enter the base font size of my body content. Then I select from the surrounding values for headers and small copy. Try using the values for line-height, margins or whatever, and see what works.
Most people are familiar with Tim Brown’s Modular Scale calculator (see below). 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.
In Tim Brown’s 2010 Build talk he also shared his fascination with understanding the way designers achieve typographic harmony. Select typefaces make sense for the project, then a) an ideal body copy text size (and leading) b) an important number (page size, fixed width, screen size) and then c) a ratio or proportion that is ideal (classically beautiful) for the user experience.
When developing a modular scale (a range of harmonious numbers), Tim recommends beginning with body copy type size, leading (line height) and line length (optimal width) to determine the layout. Here is Tim’s modular scale calculator. Here is the Brown’s calculator set for presenting a table:
Here is the Brown’s calculator set for presenting a text:
Comments