{"componentChunkName":"component---src-pages-guidelines-typography-expressive-mdx","path":"/guidelines/typography/expressive/","result":{"pageContext":{"frontmatter":{"label":"When used properly, typography can help create clear hierarchies, organize information, and guide users through the 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/expressive.mdx","titleType":"prepend","MdxNode":{"id":"1bdc84a9-a19c-5643-b122-14bd8ef65a14","children":[],"parent":"021332dc-d499-5c9f-8584-955f93d085b2","internal":{"content":"---\nlabel: When used properly, typography can help create clear hierarchies, organize information, and guide users through the 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 TypesetStyle from 'components/TypesetStyle';\n\n## Expressive type sets\n\nExpressive type is reserved for use in editorial and digital marketing experiences which may require more dynamic typographic hierarchies and more variety in the Heading scale. The Expressive styles are curated to create a series of clear user expectations while still allowing for a more dramatic, graphic use of type.\n\nThe Expressive styles below introduce the new IBM Design Language tokens. 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<TypesetStyle breakpointControls={false} typesets=\"supportingStyle,body\" />\n\n## Fluid type sets\n\nFluid type is applied to large headline and display type styles. We set up fixed type scales at the breakpoints and are fluid in between. This helps us to maintain the quality of typography. Display styles are reserved only for graphic/visual elements. These should be used sparingly and thoughtfully within a user journey. It is not suitable for complex messaging, does not need to appear on every page.\n\n<TypesetStyle\n  breakpointControls={true}\n  typesets=\"headings,paragraphsAndQuotes,display\"\n/>\n","type":"Mdx","contentDigest":"f26eec1e980ee7386f04ee3d7724a25f","counter":1664,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Typography","label":"When used properly, typography can help create clear hierarchies, organize information, and guide users through the 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: When used properly, typography can help create clear hierarchies, organize information, and guide users through the 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 TypesetStyle from 'components/TypesetStyle';\n\n## Expressive type sets\n\nExpressive type is reserved for use in editorial and digital marketing experiences which may require more dynamic typographic hierarchies and more variety in the Heading scale. The Expressive styles are curated to create a series of clear user expectations while still allowing for a more dramatic, graphic use of type.\n\nThe Expressive styles below introduce the new IBM Design Language tokens. 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<TypesetStyle breakpointControls={false} typesets=\"supportingStyle,body\" />\n\n## Fluid type sets\n\nFluid type is applied to large headline and display type styles. We set up fixed type scales at the breakpoints and are fluid in between. This helps us to maintain the quality of typography. Display styles are reserved only for graphic/visual elements. These should be used sparingly and thoughtfully within a user journey. It is not suitable for complex messaging, does not need to appear on every page.\n\n<TypesetStyle\n  breakpointControls={true}\n  typesets=\"headings,paragraphsAndQuotes,display\"\n/>\n","fileAbsolutePath":"/zeit/1dde86ed/src/pages/guidelines/typography/expressive.mdx"}}}}