{"id":58510,"date":"2021-11-17T09:05:31","date_gmt":"2021-11-17T17:05:31","guid":{"rendered":"https:\/\/creativemarket.com\/blog\/?p=58510"},"modified":"2024-04-22T04:35:02","modified_gmt":"2024-04-22T11:35:02","slug":"typographic-scale","status":"publish","type":"post","link":"https:\/\/creativemarket.com\/blog\/typographic-scale","title":{"rendered":"What is a Typographic Scale?"},"content":{"rendered":"

A Typographic Scale<\/strong> exists to bring order and harmony to multiple different text sizes across a project. When working with typographic elements in your project, you inevitably have to choose different font sizes for various elements of text, such as your main body text, header text, sub-header text, and so on. These different size values are often just decided by eye, and there is nothing wrong with that, but there is actually some simple math that you can apply which will quickly bring balance and hierarchy to your type system.<\/p>

\"\"<\/figure>

<\/span>What is a Typographic Scale?<\/span><\/h2>

A Typographic Scale is essentially a range of type sizes defined with a ratio. The ratio can vary from project to project, but the point is to choose one scale and keep it consistent throughout your project so that it can bring balance and contrast to your type. You can think of this in the same way that people use grids or columns to bring structure and order to their graphic design \/ UI design work; a typographic scale is a similar guide for choosing different font sizes in your work.

A typographic scale starts off with a base size, then uses a set ratio to define the larger sizes (often skipping out any messy values and opting only for the whole numbers that fit within the formula, or simply just rounding numbers up.) The scale ratio can also be applied to the line height of the text blocks as a whole, so as the text grows larger so should the vertical spacing between the baselines.<\/p>

<\/span>What Ratios Are Used?<\/span><\/h2>

Different ratios are available to use, which have been tried and tested over the years, or you can even create your own ratios if you feel a little braver. Many of the most common scale ratios are based on musical scales, and this can help explain why we talk about flow, rhythm, and harmony when we talk about the relationship between text sizes. The ever-popular golden ratio is also a popular choice when it comes to type scales too. 

Common Typographic Scale Ratios:<\/strong>
1.200 — Minor Third
1.067 — Minor Second
1.125 — Major Second
1.200 — Minor Third
1.250 — Major Third
1.333 — Perfect Fourth
1.414 — Augmented Fourth
1.500 — Perfect Fifth
1.618 — The Golden Ratio<\/p>

\"\"
https:\/\/baseline.is\/tools\/type-scale-generator\/<\/a><\/figcaption><\/figure>

Why are these ratios in particular used? Simply because they work. The scales are taken from musical scales, and while there is some math behind musical scales (which is far too complicated for me to understand) when all is said and done, these values produce good-looking, harmonious text size variations. This is why they are used so widely.<\/p>

<\/span>Why Use a Typographic Scale?<\/span><\/h2>

A typographic scale gives you a solid platform for which you can make better choices about text size. By all means, you do not need to use a typographic scale; it is simply a reference that you can use to help keep your text elements under control and harmonious across your project.

You have certainly already seen and used typographic scales without even realizing it, most likely within some of your favorite design tools. Sketch, Figma, or Photoshop, for example, will offer you a number of font sizes by default. These size choices are not simple +1 increments such as “1, 2, 3, 4, 5, 6 and so on…†the most common options you will see are likely “6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72.†instead of single increments we see that the larger the numbers get, the bigger the gap between them — this is because these numbers are following a ratio. <\/p>

\"\"
Typographic Scales are visible in Sketch.<\/figcaption><\/figure>

This commonly used ratio is based on the classic typographic scale, which has been used since the early days of typography. According to Jean-Lou Désiré the equation for this would be as follows: “aâ‚=round (a×r), where a=12 (fundamental size) and r=âµâˆš2 (incrementing ratio)¹†— In the early days of typesetting and printing it wasn’t efficient to just cast every font in every possible size, so a standardized set of sizes was created in order to allow for size variety without having to store excessive amounts of metal casts, and using a mathematical ratio was deemed to be the best way to define the scale of these sizes.

If this is all getting a bit too mathematical, don’t worry; there are several fantastic free tools and resources that can help you define your own typography scale without really having to understand the math behind it (if you don’t want to).<\/p>

<\/span>How to Use A Type Scale<\/span><\/h2>

Ultimately the scale you use and the sizes you pick will come down to what font you are using and how readable that is. The best advice is to settle upon your base font and set your body text to a good size so that readability isn’t an issue. Then, you can use this as your base and calculate your other headings and variations from there.
Let’s say we start with a base font set at 16px for our body text. We can simply input this into a type scale calculator, choose a ratio and keep these values as a reference for use in our project. So, for example, a 16px base font size using the 1.250 (Major Third) scale taken from the Type Scale Generator<\/a> will give us the following values: 

h1 — 48.828px 
h2 — 39.063px
h3 — 31.25px
h4 — 25px
h5 — 20px
Body Text — 16px
Caption Text — 12.8px
Small Print — 10.24px <\/p>

\"\"<\/figure>

You can use choose to use those values as they are, or round them off just for ease of use. Rounding the numbers would give us the following values: 

h1 — 48px 
h2 — 39px
h3 — 31px
h4 — 25px
h5 — 20px
Body Text — 16px
Caption Text — 12px
Small Print — 10px

Ultimately as you can see that this scale gives us a very pleasing set of text sizes to work with. We don’t have to use them exactly as they are: you are free to adjust them based on project needs and your own design eye. However, this method gives us a very good starting point and can save you a lot of guesswork when it comes to working with text. The variety of scales and generators available gives you plenty of options to experiment with too, so most likely, you’ll always be able to find a scale that fits your needs. <\/p>

<\/span>Type Scale Tools & Generators<\/span><\/h2>

Here’s a collection of some of the most handy type scale calculators, generators, and tools that you can use to help incorporate tried and tested type scales into your design systems.<\/p>

\"\"<\/a>
https:\/\/typescale.io\/<\/a><\/figcaption><\/figure>

Typescale.io<\/strong><\/a> — Plugin for XD & Figma<\/em>
A free Figma and XD plugin to quickly generate a modular scale for your typography. In a couple of clicks, you can transform a single line of text into a harmonious typographic scale, based on your choice of ratio.<\/p>

\"\"<\/a>
https:\/\/baseline.is\/tools\/type-scale-generator\/<\/a><\/figcaption><\/figure>

Type Scale Generator by Baseline<\/strong><\/a> — Online Generator<\/em>
Easy to use type scale generator for consistent typography. Automatic code generated for CSS and Tailwind configs.
<\/p>

\"\"<\/a>
https:\/\/www.layoutgridcalculator.com\/typographic-scale\/<\/a><\/figcaption><\/figure>

A Typographic Scale Calculator <\/strong><\/a>— Online Generator<\/em>
This Typographic Scale Calculator was made to help you choose the right font size from a harmonious type scale inspired by the way music works.
<\/p>

\"\"<\/a>
https:\/\/www.gridlover.net\/try<\/a><\/figcaption><\/figure>

Gridlover<\/strong><\/a> — Online Generator<\/em>
Gridlover allows you to Establish a typographic system with modular scale & vertical rhythm. “Fiddle with the font size, line height, and scale factor sliders and watch the typography dance. “<\/p>

\"\"<\/a>
https:\/\/github.com\/Volorf\/Perfecter<\/a><\/figcaption><\/figure>

Perfector<\/strong><\/a> <\/strong>— Plugin for Sketch <\/em>
The Perfector plugin fixes your line heights and font sizes to the perfect values based on your choice of ratio directly inside of Sketch.<\/p>

\"\"<\/a>
https:\/\/github.com\/automat\/sketch-plugin-typographic-scale<\/a><\/figcaption><\/figure>

Typographic Scale<\/strong><\/a> — Sketch Plugin<\/em>
This plugin generates a typographic scale from selected text layers. The produced scales are meant to serve as general starting points for building your own scales.<\/p>

\"\"<\/a>
https:\/\/type-scale.com\/<\/a><\/figcaption><\/figure>

Type-Scale<\/strong><\/a> — Online Generator<\/em>
Type-Scale is another modular type scale generator created by Jeremy Church. You can choose from a variety of fonts, set custom weights, and preview different base sizes and scales live. You can even export the CSS if needed.<\/p>

\"\"<\/a>
https:\/\/typeculator.alexpaul.me<\/a><\/figcaption><\/figure>

Type Calculator<\/strong><\/a> <\/strong>— Online Calculator<\/em>
Type calculator is a simpler scale generator that allows you to set your base size, scaling factor, and a number of scale steps. Created by UI Designer Alex Paul, it gives you a fast way to preview different scales and grab the CSS if required.<\/p>

<\/span>Further Reading on Type Scales<\/span><\/h2>

If you want to dig deeper into the world of typographic scales in order to better understand what is going on behind the magic ratios, there are a number of fantastic explanations that you can explore:

A Deep Dive on Typescales<\/strong><\/a> — by IBM Design
The Math Behind Golden Ratio Typography<\/strong><\/a> — by Chris Pearson
About the Typographic Scale Calculator<\/strong><\/a> — by Jean-Lou Désiré
20 Typography Rules Every Designer Should Know<\/strong><\/a> — by Igor Ovsyannykov<\/p>\n","protected":false},"excerpt":{"rendered":"

A Typographic Scale exists to bring order and harmony to multiple different text sizes across a project. When working with typographic elements in your project, you inevitably have to choose different font sizes for various elements of text, such as your main body text, header text, sub-header text, and so on. These different size values […]<\/p>\n","protected":false},"author":13,"featured_media":58621,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[3,1793,1794,1789],"tags":[37],"topics":[1738],"class_list":["post-58510","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-basics","category-typography","category-web-design","category-brand-studio","tag-typography","topics-learn-typography"],"acf":[],"yoast_head":"\nWhat is a Typographic Scale? - Creative Market Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/creativemarket.com\/blog\/typographic-scale\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is a Typographic Scale?\" \/>\n<meta property=\"og:description\" content=\"A Typographic Scale exists to bring order and harmony to multiple different text sizes across a project. When working with typographic elements in your\" \/>\n<meta property=\"og:url\" content=\"https:\/\/creativemarket.com\/blog\/typographic-scale\" \/>\n<meta property=\"og:site_name\" content=\"Creative Market Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/crtvmrkt\" \/>\n<meta property=\"article:published_time\" content=\"2021-11-17T17:05:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-22T11:35:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2021\/11\/17081409\/Typographic-Scale-FeaturedImage-Horizontal.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Liam McKay\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2021\/11\/17081409\/Typographic-Scale-FeaturedImage-Horizontal.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:site\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Liam McKay\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/typographic-scale\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/typographic-scale\",\"name\":\"What is a Typographic Scale? - Creative Market Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/typographic-scale#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/typographic-scale#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2021\\\/11\\\/17081404\\\/Typographic-Scale-Facebook.jpg\",\"datePublished\":\"2021-11-17T17:05:31+00:00\",\"dateModified\":\"2024-04-22T11:35:02+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#\\\/schema\\\/person\\\/6f036ce9811d3c3773dbb7e5a0da2af1\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/typographic-scale#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/creativemarket.com\\\/blog\\\/typographic-scale\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/typographic-scale#primaryimage\",\"url\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2021\\\/11\\\/17081404\\\/Typographic-Scale-Facebook.jpg\",\"contentUrl\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2021\\\/11\\\/17081404\\\/Typographic-Scale-Facebook.jpg\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/typographic-scale#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What is a Typographic Scale?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\",\"name\":\"Creative Market Blog\",\"description\":\"Creative Market Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"What is a Typographic Scale? - Creative Market Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/creativemarket.com\/blog\/typographic-scale","og_locale":"en_US","og_type":"article","og_title":"What is a Typographic Scale?","og_description":"A Typographic Scale exists to bring order and harmony to multiple different text sizes across a project. When working with typographic elements in your","og_url":"https:\/\/creativemarket.com\/blog\/typographic-scale","og_site_name":"Creative Market Blog","article_publisher":"https:\/\/www.facebook.com\/crtvmrkt","article_published_time":"2021-11-17T17:05:31+00:00","article_modified_time":"2024-04-22T11:35:02+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2021\/11\/17081409\/Typographic-Scale-FeaturedImage-Horizontal.jpg","type":"image\/jpeg"}],"author":"Liam McKay","twitter_card":"summary_large_image","twitter_image":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2021\/11\/17081409\/Typographic-Scale-FeaturedImage-Horizontal.jpg","twitter_creator":"@creativemarket","twitter_site":"@creativemarket","twitter_misc":{"Written by":"Liam McKay","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/creativemarket.com\/blog\/typographic-scale","url":"https:\/\/creativemarket.com\/blog\/typographic-scale","name":"What is a Typographic Scale? - Creative Market Blog","isPartOf":{"@id":"https:\/\/creativemarket.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/creativemarket.com\/blog\/typographic-scale#primaryimage"},"image":{"@id":"https:\/\/creativemarket.com\/blog\/typographic-scale#primaryimage"},"thumbnailUrl":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2021\/11\/17081404\/Typographic-Scale-Facebook.jpg","datePublished":"2021-11-17T17:05:31+00:00","dateModified":"2024-04-22T11:35:02+00:00","author":{"@id":"https:\/\/creativemarket.com\/blog\/#\/schema\/person\/6f036ce9811d3c3773dbb7e5a0da2af1"},"breadcrumb":{"@id":"https:\/\/creativemarket.com\/blog\/typographic-scale#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/creativemarket.com\/blog\/typographic-scale"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/creativemarket.com\/blog\/typographic-scale#primaryimage","url":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2021\/11\/17081404\/Typographic-Scale-Facebook.jpg","contentUrl":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2021\/11\/17081404\/Typographic-Scale-Facebook.jpg","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/creativemarket.com\/blog\/typographic-scale#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/creativemarket.com\/blog\/"},{"@type":"ListItem","position":2,"name":"What is a Typographic Scale?"}]},{"@type":"WebSite","@id":"https:\/\/creativemarket.com\/blog\/#website","url":"https:\/\/creativemarket.com\/blog\/","name":"Creative Market Blog","description":"Creative Market Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/creativemarket.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/58510","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/comments?post=58510"}],"version-history":[{"count":0,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/58510\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/media\/58621"}],"wp:attachment":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/media?parent=58510"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/categories?post=58510"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/tags?post=58510"},{"taxonomy":"topics","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/topics?post=58510"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}