{
    "componentChunkName": "component---src-pages-typography-type-scale-mdx",
    "path": "/typography/type-scale/",
    "result": {"pageContext":{"frontmatter":{"title":"Type scale","description":"The proper application of type to reflect the IBM brand requires an understanding of scale, style, setting and color. Learn more about Type Specs."},"relativePagePath":"/typography/type-scale.mdx","titleType":"append","MdxNode":{"id":"00c12071-e273-5f19-99f9-790bee1023f2","children":[],"parent":"c9db4afd-fa3e-579a-854c-b7d7c2b6a9ae","internal":{"content":"---\ntitle: Type scale\ndescription:\n  The proper application of type to reflect the IBM brand requires an\n  understanding of scale, style, setting and color. Learn more about Type Specs.\n---\n\nimport { AnchorLinks, PageDescription, Video } from 'gatsby-theme-carbon';\n\nimport TypesetStyle from '../../components/TypesetStyle';\nimport TypeScaleTable from '../../components/TypeScaleTable';\nimport TypeTester from '../../components/TypeTester';\nimport TypeTesterSelect from '../../components/TypeTesterSelect';\n\n<PageDescription>\n\nOur corporate typeface, IBM Plex®, has its own set of guidance and best practices. Establishing a well-defined type scale is fundamental. It’s the foundation for maintaining consistency and visual coherence across all brand materials.\n\n</PageDescription>\n\n<AnchorLinks>\n  <AnchorLink>Type scale equation</AnchorLink>\n  <AnchorLink>Type scale</AnchorLink>\n  <AnchorLink>Large formats</AnchorLink>\n  <AnchorLink>Resources</AnchorLink>\n</AnchorLinks>\n\n## Type scale equation\n\nThe IBM type scale is built on a single equation. This equation establishes line heights so that the type is harmoniously spaced at all sizes. Because we’re a worldwide enterprise, all alphabets we use for content globalization are taken into account when considering type scales.\n\n### Type scale formula\n\nThe formula for the our type scale equation was created to provide hierarchy for all kinds of experiences. The formula assumes that y₀=12px. There have been applications where a smaller scale was needed and created.\n\n<div>\n\n<TypeScaleTable />\n\n```\nXn = Xn-1 + {INT[(n-2)/4] + 1} * 2\nXn: step n type size Xn-1: step n-1 type size\n```\n\n</div>\n\n### Adjusted scale\n\nWhile the default language for communication is US English, the IBM Plex font also has been created in multiple languages. Some alphabets have taller ascenders and longer descenders than others, necessitating an adjusted scale. Based on the particularities of each alphabet, we established two main categories.\n\n#### Default scale\nFor Latin, Cyrillic, Hebrew and Greek experiences, use the IBM type scales.\n\n#### Adjusted scale\nFor Chinese, Japanese, Korean, Thai, Devanagari and Arabic experiences, decrease the type’s point size to 95% while keeping the same line height as in the default scale.\n\n\n<ArtDirection>\n\n![Type scale adjusted scale](images/01_IDL_Typescale_Adjustedscale_mobile.svg)\n\n![Type scale adjusted scale](images/01_IDL_Typescale_Adjustedscale.svg)\n\n</ArtDirection>\n\n<DoDontRow>\n<DoDont type=\"dont\" caption=\"Don’t use the default point size and line height for the Chinese, Japanese, Korean, Thai, Devanagari or Arabic alphabets. It can lead to letter overlaps or tight spacing.\" colLg=\"6\">\n\n![Don’t use the default point size and line height for the Chinese, Japanese, Korean, Thai, Devanagari or Arabic alphabets](./images/02_IDL_Typescale_dont.svg)\n\n</DoDont>\n<DoDont caption=\"Decrease the point size to 95% when using the Chinese, Japanese, Korean, Thai, Devanagari or Arabic alphabet.\" colLg=\"6\">\n\n![Decrease the point size to 95% when using the Chinese, Japanese, Korean, Thai, Devanagari or Arabic alphabet](/images/03_IDL_Typescale_do.svg)\n\n</DoDont>\n</DoDontRow>\n\n## Type scale\n\nThe universal type scale is the relationship between type sizes and corresponding line heights that’s used throughout our design systems. The IBM  line height adapts to the paragraph length and relative type size. The line height is usually larger for body type scales and becomes progressively tighter as the type size increases relative to the artboard. For certain type sizes, multiple line height options are provided to account for varying paragraph lengths and specific constraints.\n\nOur existing templates use subsets of this scale. Make sure to use existing guidance and templates because they all draw from this universal scale.\n\n<Row>\n<Column colMd={4} colMd={8} colLg={12} noGutterSm>\n\n<div className=\"table-header\">\n<div className=\"itens aligment-adjuster\">\n  <p><strong>Default scale</strong><br /> \n  Latin, Cyrillic, Hebrew, Greek</p>\n</div>\n<div className=\"itens\">\n  <p style={{marginLeft: '0.5rem'}} ><strong>Adjusted scale (95%)</strong><br />Chinese, Japanese, Korean, Thai, Devanagari, Arabic</p>\n</div>\n<div className=\"itens\">\n  <p style={{marginLeft: '1rem'}} ><strong>Line height</strong></p>\n</div>\n</div>\n\n<div className=\"bx--col-lg-12 bx--col-no-gutter table-container\">\n    <table>\n      <thead>\n      </thead>\n      <tbody>\n        <tr>\n          <td>6</td>\n          <td>5.7</td>\n          <td>8</td>\n        </tr>\n        <tr>\n          <td>7</td>\n          <td>6.65</td>\n          <td>9</td>\n        </tr>\n        <tr>\n          <td>9</td>\n          <td>8.55</td>\n          <td>12</td>\n        </tr>\n        <tr>\n          <td>12</td>\n          <td>11.4</td>\n          <td>16</td>\n        </tr>\n        <tr>\n          <td rowSpan={2}>14</td>\n          <td rowSpan={2}>13.3</td>\n          <td>18</td>\n        </tr>\n        <tr>\n          <td>20</td>\n        </tr>\n        <tr>\n          <td rowSpan={2}>16</td>\n          <td rowSpan={2}>15.2</td>\n          <td>22</td>\n        </tr>\n        <tr>\n          <td>24</td>\n        </tr>\n        <tr>\n          <td>18</td>\n          <td>17.1</td>\n          <td>24</td>\n        </tr>\n        <tr>\n          <td rowSpan={2}>20</td>\n          <td rowSpan={2}>19</td>\n          <td>26</td>\n        </tr>\n        <tr>\n          <td>28</td>\n        </tr>\n        <tr>\n          <td rowSpan={2}>24</td>\n          <td rowSpan={2}>22.8</td>\n          <td>28</td>\n        </tr>\n        <tr>\n          <td>30</td>\n        </tr>\n        <tr>\n          <td>28</td>\n          <td>26.6</td>\n          <td>36</td>\n        </tr>\n        <tr>\n          <td>32</td>\n          <td>30.4</td>\n          <td>40</td>\n        </tr>\n        <tr>\n          <td>36</td>\n          <td>34.2</td>\n          <td>44</td>\n        </tr>\n        <tr>\n          <td>42</td>\n          <td>39.9</td>\n          <td>50</td>\n        </tr>\n        <tr>\n          <td>48</td>\n          <td>45.6</td>\n          <td>56</td>\n        </tr>\n        <tr>\n          <td>54</td>\n          <td>51.3</td>\n          <td>64</td>\n        </tr>\n        <tr>\n          <td>60</td>\n          <td>57</td>\n          <td>70</td>\n        </tr>\n        <tr>\n          <td>68</td>\n          <td>64.6</td>\n          <td>78</td>\n        </tr>\n        <tr>\n          <td>76</td>\n          <td>72.2</td>\n          <td>86</td>\n        </tr>\n        <tr>\n          <td>84</td>\n          <td>79.8</td>\n          <td>94</td>\n        </tr>\n        <tr>\n          <td>92</td>\n          <td>87.4</td>\n          <td>102</td>\n        </tr>\n        <tr>\n          <td>102</td>\n          <td>96.9</td>\n          <td>114</td>\n        </tr>\n        <tr>\n          <td>112</td>\n          <td>106.4</td>\n          <td>124</td>\n        </tr>\n        <tr>\n          <td>122</td>\n          <td>115.9</td>\n          <td>130</td>\n        </tr>\n        <tr>\n          <td>132</td>\n          <td>125.4</td>\n          <td>146</td>\n        </tr>\n        <tr>\n          <td>144</td>\n          <td>136.8</td>\n          <td>160</td>\n        </tr>\n        <tr>\n          <td>156</td>\n          <td>148.2</td>\n          <td>164</td>\n        </tr>\n        <tr>\n          <td>168</td>\n          <td>159.6</td>\n          <td>186</td>\n        </tr>\n        <tr>\n          <td>180</td>\n          <td>171</td>\n          <td>200</td>\n        </tr>\n        <tr>\n          <td>194</td>\n          <td>184.3</td>\n          <td>216</td>\n        </tr>\n        <tr>\n          <td>208</td>\n          <td>197.6</td>\n          <td>228</td>\n        </tr>\n        <tr>\n          <td>222</td>\n          <td>210.9</td>\n          <td>244</td>\n        </tr>\n        <tr>\n          <td>236</td>\n          <td>224.2</td>\n          <td>260</td>\n        </tr>\n        <tr>\n          <td>252</td>\n          <td>239.4</td>\n          <td>276</td>\n        </tr>\n        <tr>\n          <td>268</td>\n          <td>254.6</td>\n          <td>296</td>\n        </tr>\n        <tr>\n          <td>284</td>\n          <td>269.8</td>\n          <td>312</td>\n        </tr>\n        <tr>\n          <td>300</td>\n          <td>285</td>\n          <td>330</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</Column>\n</Row>\n\n### Type tester\n\nWe’ve included a type tester so you can play with Plex® and explore the type scale in all styles, weights and languages. The typeface really comes to life once it’s set in words or paragraphs, so feel free to type away. You can select the weight and scale in the dropdowns. For Plex Chinese, Japanese, Korean, Thai, Devanagari and Arabic, the type scale has been adjusted to 95% of the default size while keeping the same line height.\n\n<TypeTesterSelect />\n\n## Large formats\n\nThe size of an artboard and the viewing distance influence how we perceive type. The larger and further away an asset is, the smaller the type appears. To counter this effect, we use a multiplication factor in our type scales for large formats that are to be viewed from a distance. Using this principle, the mini unit is also multiplied depending on the same factors—see the [Grid page](/2x-grid#base-unit) for more information. Note that these rules are valid as long as you are creating an asset at 100%. Extra scaling applies if you are designing at a different scale than 1:1.\n\n#### Print\n\nFor print, the type scales were created for handheld print. When creating posters, signage and roll-up banners, depending on the viewing distance and size of the artboard, a multiplication factor should be used for both the point size and the line height. For example, for large posters and small signage such as easel signs, use 4x. For human-scale print experiences, such as roll-up banners and larger signage, use 8x. For print experiences viewed from across the street, use 32x.\n\n#### Digital\n\nDigital assets are created at a certain pixel size and often enlarged to be projected on larger screens. When creating assets on artboards up to 4K, use our type scales as given. However, when creating layouts directly at larger resolutions or on larger artboards, use a multiplication factor. For example, when creating designs at 8K, use 4x the type scales; when creating at 16K, use 8x, and so on.\n\n<ArtDirection>\n\n![Type scale multiplication](images/04_IDL_Typescale_Multiplication_mobile.svg)\n\n![Type scale multiplication](images/04_IDL_Typescale_Multiplication.svg)\n\n</ArtDirection>\n\n#### Large formats type scale\n\nThere’s no need for you to do the math—we’ve provided the type scale for large formats shown here. Keep in mind the suggestion to decrease the size to 95% for Chinese, Japanese, Korean, Thai, Devanagari and Arabic to account for the specifics of those alphabets. Review [Adjusted scale](#adjusted-scale) for more information.\n\n<Tabs>\n  <Tab label=\"1x\">\n\n  <Row>\n  <Column colMd={4} colMd={8} colLg={12} noGutterSm>\n  <div class=\"bx--col-lg-12 bx--col-no-gutter\">\n    <div className=\"table-header\">\n      <div className=\"itens aligment-adjuster\">\n        <p><strong>Default scale</strong><br /> \n        Latin, Cyrillic, Hebrew, Greek</p>\n      </div>\n      <div className=\"itens\">\n        <p style={{marginLeft: '0.5rem'}}><strong>Adjusted scale (95%)</strong><br />Chinese, Japanese, Korean, Thai, Devanagari, Arabic</p>\n      </div>\n      <div className=\"itens\">\n        <p style={{marginLeft: '1rem'}} ><strong>Line height</strong></p>\n      </div>\n    </div>\n    <div className=\"bx--col-lg-12 bx--col-no-gutter table-container\">\n      <table>\n      <thead>\n        <tr>\n        </tr>\n      </thead>\n      <tbody>\n        <tr>\n          <td>6</td>\n          <td>5.7</td>\n          <td>8</td>\n        </tr>\n        <tr>\n          <td>7</td>\n          <td>6.65</td>\n          <td>9</td>\n        </tr>\n        <tr>\n          <td>9</td>\n          <td>8.55</td>\n          <td>12</td>\n        </tr>\n        <tr>\n          <td>12</td>\n          <td>11.4</td>\n          <td>16</td>\n        </tr>\n        <tr>\n          <td rowSpan={2}>14</td>\n          <td rowSpan={2}>13.3</td>\n          <td>18</td>\n        </tr>\n        <tr>\n          <td>20</td>\n        </tr>\n        <tr>\n          <td rowSpan={2}>16</td>\n          <td rowSpan={2}>15.2</td>\n          <td>22</td>\n        </tr>\n        <tr>\n          <td>24</td>\n        </tr>\n        <tr>\n          <td>18</td>\n          <td>17.1</td>\n          <td>24</td>\n        </tr>\n        <tr>\n          <td rowSpan={2}>20</td>\n          <td rowSpan={2}>19</td>\n          <td>26</td>\n        </tr>\n        <tr>\n          <td>28</td>\n        </tr>\n        <tr>\n          <td rowSpan={2}>24</td>\n          <td rowSpan={2}>22.8</td>\n          <td>28</td>\n        </tr>\n        <tr>\n          <td>30</td>\n        </tr>\n        <tr>\n          <td>28</td>\n          <td>26.6</td>\n          <td>36</td>\n        </tr>\n        <tr>\n          <td>32</td>\n          <td>30.4</td>\n          <td>40</td>\n        </tr>\n        <tr>\n          <td>36</td>\n          <td>34.2</td>\n          <td>44</td>\n        </tr>\n        <tr>\n          <td>42</td>\n          <td>39.9</td>\n          <td>50</td>\n        </tr>\n        <tr>\n          <td>48</td>\n          <td>45.6</td>\n          <td>56</td>\n        </tr>\n        <tr>\n          <td>54</td>\n          <td>51.3</td>\n          <td>64</td>\n        </tr>\n        <tr>\n          <td>60</td>\n          <td>57</td>\n          <td>70</td>\n        </tr>\n        <tr>\n          <td>68</td>\n          <td>64.6</td>\n          <td>78</td>\n        </tr>\n        <tr>\n          <td>76</td>\n          <td>72.2</td>\n          <td>86</td>\n        </tr>\n        <tr>\n          <td>84</td>\n          <td>79.8</td>\n          <td>94</td>\n        </tr>\n        <tr>\n          <td>92</td>\n          <td>87.4</td>\n          <td>102</td>\n        </tr>\n        <tr>\n          <td>102</td>\n          <td>96.9</td>\n          <td>114</td>\n        </tr>\n        <tr>\n          <td>112</td>\n          <td>106.4</td>\n          <td>124</td>\n        </tr>\n        <tr>\n          <td>122</td>\n          <td>115.9</td>\n          <td>130</td>\n        </tr>\n        <tr>\n          <td>132</td>\n          <td>125.4</td>\n          <td>146</td>\n        </tr>\n        <tr>\n          <td>144</td>\n          <td>136.8</td>\n          <td>160</td>\n        </tr>\n        <tr>\n          <td>156</td>\n          <td>148.2</td>\n          <td>164</td>\n        </tr>\n        <tr>\n          <td>168</td>\n          <td>159.6</td>\n          <td>186</td>\n        </tr>\n        <tr>\n          <td>180</td>\n          <td>171</td>\n          <td>200</td>\n        </tr>\n        <tr>\n          <td>194</td>\n          <td>184.3</td>\n          <td>216</td>\n        </tr>\n        <tr>\n          <td>208</td>\n          <td>197.6</td>\n          <td>228</td>\n        </tr>\n        <tr>\n          <td>222</td>\n          <td>210.9</td>\n          <td>244</td>\n        </tr>\n        <tr>\n          <td>236</td>\n          <td>224.2</td>\n          <td>260</td>\n        </tr>\n        <tr>\n          <td>252</td>\n          <td>239.4</td>\n          <td>276</td>\n        </tr>\n        <tr>\n          <td>268</td>\n          <td>254.6</td>\n          <td>296</td>\n        </tr>\n        <tr>\n          <td>284</td>\n          <td>269.8</td>\n          <td>312</td>\n        </tr>\n        <tr>\n          <td>300</td>\n          <td>285</td>\n          <td>330</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n  </div>\n   </Column>\n  </Row>\n\n  </Tab>\n  <Tab label=\"4x\">\n\n  <Row>\n  <Column colMd={4} colMd={8} colLg={12} noGutterSm>\n  <div class=\"bx--col-lg-12 bx--col-no-gutter\">\n    <div className=\"table-header\">\n      <div className=\"itens aligment-adjuster\">\n        <p><strong>Default scale</strong><br /> \n        Latin, Cyrillic, Hebrew, Greek</p>\n      </div>\n      <div className=\"itens\">\n        <p style={{marginLeft: '0.5rem'}}><strong>Adjusted scale (95%)</strong><br />Chinese, Japanese, Korean, Thai, Devanagari, Arabic</p>\n      </div>\n      <div className=\"itens\">\n        <p style={{marginLeft: '1rem'}} ><strong>Line height</strong></p>\n      </div>\n    </div>\n    <div className=\"bx--col-lg-12 bx--col-no-gutter table-container\">\n    <table>\n      <thead>\n        <tr>\n        </tr>\n      </thead>\n      <tbody>\n        <tr>\n          <td>24</td>\n          <td>22.8</td>\n          <td>32</td>\n        </tr>\n        <tr>\n          <td>28</td>\n          <td>26.6</td>\n          <td>36</td>\n        </tr>\n        <tr>\n          <td>36</td>\n          <td>34.2</td>\n          <td>48</td>\n        </tr>\n        <tr>\n          <td>48</td>\n          <td>45.6</td>\n          <td>64</td>\n        </tr>\n        <tr>\n          <td rowSpan={2}>56</td>\n          <td rowSpan={2}>53.2</td>\n          <td>72</td>\n        </tr>\n        <tr>\n          <td>80</td>\n        </tr>\n        <tr>\n          <td rowSpan={2}>64</td>\n          <td rowSpan={2}>60.8</td>\n          <td>88</td>\n        </tr>\n        <tr>\n          <td>96</td>\n        </tr>\n        <tr>\n          <td>72</td>\n          <td>68.4</td>\n          <td>96</td>\n        </tr>\n        <tr>\n          <td rowSpan={2}>80</td>\n          <td rowSpan={2}>76</td>\n          <td>104</td>\n        </tr>\n        <tr>\n          <td>112</td>\n        </tr>\n        <tr>\n          <td rowSpan={2}>96</td>\n          <td rowSpan={2}>91.2</td>\n          <td>112</td>\n        </tr>\n        <tr>\n          <td>120</td>\n        </tr>\n        <tr>\n          <td>112</td>\n          <td>106.4</td>\n          <td>144</td>\n        </tr>\n        <tr>\n          <td>128</td>\n          <td>121.6</td>\n          <td>160</td>\n        </tr>\n        <tr>\n          <td>144</td>\n          <td>136.8</td>\n          <td>176</td>\n        </tr>\n        <tr>\n          <td>168</td>\n          <td>159.6</td>\n          <td>200</td>\n        </tr>\n        <tr>\n          <td>192</td>\n          <td>182.4</td>\n          <td>224</td>\n        </tr>\n        <tr>\n          <td>216</td>\n          <td>205.2</td>\n          <td>256</td>\n        </tr>\n        <tr>\n          <td>240</td>\n          <td>228</td>\n          <td>280</td>\n        </tr>\n        <tr>\n          <td>272</td>\n          <td>258.4</td>\n          <td>312</td>\n        </tr>\n        <tr>\n          <td>304</td>\n          <td>288.8</td>\n          <td>344</td>\n        </tr>\n        <tr>\n          <td>336</td>\n          <td>319.2</td>\n          <td>376</td>\n        </tr>\n        <tr>\n          <td>368</td>\n          <td>349.6</td>\n          <td>408</td>\n        </tr>\n        <tr>\n          <td>408</td>\n          <td>387.6</td>\n          <td>456</td>\n        </tr>\n        <tr>\n          <td>448</td>\n          <td>425.6</td>\n          <td>496</td>\n        </tr>\n        <tr>\n          <td>488</td>\n          <td>463.6</td>\n          <td>520</td>\n        </tr>\n        <tr>\n          <td>528</td>\n          <td>501.6</td>\n          <td>584</td>\n        </tr>\n        <tr>\n          <td>576</td>\n          <td>547.2</td>\n          <td>640</td>\n        </tr>\n        <tr>\n          <td>624</td>\n          <td>592.8</td>\n          <td>656</td>\n        </tr>\n        <tr>\n          <td>672</td>\n          <td>638.4</td>\n          <td>744</td>\n        </tr>\n        <tr>\n          <td>720</td>\n          <td>684</td>\n          <td>800</td>\n        </tr>\n        <tr>\n          <td>776</td>\n          <td>737.2</td>\n          <td>864</td>\n        </tr>\n        <tr>\n          <td>832</td>\n          <td>790.4</td>\n          <td>912</td>\n        </tr>\n        <tr>\n          <td>888</td>\n          <td>843.6</td>\n          <td>976</td>\n        </tr>\n        <tr>\n          <td>944</td>\n          <td>896.8</td>\n          <td>1040</td>\n        </tr>\n        <tr>\n          <td>1008</td>\n          <td>957.6</td>\n          <td>1104</td>\n        </tr>\n        <tr>\n          <td>1072</td>\n          <td>1018.4</td>\n          <td>1184</td>\n        </tr>\n        <tr>\n          <td>1072</td>\n          <td>1018.4</td>\n          <td>1184</td>\n        </tr>\n        <tr>\n          <td>1136</td>\n          <td>1079.2</td>\n          <td>1248</td>\n        </tr>\n        <tr>\n          <td>1200</td>\n          <td>1140</td>\n          <td>1320</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n  </div>\n   </Column>\n  </Row>\n\n  </Tab>\n  <Tab label=\"8x\">\n\n  <Row>\n  <Column colMd={4} colMd={8} colLg={12} noGutterSm>\n  <div class=\"bx--col-lg-12 bx--col-no-gutter\">\n    <div className=\"table-header\">\n      <div className=\"itens aligment-adjuster\">\n        <p><strong>Default scale</strong><br /> \n        Latin, Cyrillic, Hebrew, Greek</p>\n      </div>\n      <div className=\"itens\">\n        <p style={{marginLeft: '0.5rem'}}><strong>Adjusted scale (95%)</strong><br />Chinese, Japanese, Korean, Thai, Devanagari, Arabic</p>\n      </div>\n      <div className=\"itens\">\n        <p style={{marginLeft: '1rem'}}><strong>Line height</strong></p>\n      </div>\n    </div>\n    <div className=\"bx--col-lg-12 bx--col-no-gutter table-container\">\n    <table>\n      <thead>\n        <tr>\n        </tr>\n      </thead>\n      <tbody>\n        <tr>\n          <td>48</td>\n          <td>45.6</td>\n          <td>64</td>\n        </tr>\n        <tr>\n          <td>56</td>\n          <td>53.2</td>\n          <td>72</td>\n        </tr>\n        <tr>\n          <td>72</td>\n          <td>68.4</td>\n          <td>96</td>\n        </tr>\n        <tr>\n          <td>96</td>\n          <td>91.2</td>\n          <td>128</td>\n        </tr>\n        <tr>\n          <td rowSpan={2}>112</td>\n          <td rowSpan={2}>106.4</td>\n          <td>144</td>\n        </tr>\n        <tr>\n          <td>160</td>\n        </tr>\n        <tr>\n          <td rowSpan={2}>128</td>\n          <td rowSpan={2}>121.6</td>\n          <td>176</td>\n        </tr>\n        <tr>\n          <td>192</td>\n        </tr>\n        <tr>\n          <td>144</td>\n          <td>136.8</td>\n          <td>192</td>\n        </tr>\n        <tr>\n          <td rowSpan={2}>160</td>\n          <td rowSpan={2}>152</td>\n          <td>208</td>\n        </tr>\n        <tr>\n          <td>224</td>\n        </tr>\n        <tr>\n          <td rowSpan={2}>192</td>\n          <td rowSpan={2}>182.4</td>\n          <td>224</td>\n        </tr>\n        <tr>\n          <td>240</td>\n        </tr>\n        <tr>\n          <td>224</td>\n          <td>212.8</td>\n          <td>288</td>\n        </tr>\n        <tr>\n          <td>256</td>\n          <td>243.2</td>\n          <td>320</td>\n        </tr>\n        <tr>\n          <td>288</td>\n          <td>273.6</td>\n          <td>352</td>\n        </tr>\n        <tr>\n          <td>336</td>\n          <td>319.2</td>\n          <td>400</td>\n        </tr>\n        <tr>\n          <td>384</td>\n          <td>364.8</td>\n          <td>448</td>\n        </tr>\n        <tr>\n          <td>432</td>\n          <td>410.4</td>\n          <td>512</td>\n        </tr>\n        <tr>\n          <td>480</td>\n          <td>456</td>\n          <td>560</td>\n        </tr>\n        <tr>\n          <td>544</td>\n          <td>516.8</td>\n          <td>624</td>\n        </tr>\n        <tr>\n          <td>608</td>\n          <td>577.6</td>\n          <td>688</td>\n        </tr>\n        <tr>\n          <td>672</td>\n          <td>638.4</td>\n          <td>752</td>\n        </tr>\n        <tr>\n          <td>736</td>\n          <td>699.2</td>\n          <td>816</td>\n        </tr>\n        <tr>\n          <td>816</td>\n          <td>775.2</td>\n          <td>912</td>\n        </tr>\n        <tr>\n          <td>896</td>\n          <td>851.2</td>\n          <td>992</td>\n        </tr>\n        <tr>\n          <td>976</td>\n          <td>927.2</td>\n          <td>1040</td>\n        </tr>\n        <tr>\n          <td>1056</td>\n          <td>1003.2</td>\n          <td>1168</td>\n        </tr>\n        <tr>\n          <td>1152</td>\n          <td>1094.4</td>\n          <td>1280</td>\n        </tr>\n        <tr>\n          <td>1248</td>\n          <td>1185.6</td>\n          <td>1312</td>\n        </tr>\n        <tr>\n          <td>1344</td>\n          <td>1276.8</td>\n          <td>1488</td>\n        </tr>\n        <tr>\n          <td>1440</td>\n          <td>1368</td>\n          <td>1600</td>\n        </tr>\n        <tr>\n          <td>1552</td>\n          <td>1474.4</td>\n          <td>1728</td>\n        </tr>\n        <tr>\n          <td>1664</td>\n          <td>1580.8</td>\n          <td>1824</td>\n        </tr>\n        <tr>\n          <td>1776</td>\n          <td>1687.2</td>\n          <td>1952</td>\n        </tr>\n        <tr>\n          <td>1888</td>\n          <td>1793.6</td>\n          <td>2080</td>\n        </tr>\n        <tr>\n          <td>2016</td>\n          <td>1915.2</td>\n          <td>2208</td>\n        </tr>\n        <tr>\n          <td>2144</td>\n          <td>2036.8</td>\n          <td>2368</td>\n        </tr>\n        <tr>\n          <td>2272</td>\n          <td>2158.4</td>\n          <td>2496</td>\n        </tr>\n        <tr>\n          <td>2400</td>\n          <td>2280</td>\n          <td>2640</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n  </div>\n   </Column>\n  </Row>\n\n  </Tab>\n</Tabs>\n\n## Resources\n\nIBM has established a universal type scale, containing a wide range of sizes. When designing, it’s important to use a curated type set for each specific use case. Embedded within many of our templates are various curated type sets, all part of IBM’s universal type scale. For example, you’ll want to use the Carbon type sets for product and web experiences, and use the collateral type sets for handheld print and corresponding PDFs, and so on.\n\n<Row className=\"resource-card-group\">\n<Column colMd={4} colLg={4} noGutterSm>\n  <ResourceCard\n    subTitle=\"IBM Plex® typeface latest release\"\n    aspectRatio=\"2:1\"\n    href=\"https://github.com/IBM/plex/releases/latest\"\n    >\n\n![github icon](../../images/resource-cards/github.png)\n\n  </ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n  <ResourceCard\n    subTitle=\"Carbon type set\"\n    aspectRatio=\"2:1\"         \n    href=\"https://carbondesignsystem.com/elements/typography/type-sets\"\n    >\n\n![carbon icon](../../images/resource-cards/carbon.png)\n\n  </ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n  <ResourceCard\n    subTitle=\"Carbon v11 type set (Figma library)\"\n    aspectRatio=\"2:1\"\n    href=\"https://www.figma.com/file/rK06GY6bvEfokuzrFGdtWB/(v11)-Text-Styles---IBM-Design-Language?node-id=129%3A2\"\n    >\n\n![figma icon](../../images/resource-cards/figma.png)\n\n  </ResourceCard>\n</Column>\n</Row>\n","type":"Mdx","contentDigest":"e7d2c7b2bef8b59f25f5a94266980d71","owner":"gatsby-plugin-mdx","counter":1931},"frontmatter":{"title":"Type scale","description":"The proper application of type to reflect the IBM brand requires an understanding of scale, style, setting and color. Learn more about Type Specs."},"exports":{},"rawBody":"---\ntitle: Type scale\ndescription:\n  The proper application of type to reflect the IBM brand requires an\n  understanding of scale, style, setting and color. Learn more about Type Specs.\n---\n\nimport { AnchorLinks, PageDescription, Video } from 'gatsby-theme-carbon';\n\nimport TypesetStyle from '../../components/TypesetStyle';\nimport TypeScaleTable from '../../components/TypeScaleTable';\nimport TypeTester from '../../components/TypeTester';\nimport TypeTesterSelect from '../../components/TypeTesterSelect';\n\n<PageDescription>\n\nOur corporate typeface, IBM Plex®, has its own set of guidance and best practices. Establishing a well-defined type scale is fundamental. It’s the foundation for maintaining consistency and visual coherence across all brand materials.\n\n</PageDescription>\n\n<AnchorLinks>\n  <AnchorLink>Type scale equation</AnchorLink>\n  <AnchorLink>Type scale</AnchorLink>\n  <AnchorLink>Large formats</AnchorLink>\n  <AnchorLink>Resources</AnchorLink>\n</AnchorLinks>\n\n## Type scale equation\n\nThe IBM type scale is built on a single equation. This equation establishes line heights so that the type is harmoniously spaced at all sizes. Because we’re a worldwide enterprise, all alphabets we use for content globalization are taken into account when considering type scales.\n\n### Type scale formula\n\nThe formula for the our type scale equation was created to provide hierarchy for all kinds of experiences. The formula assumes that y₀=12px. There have been applications where a smaller scale was needed and created.\n\n<div>\n\n<TypeScaleTable />\n\n```\nXn = Xn-1 + {INT[(n-2)/4] + 1} * 2\nXn: step n type size Xn-1: step n-1 type size\n```\n\n</div>\n\n### Adjusted scale\n\nWhile the default language for communication is US English, the IBM Plex font also has been created in multiple languages. Some alphabets have taller ascenders and longer descenders than others, necessitating an adjusted scale. Based on the particularities of each alphabet, we established two main categories.\n\n#### Default scale\nFor Latin, Cyrillic, Hebrew and Greek experiences, use the IBM type scales.\n\n#### Adjusted scale\nFor Chinese, Japanese, Korean, Thai, Devanagari and Arabic experiences, decrease the type’s point size to 95% while keeping the same line height as in the default scale.\n\n\n<ArtDirection>\n\n![Type scale adjusted scale](images/01_IDL_Typescale_Adjustedscale_mobile.svg)\n\n![Type scale adjusted scale](images/01_IDL_Typescale_Adjustedscale.svg)\n\n</ArtDirection>\n\n<DoDontRow>\n<DoDont type=\"dont\" caption=\"Don’t use the default point size and line height for the Chinese, Japanese, Korean, Thai, Devanagari or Arabic alphabets. It can lead to letter overlaps or tight spacing.\" colLg=\"6\">\n\n![Don’t use the default point size and line height for the Chinese, Japanese, Korean, Thai, Devanagari or Arabic alphabets](./images/02_IDL_Typescale_dont.svg)\n\n</DoDont>\n<DoDont caption=\"Decrease the point size to 95% when using the Chinese, Japanese, Korean, Thai, Devanagari or Arabic alphabet.\" colLg=\"6\">\n\n![Decrease the point size to 95% when using the Chinese, Japanese, Korean, Thai, Devanagari or Arabic alphabet](/images/03_IDL_Typescale_do.svg)\n\n</DoDont>\n</DoDontRow>\n\n## Type scale\n\nThe universal type scale is the relationship between type sizes and corresponding line heights that’s used throughout our design systems. The IBM  line height adapts to the paragraph length and relative type size. The line height is usually larger for body type scales and becomes progressively tighter as the type size increases relative to the artboard. For certain type sizes, multiple line height options are provided to account for varying paragraph lengths and specific constraints.\n\nOur existing templates use subsets of this scale. Make sure to use existing guidance and templates because they all draw from this universal scale.\n\n<Row>\n<Column colMd={4} colMd={8} colLg={12} noGutterSm>\n\n<div className=\"table-header\">\n<div className=\"itens aligment-adjuster\">\n  <p><strong>Default scale</strong><br /> \n  Latin, Cyrillic, Hebrew, Greek</p>\n</div>\n<div className=\"itens\">\n  <p style={{marginLeft: '0.5rem'}} ><strong>Adjusted scale (95%)</strong><br />Chinese, Japanese, Korean, Thai, Devanagari, Arabic</p>\n</div>\n<div className=\"itens\">\n  <p style={{marginLeft: '1rem'}} ><strong>Line height</strong></p>\n</div>\n</div>\n\n<div className=\"bx--col-lg-12 bx--col-no-gutter table-container\">\n    <table>\n      <thead>\n      </thead>\n      <tbody>\n        <tr>\n          <td>6</td>\n          <td>5.7</td>\n          <td>8</td>\n        </tr>\n        <tr>\n          <td>7</td>\n          <td>6.65</td>\n          <td>9</td>\n        </tr>\n        <tr>\n          <td>9</td>\n          <td>8.55</td>\n          <td>12</td>\n        </tr>\n        <tr>\n          <td>12</td>\n          <td>11.4</td>\n          <td>16</td>\n        </tr>\n        <tr>\n          <td rowSpan={2}>14</td>\n          <td rowSpan={2}>13.3</td>\n          <td>18</td>\n        </tr>\n        <tr>\n          <td>20</td>\n        </tr>\n        <tr>\n          <td rowSpan={2}>16</td>\n          <td rowSpan={2}>15.2</td>\n          <td>22</td>\n        </tr>\n        <tr>\n          <td>24</td>\n        </tr>\n        <tr>\n          <td>18</td>\n          <td>17.1</td>\n          <td>24</td>\n        </tr>\n        <tr>\n          <td rowSpan={2}>20</td>\n          <td rowSpan={2}>19</td>\n          <td>26</td>\n        </tr>\n        <tr>\n          <td>28</td>\n        </tr>\n        <tr>\n          <td rowSpan={2}>24</td>\n          <td rowSpan={2}>22.8</td>\n          <td>28</td>\n        </tr>\n        <tr>\n          <td>30</td>\n        </tr>\n        <tr>\n          <td>28</td>\n          <td>26.6</td>\n          <td>36</td>\n        </tr>\n        <tr>\n          <td>32</td>\n          <td>30.4</td>\n          <td>40</td>\n        </tr>\n        <tr>\n          <td>36</td>\n          <td>34.2</td>\n          <td>44</td>\n        </tr>\n        <tr>\n          <td>42</td>\n          <td>39.9</td>\n          <td>50</td>\n        </tr>\n        <tr>\n          <td>48</td>\n          <td>45.6</td>\n          <td>56</td>\n        </tr>\n        <tr>\n          <td>54</td>\n          <td>51.3</td>\n          <td>64</td>\n        </tr>\n        <tr>\n          <td>60</td>\n          <td>57</td>\n          <td>70</td>\n        </tr>\n        <tr>\n          <td>68</td>\n          <td>64.6</td>\n          <td>78</td>\n        </tr>\n        <tr>\n          <td>76</td>\n          <td>72.2</td>\n          <td>86</td>\n        </tr>\n        <tr>\n          <td>84</td>\n          <td>79.8</td>\n          <td>94</td>\n        </tr>\n        <tr>\n          <td>92</td>\n          <td>87.4</td>\n          <td>102</td>\n        </tr>\n        <tr>\n          <td>102</td>\n          <td>96.9</td>\n          <td>114</td>\n        </tr>\n        <tr>\n          <td>112</td>\n          <td>106.4</td>\n          <td>124</td>\n        </tr>\n        <tr>\n          <td>122</td>\n          <td>115.9</td>\n          <td>130</td>\n        </tr>\n        <tr>\n          <td>132</td>\n          <td>125.4</td>\n          <td>146</td>\n        </tr>\n        <tr>\n          <td>144</td>\n          <td>136.8</td>\n          <td>160</td>\n        </tr>\n        <tr>\n          <td>156</td>\n          <td>148.2</td>\n          <td>164</td>\n        </tr>\n        <tr>\n          <td>168</td>\n          <td>159.6</td>\n          <td>186</td>\n        </tr>\n        <tr>\n          <td>180</td>\n          <td>171</td>\n          <td>200</td>\n        </tr>\n        <tr>\n          <td>194</td>\n          <td>184.3</td>\n          <td>216</td>\n        </tr>\n        <tr>\n          <td>208</td>\n          <td>197.6</td>\n          <td>228</td>\n        </tr>\n        <tr>\n          <td>222</td>\n          <td>210.9</td>\n          <td>244</td>\n        </tr>\n        <tr>\n          <td>236</td>\n          <td>224.2</td>\n          <td>260</td>\n        </tr>\n        <tr>\n          <td>252</td>\n          <td>239.4</td>\n          <td>276</td>\n        </tr>\n        <tr>\n          <td>268</td>\n          <td>254.6</td>\n          <td>296</td>\n        </tr>\n        <tr>\n          <td>284</td>\n          <td>269.8</td>\n          <td>312</td>\n        </tr>\n        <tr>\n          <td>300</td>\n          <td>285</td>\n          <td>330</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</Column>\n</Row>\n\n### Type tester\n\nWe’ve included a type tester so you can play with Plex® and explore the type scale in all styles, weights and languages. The typeface really comes to life once it’s set in words or paragraphs, so feel free to type away. You can select the weight and scale in the dropdowns. For Plex Chinese, Japanese, Korean, Thai, Devanagari and Arabic, the type scale has been adjusted to 95% of the default size while keeping the same line height.\n\n<TypeTesterSelect />\n\n## Large formats\n\nThe size of an artboard and the viewing distance influence how we perceive type. The larger and further away an asset is, the smaller the type appears. To counter this effect, we use a multiplication factor in our type scales for large formats that are to be viewed from a distance. Using this principle, the mini unit is also multiplied depending on the same factors—see the [Grid page](/2x-grid#base-unit) for more information. Note that these rules are valid as long as you are creating an asset at 100%. Extra scaling applies if you are designing at a different scale than 1:1.\n\n#### Print\n\nFor print, the type scales were created for handheld print. When creating posters, signage and roll-up banners, depending on the viewing distance and size of the artboard, a multiplication factor should be used for both the point size and the line height. For example, for large posters and small signage such as easel signs, use 4x. For human-scale print experiences, such as roll-up banners and larger signage, use 8x. For print experiences viewed from across the street, use 32x.\n\n#### Digital\n\nDigital assets are created at a certain pixel size and often enlarged to be projected on larger screens. When creating assets on artboards up to 4K, use our type scales as given. However, when creating layouts directly at larger resolutions or on larger artboards, use a multiplication factor. For example, when creating designs at 8K, use 4x the type scales; when creating at 16K, use 8x, and so on.\n\n<ArtDirection>\n\n![Type scale multiplication](images/04_IDL_Typescale_Multiplication_mobile.svg)\n\n![Type scale multiplication](images/04_IDL_Typescale_Multiplication.svg)\n\n</ArtDirection>\n\n#### Large formats type scale\n\nThere’s no need for you to do the math—we’ve provided the type scale for large formats shown here. Keep in mind the suggestion to decrease the size to 95% for Chinese, Japanese, Korean, Thai, Devanagari and Arabic to account for the specifics of those alphabets. Review [Adjusted scale](#adjusted-scale) for more information.\n\n<Tabs>\n  <Tab label=\"1x\">\n\n  <Row>\n  <Column colMd={4} colMd={8} colLg={12} noGutterSm>\n  <div class=\"bx--col-lg-12 bx--col-no-gutter\">\n    <div className=\"table-header\">\n      <div className=\"itens aligment-adjuster\">\n        <p><strong>Default scale</strong><br /> \n        Latin, Cyrillic, Hebrew, Greek</p>\n      </div>\n      <div className=\"itens\">\n        <p style={{marginLeft: '0.5rem'}}><strong>Adjusted scale (95%)</strong><br />Chinese, Japanese, Korean, Thai, Devanagari, Arabic</p>\n      </div>\n      <div className=\"itens\">\n        <p style={{marginLeft: '1rem'}} ><strong>Line height</strong></p>\n      </div>\n    </div>\n    <div className=\"bx--col-lg-12 bx--col-no-gutter table-container\">\n      <table>\n      <thead>\n        <tr>\n        </tr>\n      </thead>\n      <tbody>\n        <tr>\n          <td>6</td>\n          <td>5.7</td>\n          <td>8</td>\n        </tr>\n        <tr>\n          <td>7</td>\n          <td>6.65</td>\n          <td>9</td>\n        </tr>\n        <tr>\n          <td>9</td>\n          <td>8.55</td>\n          <td>12</td>\n        </tr>\n        <tr>\n          <td>12</td>\n          <td>11.4</td>\n          <td>16</td>\n        </tr>\n        <tr>\n          <td rowSpan={2}>14</td>\n          <td rowSpan={2}>13.3</td>\n          <td>18</td>\n        </tr>\n        <tr>\n          <td>20</td>\n        </tr>\n        <tr>\n          <td rowSpan={2}>16</td>\n          <td rowSpan={2}>15.2</td>\n          <td>22</td>\n        </tr>\n        <tr>\n          <td>24</td>\n        </tr>\n        <tr>\n          <td>18</td>\n          <td>17.1</td>\n          <td>24</td>\n        </tr>\n        <tr>\n          <td rowSpan={2}>20</td>\n          <td rowSpan={2}>19</td>\n          <td>26</td>\n        </tr>\n        <tr>\n          <td>28</td>\n        </tr>\n        <tr>\n          <td rowSpan={2}>24</td>\n          <td rowSpan={2}>22.8</td>\n          <td>28</td>\n        </tr>\n        <tr>\n          <td>30</td>\n        </tr>\n        <tr>\n          <td>28</td>\n          <td>26.6</td>\n          <td>36</td>\n        </tr>\n        <tr>\n          <td>32</td>\n          <td>30.4</td>\n          <td>40</td>\n        </tr>\n        <tr>\n          <td>36</td>\n          <td>34.2</td>\n          <td>44</td>\n        </tr>\n        <tr>\n          <td>42</td>\n          <td>39.9</td>\n          <td>50</td>\n        </tr>\n        <tr>\n          <td>48</td>\n          <td>45.6</td>\n          <td>56</td>\n        </tr>\n        <tr>\n          <td>54</td>\n          <td>51.3</td>\n          <td>64</td>\n        </tr>\n        <tr>\n          <td>60</td>\n          <td>57</td>\n          <td>70</td>\n        </tr>\n        <tr>\n          <td>68</td>\n          <td>64.6</td>\n          <td>78</td>\n        </tr>\n        <tr>\n          <td>76</td>\n          <td>72.2</td>\n          <td>86</td>\n        </tr>\n        <tr>\n          <td>84</td>\n          <td>79.8</td>\n          <td>94</td>\n        </tr>\n        <tr>\n          <td>92</td>\n          <td>87.4</td>\n          <td>102</td>\n        </tr>\n        <tr>\n          <td>102</td>\n          <td>96.9</td>\n          <td>114</td>\n        </tr>\n        <tr>\n          <td>112</td>\n          <td>106.4</td>\n          <td>124</td>\n        </tr>\n        <tr>\n          <td>122</td>\n          <td>115.9</td>\n          <td>130</td>\n        </tr>\n        <tr>\n          <td>132</td>\n          <td>125.4</td>\n          <td>146</td>\n        </tr>\n        <tr>\n          <td>144</td>\n          <td>136.8</td>\n          <td>160</td>\n        </tr>\n        <tr>\n          <td>156</td>\n          <td>148.2</td>\n          <td>164</td>\n        </tr>\n        <tr>\n          <td>168</td>\n          <td>159.6</td>\n          <td>186</td>\n        </tr>\n        <tr>\n          <td>180</td>\n          <td>171</td>\n          <td>200</td>\n        </tr>\n        <tr>\n          <td>194</td>\n          <td>184.3</td>\n          <td>216</td>\n        </tr>\n        <tr>\n          <td>208</td>\n          <td>197.6</td>\n          <td>228</td>\n        </tr>\n        <tr>\n          <td>222</td>\n          <td>210.9</td>\n          <td>244</td>\n        </tr>\n        <tr>\n          <td>236</td>\n          <td>224.2</td>\n          <td>260</td>\n        </tr>\n        <tr>\n          <td>252</td>\n          <td>239.4</td>\n          <td>276</td>\n        </tr>\n        <tr>\n          <td>268</td>\n          <td>254.6</td>\n          <td>296</td>\n        </tr>\n        <tr>\n          <td>284</td>\n          <td>269.8</td>\n          <td>312</td>\n        </tr>\n        <tr>\n          <td>300</td>\n          <td>285</td>\n          <td>330</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n  </div>\n   </Column>\n  </Row>\n\n  </Tab>\n  <Tab label=\"4x\">\n\n  <Row>\n  <Column colMd={4} colMd={8} colLg={12} noGutterSm>\n  <div class=\"bx--col-lg-12 bx--col-no-gutter\">\n    <div className=\"table-header\">\n      <div className=\"itens aligment-adjuster\">\n        <p><strong>Default scale</strong><br /> \n        Latin, Cyrillic, Hebrew, Greek</p>\n      </div>\n      <div className=\"itens\">\n        <p style={{marginLeft: '0.5rem'}}><strong>Adjusted scale (95%)</strong><br />Chinese, Japanese, Korean, Thai, Devanagari, Arabic</p>\n      </div>\n      <div className=\"itens\">\n        <p style={{marginLeft: '1rem'}} ><strong>Line height</strong></p>\n      </div>\n    </div>\n    <div className=\"bx--col-lg-12 bx--col-no-gutter table-container\">\n    <table>\n      <thead>\n        <tr>\n        </tr>\n      </thead>\n      <tbody>\n        <tr>\n          <td>24</td>\n          <td>22.8</td>\n          <td>32</td>\n        </tr>\n        <tr>\n          <td>28</td>\n          <td>26.6</td>\n          <td>36</td>\n        </tr>\n        <tr>\n          <td>36</td>\n          <td>34.2</td>\n          <td>48</td>\n        </tr>\n        <tr>\n          <td>48</td>\n          <td>45.6</td>\n          <td>64</td>\n        </tr>\n        <tr>\n          <td rowSpan={2}>56</td>\n          <td rowSpan={2}>53.2</td>\n          <td>72</td>\n        </tr>\n        <tr>\n          <td>80</td>\n        </tr>\n        <tr>\n          <td rowSpan={2}>64</td>\n          <td rowSpan={2}>60.8</td>\n          <td>88</td>\n        </tr>\n        <tr>\n          <td>96</td>\n        </tr>\n        <tr>\n          <td>72</td>\n          <td>68.4</td>\n          <td>96</td>\n        </tr>\n        <tr>\n          <td rowSpan={2}>80</td>\n          <td rowSpan={2}>76</td>\n          <td>104</td>\n        </tr>\n        <tr>\n          <td>112</td>\n        </tr>\n        <tr>\n          <td rowSpan={2}>96</td>\n          <td rowSpan={2}>91.2</td>\n          <td>112</td>\n        </tr>\n        <tr>\n          <td>120</td>\n        </tr>\n        <tr>\n          <td>112</td>\n          <td>106.4</td>\n          <td>144</td>\n        </tr>\n        <tr>\n          <td>128</td>\n          <td>121.6</td>\n          <td>160</td>\n        </tr>\n        <tr>\n          <td>144</td>\n          <td>136.8</td>\n          <td>176</td>\n        </tr>\n        <tr>\n          <td>168</td>\n          <td>159.6</td>\n          <td>200</td>\n        </tr>\n        <tr>\n          <td>192</td>\n          <td>182.4</td>\n          <td>224</td>\n        </tr>\n        <tr>\n          <td>216</td>\n          <td>205.2</td>\n          <td>256</td>\n        </tr>\n        <tr>\n          <td>240</td>\n          <td>228</td>\n          <td>280</td>\n        </tr>\n        <tr>\n          <td>272</td>\n          <td>258.4</td>\n          <td>312</td>\n        </tr>\n        <tr>\n          <td>304</td>\n          <td>288.8</td>\n          <td>344</td>\n        </tr>\n        <tr>\n          <td>336</td>\n          <td>319.2</td>\n          <td>376</td>\n        </tr>\n        <tr>\n          <td>368</td>\n          <td>349.6</td>\n          <td>408</td>\n        </tr>\n        <tr>\n          <td>408</td>\n          <td>387.6</td>\n          <td>456</td>\n        </tr>\n        <tr>\n          <td>448</td>\n          <td>425.6</td>\n          <td>496</td>\n        </tr>\n        <tr>\n          <td>488</td>\n          <td>463.6</td>\n          <td>520</td>\n        </tr>\n        <tr>\n          <td>528</td>\n          <td>501.6</td>\n          <td>584</td>\n        </tr>\n        <tr>\n          <td>576</td>\n          <td>547.2</td>\n          <td>640</td>\n        </tr>\n        <tr>\n          <td>624</td>\n          <td>592.8</td>\n          <td>656</td>\n        </tr>\n        <tr>\n          <td>672</td>\n          <td>638.4</td>\n          <td>744</td>\n        </tr>\n        <tr>\n          <td>720</td>\n          <td>684</td>\n          <td>800</td>\n        </tr>\n        <tr>\n          <td>776</td>\n          <td>737.2</td>\n          <td>864</td>\n        </tr>\n        <tr>\n          <td>832</td>\n          <td>790.4</td>\n          <td>912</td>\n        </tr>\n        <tr>\n          <td>888</td>\n          <td>843.6</td>\n          <td>976</td>\n        </tr>\n        <tr>\n          <td>944</td>\n          <td>896.8</td>\n          <td>1040</td>\n        </tr>\n        <tr>\n          <td>1008</td>\n          <td>957.6</td>\n          <td>1104</td>\n        </tr>\n        <tr>\n          <td>1072</td>\n          <td>1018.4</td>\n          <td>1184</td>\n        </tr>\n        <tr>\n          <td>1072</td>\n          <td>1018.4</td>\n          <td>1184</td>\n        </tr>\n        <tr>\n          <td>1136</td>\n          <td>1079.2</td>\n          <td>1248</td>\n        </tr>\n        <tr>\n          <td>1200</td>\n          <td>1140</td>\n          <td>1320</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n  </div>\n   </Column>\n  </Row>\n\n  </Tab>\n  <Tab label=\"8x\">\n\n  <Row>\n  <Column colMd={4} colMd={8} colLg={12} noGutterSm>\n  <div class=\"bx--col-lg-12 bx--col-no-gutter\">\n    <div className=\"table-header\">\n      <div className=\"itens aligment-adjuster\">\n        <p><strong>Default scale</strong><br /> \n        Latin, Cyrillic, Hebrew, Greek</p>\n      </div>\n      <div className=\"itens\">\n        <p style={{marginLeft: '0.5rem'}}><strong>Adjusted scale (95%)</strong><br />Chinese, Japanese, Korean, Thai, Devanagari, Arabic</p>\n      </div>\n      <div className=\"itens\">\n        <p style={{marginLeft: '1rem'}}><strong>Line height</strong></p>\n      </div>\n    </div>\n    <div className=\"bx--col-lg-12 bx--col-no-gutter table-container\">\n    <table>\n      <thead>\n        <tr>\n        </tr>\n      </thead>\n      <tbody>\n        <tr>\n          <td>48</td>\n          <td>45.6</td>\n          <td>64</td>\n        </tr>\n        <tr>\n          <td>56</td>\n          <td>53.2</td>\n          <td>72</td>\n        </tr>\n        <tr>\n          <td>72</td>\n          <td>68.4</td>\n          <td>96</td>\n        </tr>\n        <tr>\n          <td>96</td>\n          <td>91.2</td>\n          <td>128</td>\n        </tr>\n        <tr>\n          <td rowSpan={2}>112</td>\n          <td rowSpan={2}>106.4</td>\n          <td>144</td>\n        </tr>\n        <tr>\n          <td>160</td>\n        </tr>\n        <tr>\n          <td rowSpan={2}>128</td>\n          <td rowSpan={2}>121.6</td>\n          <td>176</td>\n        </tr>\n        <tr>\n          <td>192</td>\n        </tr>\n        <tr>\n          <td>144</td>\n          <td>136.8</td>\n          <td>192</td>\n        </tr>\n        <tr>\n          <td rowSpan={2}>160</td>\n          <td rowSpan={2}>152</td>\n          <td>208</td>\n        </tr>\n        <tr>\n          <td>224</td>\n        </tr>\n        <tr>\n          <td rowSpan={2}>192</td>\n          <td rowSpan={2}>182.4</td>\n          <td>224</td>\n        </tr>\n        <tr>\n          <td>240</td>\n        </tr>\n        <tr>\n          <td>224</td>\n          <td>212.8</td>\n          <td>288</td>\n        </tr>\n        <tr>\n          <td>256</td>\n          <td>243.2</td>\n          <td>320</td>\n        </tr>\n        <tr>\n          <td>288</td>\n          <td>273.6</td>\n          <td>352</td>\n        </tr>\n        <tr>\n          <td>336</td>\n          <td>319.2</td>\n          <td>400</td>\n        </tr>\n        <tr>\n          <td>384</td>\n          <td>364.8</td>\n          <td>448</td>\n        </tr>\n        <tr>\n          <td>432</td>\n          <td>410.4</td>\n          <td>512</td>\n        </tr>\n        <tr>\n          <td>480</td>\n          <td>456</td>\n          <td>560</td>\n        </tr>\n        <tr>\n          <td>544</td>\n          <td>516.8</td>\n          <td>624</td>\n        </tr>\n        <tr>\n          <td>608</td>\n          <td>577.6</td>\n          <td>688</td>\n        </tr>\n        <tr>\n          <td>672</td>\n          <td>638.4</td>\n          <td>752</td>\n        </tr>\n        <tr>\n          <td>736</td>\n          <td>699.2</td>\n          <td>816</td>\n        </tr>\n        <tr>\n          <td>816</td>\n          <td>775.2</td>\n          <td>912</td>\n        </tr>\n        <tr>\n          <td>896</td>\n          <td>851.2</td>\n          <td>992</td>\n        </tr>\n        <tr>\n          <td>976</td>\n          <td>927.2</td>\n          <td>1040</td>\n        </tr>\n        <tr>\n          <td>1056</td>\n          <td>1003.2</td>\n          <td>1168</td>\n        </tr>\n        <tr>\n          <td>1152</td>\n          <td>1094.4</td>\n          <td>1280</td>\n        </tr>\n        <tr>\n          <td>1248</td>\n          <td>1185.6</td>\n          <td>1312</td>\n        </tr>\n        <tr>\n          <td>1344</td>\n          <td>1276.8</td>\n          <td>1488</td>\n        </tr>\n        <tr>\n          <td>1440</td>\n          <td>1368</td>\n          <td>1600</td>\n        </tr>\n        <tr>\n          <td>1552</td>\n          <td>1474.4</td>\n          <td>1728</td>\n        </tr>\n        <tr>\n          <td>1664</td>\n          <td>1580.8</td>\n          <td>1824</td>\n        </tr>\n        <tr>\n          <td>1776</td>\n          <td>1687.2</td>\n          <td>1952</td>\n        </tr>\n        <tr>\n          <td>1888</td>\n          <td>1793.6</td>\n          <td>2080</td>\n        </tr>\n        <tr>\n          <td>2016</td>\n          <td>1915.2</td>\n          <td>2208</td>\n        </tr>\n        <tr>\n          <td>2144</td>\n          <td>2036.8</td>\n          <td>2368</td>\n        </tr>\n        <tr>\n          <td>2272</td>\n          <td>2158.4</td>\n          <td>2496</td>\n        </tr>\n        <tr>\n          <td>2400</td>\n          <td>2280</td>\n          <td>2640</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n  </div>\n   </Column>\n  </Row>\n\n  </Tab>\n</Tabs>\n\n## Resources\n\nIBM has established a universal type scale, containing a wide range of sizes. When designing, it’s important to use a curated type set for each specific use case. Embedded within many of our templates are various curated type sets, all part of IBM’s universal type scale. For example, you’ll want to use the Carbon type sets for product and web experiences, and use the collateral type sets for handheld print and corresponding PDFs, and so on.\n\n<Row className=\"resource-card-group\">\n<Column colMd={4} colLg={4} noGutterSm>\n  <ResourceCard\n    subTitle=\"IBM Plex® typeface latest release\"\n    aspectRatio=\"2:1\"\n    href=\"https://github.com/IBM/plex/releases/latest\"\n    >\n\n![github icon](../../images/resource-cards/github.png)\n\n  </ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n  <ResourceCard\n    subTitle=\"Carbon type set\"\n    aspectRatio=\"2:1\"         \n    href=\"https://carbondesignsystem.com/elements/typography/type-sets\"\n    >\n\n![carbon icon](../../images/resource-cards/carbon.png)\n\n  </ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n  <ResourceCard\n    subTitle=\"Carbon v11 type set (Figma library)\"\n    aspectRatio=\"2:1\"\n    href=\"https://www.figma.com/file/rK06GY6bvEfokuzrFGdtWB/(v11)-Text-Styles---IBM-Design-Language?node-id=129%3A2\"\n    >\n\n![figma icon](../../images/resource-cards/figma.png)\n\n  </ResourceCard>\n</Column>\n</Row>\n","fileAbsolutePath":"/home/runner/work/design-language-website/design-language-website/src/pages/typography/type-scale.mdx"}}},
    "staticQueryHashes": ["1364590287","137577622","2102389209","2456312558","2746626797","2881613939","3037994772","768070550"]}