# Typescale Typography utilities provide a comprehensive set of font sizes, weights, and line heights for consistent text styling. **Category:** Utilities **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-typescale--introduction ## Variants documented in Storybook - TypescaleShowcase: https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-typescale--typescaleshowcase ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Typescale. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Introduction — Introduction HTML: ```html
Utilities

Typescale Showcase

Detailed reference of typography utilities covering all standard font sizes and weights in the design system.

Comprehensive CSS Class Reference

Every class from the utility library, categorized for easy access.

Display Styles

Format: ux4g-{heading/body}-{size}

Display Large Default ux4g-display-l-default
Display Medium Default ux4g-display-m-default
Display Small Default ux4g-display-s-default
Display Extra Small Default ux4g-display-xs-default

Heading Styles

Format: ux4g-{heading/body}-{size}

Heading 2XL Default ux4g-heading-2xl-default
Heading XL Default ux4g-heading-xl-default
Heading L Default ux4g-heading-l-default
Heading M Default ux4g-heading-m-default
Heading S Default ux4g-heading-s-default
Heading XS Default ux4g-heading-xs-default

Body Styles

Format: ux4g-{heading/body}-{size}

Body Large Default ux4g-body-l-default
Body Medium Default ux4g-body-m-default
Body Small Default ux4g-body-s-default
Body Extra Small Default ux4g-body-xs-default

Label Styles

Format: ux4g-{heading/body}-{size}

Label Extra Large Default ux4g-label-xl-default
Label Large Default ux4g-label-l-default
Label Medium Default ux4g-label-m-default
Label Small Default ux4g-label-s-default
``` React: ```jsx import React from 'react'; const TypescaleExample1Demo = () => ( <>
Utilities

Typescale Showcase

Detailed reference of typography utilities covering all standard font sizes and weights in the design system.

Comprehensive CSS Class Reference

Every class from the utility library, categorized for easy access.

{/* Display */}

Display Styles

Format: ux4g-{heading/body}-{size}

Display Large Default ux4g-display-l-default
Display Medium Default ux4g-display-m-default
Display Small Default ux4g-display-s-default
Display Extra Small Default ux4g-display-xs-default
{/* Heading */}

Heading Styles

Format: ux4g-{heading/body}-{size}

Heading 2XL Default ux4g-heading-2xl-default
Heading XL Default ux4g-heading-xl-default
Heading L Default ux4g-heading-l-default
Heading M Default ux4g-heading-m-default
Heading S Default ux4g-heading-s-default
Heading XS Default ux4g-heading-xs-default
{/* Body */}

Body Styles

Format: ux4g-{heading/body}-{size}

Body Large Default ux4g-body-l-default
Body Medium Default ux4g-body-m-default
Body Small Default ux4g-body-s-default
Body Extra Small Default ux4g-body-xs-default
{/* Label / Strong Variants */}

Label Styles

Format: ux4g-{heading/body}-{size}

Label Extra Large Default ux4g-label-xl-default
Label Large Default ux4g-label-l-default
Label Medium Default ux4g-label-m-default
Label Small Default ux4g-label-s-default
); export default TypescaleExample1Demo; ``` Angular: ```html
Utilities

Typescale Showcase

Detailed reference of typography utilities covering all standard font sizes and weights in the design system.

Comprehensive CSS Class Reference

Every class from the utility library, categorized for easy access.

Display Styles

Format: ux4g-{heading/body}-{size}

Display Large Default ux4g-display-l-default
Display Medium Default ux4g-display-m-default
Display Small Default ux4g-display-s-default
Display Extra Small Default ux4g-display-xs-default

Heading Styles

Format: ux4g-{heading/body}-{size}

Heading 2XL Default ux4g-heading-2xl-default
Heading XL Default ux4g-heading-xl-default
Heading L Default ux4g-heading-l-default
Heading M Default ux4g-heading-m-default
Heading S Default ux4g-heading-s-default
Heading XS Default ux4g-heading-xs-default

Body Styles

Format: ux4g-{heading/body}-{size}

Body Large Default ux4g-body-l-default
Body Medium Default ux4g-body-m-default
Body Small Default ux4g-body-s-default
Body Extra Small Default ux4g-body-xs-default

Label Styles

Format: ux4g-{heading/body}-{size}

