{"componentChunkName":"component---src-pages-guidelines-typography-productive-mdx","path":"/guidelines/typography/productive/","webpackCompilationHash":"9ffd1cb8ca3b610e9ad3","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"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/productive.mdx","titleType":"prepend","MdxNode":{"id":"ec01a560-442f-5edf-bddc-55fafd68f29e","children":[],"parent":"bd442868-fc98-56c7-8524-282d5fe5426e","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## IBM Productive type set\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.\n\nThe Productive 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\nEven though IBM Plex contains a wide range of scales, it’s important to use curated sets below for their specified purpose. For consistent, reliable performance across various screen sizes, do not use fluid type in components or in product UI.\n\n<TypesetStyle\n  breakpointControls={false}\n  typesets=\"supportingStyles,body,fixedHeadings\"\n/>\n","type":"Mdx","contentDigest":"ae6a2f568108f2070694e7742eff528c","counter":1422,"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## IBM Productive type set\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.\n\nThe Productive 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\nEven though IBM Plex contains a wide range of scales, it’s important to use curated sets below for their specified purpose. For consistent, reliable performance across various screen sizes, do not use fluid type in components or in product UI.\n\n<TypesetStyle\n  breakpointControls={false}\n  typesets=\"supportingStyles,body,fixedHeadings\"\n/>\n","fileAbsolutePath":"/fargate/7b444b50/src/pages/guidelines/typography/productive.mdx"}}}}