{"componentChunkName":"component---src-pages-guidelines-typography-overview-mdx","path":"/guidelines/typography/overview/","result":{"pageContext":{"frontmatter":{"label":"Typography can help create clear hierarchies, organize information, and guide users through a product or experience.","title":"Typography","description":"Typography can help create clear hierarchies, organize information, and guide users through a product or experience.","tabs":["Overview","Productive","Expressive"]},"relativePagePath":"/guidelines/typography/overview.mdx","titleType":"prepend","MdxNode":{"id":"04e2634b-308d-5264-85d1-348c80107ae9","children":[],"parent":"d839ac1d-ae1c-5452-80e1-7678f03e2e70","internal":{"content":"---\nlabel: Typography can help create clear hierarchies, organize information, and guide users through a product or experience.\ntitle: Typography\ndescription: Typography can help create clear hierarchies, organize information, and guide users through a product or experience.\ntabs: ['Overview', 'Productive', 'Expressive']\n---\n\nimport TypeScaleTable from '../../../../src/components/TypeScaleTable';\nimport TypeWeight from '../../../../src/components/TypeWeight';\n\n\n\nTypography can help create clear hierarchies, organize information, and guide\nusers through a product or experience.\n\n\n\n\n\nType tokens and sets\nTypeface: IBM Plex\nScale\nStyle\nType color\n\n\n\n## Resources\n\n\n\n \n\n\n\n \n\n\n \n\n \n\n\n \n\n\n\n \n\n\n \n\n\n\n \n\n
\n\n
\n\n
\n\n## Type tokens and sets\n\nCarbon uses type tokens and themes to manage typography. Type tokens are pre-set configurations of typographic elements such as font size, weight, or leading (line height) that are specifically calibrated for use alongside [IBM Plex](http://ibm.com/plex) in product. Selecting the appropriate type style is determined by layout or template structure. Layouts may have several levels of architecture or areas that require varying typographic hierarchies.\n\n### Productive vs. Expressive type sets\n\nProductive type is reserved for use in web-based product design, where the user needs to focus on tasks. The Productive styles are curated to create a series of clear user expectations about hierarchy. Expressive type, on the other hand, allows for a more dramatic, graphic use of type in editorial and marketing design — which many users would find distracting in product.\n\nThere are two heading sets, one Productive and one Expressive. The difference between the Productive and Expressive styles is mainly evident in the Headings. Aside from the token names, which are specifically calibrated for product vs. editorial designers (e.g. $label-01 vs. $caption-01) — the Supporting and Body styles have the same values in both the Productive and Expressive sets.\n\n## Typeface: IBM Plex\n\nCarbon uses the open-source typeface **IBM Plex**. It has been carefully designed to meet IBM's needs as a global technology company and reflect IBM's spirit, beliefs, and design principles. IBM Plex can be accessed and downloaded from the [Plex GitHub Repo](https://github.com/ibm/plex).\n\n\n\n### Sans-serif font stack\n\n```scss\nfont-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;\n```\n\n### Serif font stack\n\n```scss\nfont-family: 'IBM Plex Serif', 'Georgia', Times, serif;\n```\n\n### Mono font stack\n\n```scss\nfont-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono',\n 'Bitstream Vera Sans Mono', Courier, monospace;\n```\n\n## Scale\n\nThe IBM type scale is built on a single equation. The formula for our scale was created to provide hierarchy for all types of experiences. The formula assumes that y₀=12 px:\n\n\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## Style\n\nTypography creates purposeful texture, guiding users to read and understand the hierarchy of information. The right typographic treatment and the controlled usage of type styles helps manage the display of content, keeping it useful, simple, and effective.\n\n### Weights\n\nFont weight is an important typographic variable that can add emphasis and differentiate content hierarchy. Font weight and size pairings must be carefully balanced. A bold weight will always have more emphasis than a lighter weight font of the same size. However, a lighter weight font can rank hierarchically higher than a bold font if the lighter weight type size is significantly larger than the bold one.\n\nWe suggest using IBM Plex Light, Regular, and SemiBold for digital experiences. The semibold weight is ideal for section headers, but should not be used for long text.\n\n\n\n### Italic\n\nEach weight has an italic style, which should only be used when you need to emphasize certain words in a sentence (titles of works, technical terms, names of devices, captions, etc.).\n\n\n\n## Type color\n\nType color should be carefully considered, with legibility and accessibility as paramount concerns. Keep type color neutral in running text. Use primary blue for primary actions.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","type":"Mdx","contentDigest":"a0c4494665457396198f66c2b50914cf","counter":1671,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Typography","label":"Typography can help create clear hierarchies, organize information, and guide users through a product or experience.","description":"Typography can help create clear hierarchies, organize information, and guide users through a product or experience.","tabs":["Overview","Productive","Expressive"]},"exports":{},"rawBody":"---\nlabel: Typography can help create clear hierarchies, organize information, and guide users through a product or experience.\ntitle: Typography\ndescription: Typography can help create clear hierarchies, organize information, and guide users through a product or experience.\ntabs: ['Overview', 'Productive', 'Expressive']\n---\n\nimport TypeScaleTable from '../../../../src/components/TypeScaleTable';\nimport TypeWeight from '../../../../src/components/TypeWeight';\n\n\n\nTypography can help create clear hierarchies, organize information, and guide\nusers through a product or experience.\n\n\n\n\n\nType tokens and sets\nTypeface: IBM Plex\nScale\nStyle\nType color\n\n\n\n## Resources\n\n\n\n \n\n\n\n \n\n\n \n\n \n\n\n \n\n\n\n \n\n\n \n\n\n\n \n\n
\n\n
\n\n
\n\n## Type tokens and sets\n\nCarbon uses type tokens and themes to manage typography. Type tokens are pre-set configurations of typographic elements such as font size, weight, or leading (line height) that are specifically calibrated for use alongside [IBM Plex](http://ibm.com/plex) in product. Selecting the appropriate type style is determined by layout or template structure. Layouts may have several levels of architecture or areas that require varying typographic hierarchies.\n\n### Productive vs. Expressive type sets\n\nProductive type is reserved for use in web-based product design, where the user needs to focus on tasks. The Productive styles are curated to create a series of clear user expectations about hierarchy. Expressive type, on the other hand, allows for a more dramatic, graphic use of type in editorial and marketing design — which many users would find distracting in product.\n\nThere are two heading sets, one Productive and one Expressive. The difference between the Productive and Expressive styles is mainly evident in the Headings. Aside from the token names, which are specifically calibrated for product vs. editorial designers (e.g. $label-01 vs. $caption-01) — the Supporting and Body styles have the same values in both the Productive and Expressive sets.\n\n## Typeface: IBM Plex\n\nCarbon uses the open-source typeface **IBM Plex**. It has been carefully designed to meet IBM's needs as a global technology company and reflect IBM's spirit, beliefs, and design principles. IBM Plex can be accessed and downloaded from the [Plex GitHub Repo](https://github.com/ibm/plex).\n\n\n\n### Sans-serif font stack\n\n```scss\nfont-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;\n```\n\n### Serif font stack\n\n```scss\nfont-family: 'IBM Plex Serif', 'Georgia', Times, serif;\n```\n\n### Mono font stack\n\n```scss\nfont-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono',\n 'Bitstream Vera Sans Mono', Courier, monospace;\n```\n\n## Scale\n\nThe IBM type scale is built on a single equation. The formula for our scale was created to provide hierarchy for all types of experiences. The formula assumes that y₀=12 px:\n\n\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## Style\n\nTypography creates purposeful texture, guiding users to read and understand the hierarchy of information. The right typographic treatment and the controlled usage of type styles helps manage the display of content, keeping it useful, simple, and effective.\n\n### Weights\n\nFont weight is an important typographic variable that can add emphasis and differentiate content hierarchy. Font weight and size pairings must be carefully balanced. A bold weight will always have more emphasis than a lighter weight font of the same size. However, a lighter weight font can rank hierarchically higher than a bold font if the lighter weight type size is significantly larger than the bold one.\n\nWe suggest using IBM Plex Light, Regular, and SemiBold for digital experiences. The semibold weight is ideal for section headers, but should not be used for long text.\n\n\n\n### Italic\n\nEach weight has an italic style, which should only be used when you need to emphasize certain words in a sentence (titles of works, technical terms, names of devices, captions, etc.).\n\n\n\n## Type color\n\nType color should be carefully considered, with legibility and accessibility as paramount concerns. Keep type color neutral in running text. Use primary blue for primary actions.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","fileAbsolutePath":"/zeit/3f757860/src/pages/guidelines/typography/overview.mdx"}}}}