Label Extra Large Default ux4g-label-xl-default
Label Large Default ux4g-label-l-default
Label Medium Default ux4g-label-m-default
Label Small Default ux4g-label-s-default
``` ### 2. Typescale Showcase — Display Styles HTML: ```html
Display Large Default
Display Large Strong
Display Medium Default
Display Medium Strong
Display Small Default
Display Small Strong
Display Extra Small Default
Display Extra Small Strong
``` React: ```jsx import React from 'react'; const TypescaleExample2Demo = () => ( <>
Display Large Default
Display Large Strong
Display Medium Default
Display Medium Strong
Display Small Default
Display Small Strong
Display Extra Small Default
Display Extra Small Strong
); export default TypescaleExample2Demo; ``` Angular: ```html
Display Large Default
Display Large Strong
Display Medium Default
Display Medium Strong
Display Small Default
Display Small Strong
Display Extra Small Default
Display Extra Small Strong
``` ### 3. Typescale Showcase — Heading Styles HTML: ```html
Heading 2XL Default
Heading 2XL Strong
Heading XL Default
Heading XL Strong
Heading L Default
Heading L Strong
Heading M Default
Heading M Strong
Heading S Default
Heading S Strong
Heading XS Default
Heading XS Strong
Heading 2XS Default
Heading 2XS Strong
``` React: ```jsx import React from 'react'; const TypescaleExample3Demo = () => ( <>
Heading 2XL Default
Heading 2XL Strong
Heading XL Default
Heading XL Strong
Heading L Default
Heading L Strong
Heading M Default
Heading M Strong
Heading S Default
Heading S Strong
Heading XS Default
Heading XS Strong
Heading 2XS Default
Heading 2XS Strong
); export default TypescaleExample3Demo; ``` Angular: ```html
Heading 2XL Default
Heading 2XL Strong
Heading XL Default
Heading XL Strong
Heading L Default
Heading L Strong
Heading M Default
Heading M Strong
Heading S Default
Heading S Strong
Heading XS Default
Heading XS Strong
Heading 2XS Default
Heading 2XS Strong
``` ### 4. Typescale Showcase — Title Styles HTML: ```html
Title Large Default
Title Large Strong
Title Medium Default
Title Medium Strong
Title Small Default
Title Small Strong
``` React: ```jsx import React from 'react'; const TypescaleExample4Demo = () => ( <>
Title Large Default
Title Large Strong
Title Medium Default
Title Medium Strong
Title Small Default
Title Small Strong
); export default TypescaleExample4Demo; ``` Angular: ```html
Title Large Default
Title Large Strong
Title Medium Default
Title Medium Strong
Title Small Default
Title Small Strong
``` ### 5. Typescale Showcase — Body Styles HTML: ```html
Body Large Default
Body Large Strong
Body Medium Default
Body Medium Strong
Body Small Default
Body Small Strong
Body Extra Small Default
Body Extra Small Strong
``` React: ```jsx import React from 'react'; const TypescaleExample5Demo = () => ( <>
Body Large Default
Body Large Strong
Body Medium Default
Body Medium Strong
Body Small Default
Body Small Strong
Body Extra Small Default
Body Extra Small Strong
); export default TypescaleExample5Demo; ``` Angular: ```html
Body Large Default
Body Large Strong
Body Medium Default
Body Medium Strong
Body Small Default
Body Small Strong
Body Extra Small Default
Body Extra Small Strong
``` ### 6. Typescale Showcase — Label Styles HTML: ```html
Label Extra Large Default
Label Extra Large Strong
Label Large Default
Label Large Strong
Label Medium Default
Label Medium Strong
Label Small Default
Label Small Strong
``` React: ```jsx import React from 'react'; const TypescaleExample6Demo = () => ( <>
Label Extra Large Default
Label Extra Large Strong
Label Large Default
Label Large Strong
Label Medium Default
Label Medium Strong
Label Small Default
Label Small Strong
); export default TypescaleExample6Demo; ``` Angular: ```html
Label Extra Large Default
Label Extra Large Strong
Label Large Default
Label Large Strong
Label Medium Default
Label Medium Strong
Label Small Default
Label Small Strong
``` ## CSS class reference The following CSS partials define the Typescale utility classes used in the examples above: ### typescale.utilities.css ```css .ux4g-text, [class^="ux4g-display-"], [class^="ux4g-heading-"], [class^="ux4g-title-"], [class^="ux4g-body-"], [class^="ux4g-label-"], [class^="ux4g-breadcrumb-"], [class^="ux4g-tab-"] { font-size: var(--ux4g-fs-current); line-height: var(--ux4g-lh-current); font-weight: var(--ux4g-fw-current); font-family: var(--ux4g-ff-current, var(--ux4g-ff)); color: var(--ux4g-text-current, var(--ux4g-text-neutral-primary)); font-style: normal; } :root { --ux4g-text-default-color: var(--ux4g-text-neutral-primary); } /* ===================================================== DISPLAY ===================================================== */ .ux4g-display-l-default, .ux4g-display-l-strong { --ux4g-fs-current: var(--ux4g-fs-60); --ux4g-lh-current: var(--ux4g-lh-80); --ux4g-ff-current: var(--ux4g-ff-display); --ux4g-text-current: var(--ux4g-text-default-color); } .ux4g-display-l-default { --ux4g-fw-current: var(--ux4g-fw-display-semibold); } .ux4g-display-l-strong { --ux4g-fw-current: var(--ux4g-fw-display-bold); } .ux4g-display-m-default, .ux4g-display-m-strong { --ux4g-fs-current: var(--ux4g-fs-52); --ux4g-lh-current: var(--ux4g-lh-72); --ux4g-ff-current: var(--ux4g-ff-display); --ux4g-text-current: var(--ux4g-text-default-color); } .ux4g-display-m-default { --ux4g-fw-current: var(--ux4g-fw-display-semibold); } .ux4g-display-m-strong { --ux4g-fw-current: var(--ux4g-fw-display-bold); } .ux4g-display-s-default, .ux4g-display-s-strong { --ux4g-fs-current: var(--ux4g-fs-40); --ux4g-lh-current: var(--ux4g-lh-52); --ux4g-ff-current: var(--ux4g-ff-display); } .ux4g-display-s-default { --ux4g-fw-current: var(--ux4g-fw-display-semibold); } .ux4g-display-s-strong { --ux4g-fw-current: var(--ux4g-fw-display-bold); } .ux4g-display-xs-default, .ux4g-display-xs-strong { --ux4g-fs-current: var(--ux4g-fs-36); --ux4g-lh-current: var(--ux4g-lh-44); --ux4g-ff-current: var(--ux4g-ff-display); } .ux4g-display-xs-default { --ux4g-fw-current: var(--ux4g-fw-display-semibold); } .ux4g-display-xs-strong { --ux4g-fw-current: var(--ux4g-fw-display-bold); } /* ===================================================== HEADING ===================================================== */ .ux4g-heading-2xl-default, .ux4g-heading-2xl-strong { --ux4g-fs-current: var(--ux4g-fs-40); --ux4g-lh-current: var(--ux4g-lh-44); } .ux4g-heading-2xl-default { --ux4g-fw-current: var(--ux4g-fw-semibold); } .ux4g-heading-2xl-strong { --ux4g-fw-current: var(--ux4g-fw-bold); } .ux4g-heading-xl-default, .ux4g-heading-xl-strong { --ux4g-fs-current: var(--ux4g-fs-32); --ux4g-lh-current: var(--ux4g-lh-36); } .ux4g-heading-xl-default { --ux4g-fw-current: var(--ux4g-fw-semibold); } .ux4g-heading-xl-strong { --ux4g-fw-current: var(--ux4g-fw-bold); } .ux4g-heading-l-default, .ux4g-heading-l-strong { --ux4g-fs-current: var(--ux4g-fs-28); --ux4g-lh-current: var(--ux4g-lh-32); } .ux4g-heading-l-default { --ux4g-fw-current: var(--ux4g-fw-semibold); } .ux4g-heading-l-strong { --ux4g-fw-current: var(--ux4g-fw-bold); } .ux4g-heading-m-default, .ux4g-heading-m-strong { --ux4g-fs-current: var(--ux4g-fs-24); --ux4g-lh-current: var(--ux4g-lh-28); } .ux4g-heading-m-default { --ux4g-fw-current: var(--ux4g-fw-semibold); } .ux4g-heading-m-strong { --ux4g-fw-current: var(--ux4g-fw-bold); } .ux4g-heading-s-default, .ux4g-heading-s-strong { --ux4g-fs-current: var(--ux4g-fs-20); --ux4g-lh-current: var(--ux4g-lh-24); } .ux4g-heading-s-default { --ux4g-fw-current: var(--ux4g-fw-semibold); } .ux4g-heading-s-strong { --ux4g-fw-current: var(--ux4g-fw-bold); } .ux4g-heading-xs-default, .ux4g-heading-xs-strong { --ux4g-fs-current: var(--ux4g-fs-16); --ux4g-lh-current: var(--ux4g-lh-20); } .ux4g-heading-xs-default { --ux4g-fw-current: var(--ux4g-fw-semibold); } .ux4g-heading-xs-strong { --ux4g-fw-current: var(--ux4g-fw-bold); } .ux4g-heading-2xs-default, .ux4g-heading-2xs-strong { --ux4g-fs-current: var(--ux4g-fs-14); --ux4g-lh-current: var(--ux4g-lh-16); } .ux4g-heading-2xs-default { --ux4g-fw-current: var(--ux4g-fw-semibold); } .ux4g-heading-2xs-strong { --ux4g-fw-current: var(--ux4g-fw-bold); } /* ===================================================== TITLE ===================================================== */ .ux4g-title-l-default, .ux4g-title-l-strong { --ux4g-fs-current: var(--ux4g-fs-24); --ux4g-lh-current: var(--ux4g-lh-28); } .ux4g-title-l-default { --ux4g-fw-current: var(--ux4g-fw-semibold); } .ux4g-title-l-strong { --ux4g-fw-current: var(--ux4g-fw-bold); } .ux4g-title-m-default, .ux4g-title-m-strong { --ux4g-fs-current: var(--ux4g-fs-20); --ux4g-lh-current: var(--ux4g-lh-24); } .ux4g-title-m-default { --ux4g-fw-current: var(--ux4g-fw-semibold); } .ux4g-title-m-strong { --ux4g-fw-current: var(--ux4g-fw-bold); } .ux4g-title-s-default, .ux4g-title-s-strong { --ux4g-fs-current: var(--ux4g-fs-16); --ux4g-lh-current: var(--ux4g-lh-20); } .ux4g-title-s-default { --ux4g-fw-current: var(--ux4g-fw-semibold); } .ux4g-title-s-strong { --ux4g-fw-current: var(--ux4g-fw-bold); } /* ===================================================== BODY ===================================================== */ .ux4g-body-l-default, .ux4g-body-l-strong { --ux4g-fs-current: var(--ux4g-fs-18); --ux4g-lh-current: var(--ux4g-lh-24); } .ux4g-body-l-default { --ux4g-fw-current: var(--ux4g-fw-regular); } .ux4g-body-l-strong { --ux4g-fw-current: var(--ux4g-fw-semibold); } .ux4g-body-m-default, .ux4g-body-m-strong { --ux4g-fs-current: var(--ux4g-fs-16); --ux4g-lh-current: var(--ux4g-lh-24); } .ux4g-body-m-default { --ux4g-fw-current: var(--ux4g-fw-regular); } .ux4g-body-m-strong { --ux4g-fw-current: var(--ux4g-fw-semibold); } .ux4g-body-s-default, .ux4g-body-s-strong { --ux4g-fs-current: var(--ux4g-fs-14); --ux4g-lh-current: var(--ux4g-lh-20); } .ux4g-body-s-default { --ux4g-fw-current: var(--ux4g-fw-regular); } .ux4g-body-s-strong { --ux4g-fw-current: var(--ux4g-fw-semibold); } .ux4g-body-xs-default, .ux4g-body-xs-strong { --ux4g-fs-current: var(--ux4g-fs-12); --ux4g-lh-current: var(--ux4g-lh-16); } .ux4g-body-xs-default { --ux4g-fw-current: var(--ux4g-fw-regular); } .ux4g-body-xs-strong { --ux4g-fw-current: var(--ux4g-fw-semibold); } /* ===================================================== LABEL ===================================================== */ .ux4g-label-xl-default, .ux4g-label-xl-strong { --ux4g-fs-current: var(--ux4g-fs-16); --ux4g-lh-current: var(--ux4g-lh-20); } .ux4g-label-xl-default { --ux4g-fw-current: var(--ux4g-fw-medium); } .ux4g-label-xl-strong { --ux4g-fw-current: var(--ux4g-fw-bold); } .ux4g-label-l-default, .ux4g-label-l-strong { --ux4g-fs-current: var(--ux4g-fs-14); --ux4g-lh-current: var(--ux4g-lh-18); } .ux4g-label-l-default { --ux4g-fw-current: var(--ux4g-fw-medium); } .ux4g-label-l-strong { --ux4g-fw-current: var(--ux4g-fw-bold); } .ux4g-label-m-default, .ux4g-label-m-strong { --ux4g-fs-current: var(--ux4g-fs-12); --ux4g-lh-current: var(--ux4g-lh-16); } .ux4g-label-m-default { --ux4g-fw-current: var(--ux4g-fw-medium); } .ux4g-label-m-strong { --ux4g-fw-current: var(--ux4g-fw-bold); } .ux4g-label-s-default, .ux4g-label-s-strong { --ux4g-fs-current: var(--ux4g-fs-11); --ux4g-lh-current: var(--ux4g-lh-14); } .ux4g-label-s-default { --ux4g-fw-current: var(--ux4g-fw-medium); } .ux4g-label-s-strong { --ux4g-fw-current: var(--ux4g-fw-bold); } /* ===================================================== RESPONSIVE LABEL OVERRIDES ===================================================== */ @media (max-width: 768px) { .ux4g-label-m-default { --ux4g-fs-current: var(--ux4g-fs-11); --ux4g-lh-current: var(--ux4g-lh-14); } } ``` ### typography.utilities.css ```css /* ===================================================== 1.0 GLOBAL RESET & BOX MODEL ===================================================== */ *, *::before, *::after { box-sizing: border-box; } /* Base Typography Engines */ [class*="ux4g-fs-"]{font-size:var(--ux4g-fs-current) !important;} [class*="ux4g-lh-"]{line-height:var(--ux4g-lh-current) !important;} /* Font Size (Display + Body Scale) */ .ux4g-fs-60{--ux4g-fs-current:var(--ux4g-fs-60);} .ux4g-fs-52{--ux4g-fs-current:var(--ux4g-fs-52);} .ux4g-fs-40{--ux4g-fs-current:var(--ux4g-fs-40);} .ux4g-fs-36{--ux4g-fs-current:var(--ux4g-fs-36);} .ux4g-fs-32{--ux4g-fs-current:var(--ux4g-fs-32);} .ux4g-fs-28{--ux4g-fs-current:var(--ux4g-fs-28);} .ux4g-fs-24{--ux4g-fs-current:var(--ux4g-fs-24);} .ux4g-fs-20{--ux4g-fs-current:var(--ux4g-fs-20);} .ux4g-fs-18{--ux4g-fs-current:var(--ux4g-fs-18);} .ux4g-fs-16{--ux4g-fs-current:var(--ux4g-fs-16);} .ux4g-fs-14{--ux4g-fs-current:var(--ux4g-fs-14);} .ux4g-fs-12{--ux4g-fs-current:var(--ux4g-fs-12);} .ux4g-fs-11{--ux4g-fs-current:var(--ux4g-fs-11);} /* Line Height (FIXED naming consistency) */ .ux4g-lh-80{--ux4g-lh-current:var(--ux4g-lh-80);} .ux4g-lh-72{--ux4g-lh-current:var(--ux4g-lh-72);} .ux4g-lh-52{--ux4g-lh-current:var(--ux4g-lh-52);} .ux4g-lh-44{--ux4g-lh-current:var(--ux4g-lh-44);} .ux4g-lh-36{--ux4g-lh-current:var(--ux4g-lh-36);} .ux4g-lh-32{--ux4g-lh-current:var(--ux4g-lh-32);} .ux4g-lh-28{--ux4g-lh-current:var(--ux4g-lh-28);} .ux4g-lh-24{--ux4g-lh-current:var(--ux4g-lh-24);} .ux4g-lh-20{--ux4g-lh-current:var(--ux4g-lh-20);} .ux4g-lh-18{--ux4g-lh-current:var(--ux4g-lh-18);} .ux4g-lh-16{--ux4g-lh-current:var(--ux4g-lh-16);} .ux4g-lh-14{--ux4g-lh-current:var(--ux4g-lh-14);} ``` ## Accessibility notes - Use the classes/tokens exactly as documented. Changing token values without a design review can break accessibility. - Ensure color contrast meets WCAG 2.1 AA. - Test responsive and RTL behavior where utility classes rely on logical properties.