new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Shopify Polaris · all subjects

typography

23 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Typography component purpose

The Typography component establishes hierarchy and communicates importance through text presentation.

Mono font usage for code references

The system mono font is used consistently in code applications. The mono font must be used in all instances where there is any type of reference to code, such as in text inputs where code is expected.

Do not use mono font for number alignment

Do not use mono to align numbers for readability. Use tabular numbers instead for aligning numerical data in tables or similar contexts.

Do not use mono font for decoration

Do not use mono font for decoration or to grab attention. Mono font should only be used for code references and code input contexts.

Polaris typescales structure

Polaris offers two typescales: heading and body. These typescales are used to create visual pairings in the UI and all line heights are aligned with the 4px grid. The typescale in the admin is tailored for UI usage as the primary focus, designed with software in mind first and foremost, and optimized for use in high density layouts with intricate details and complex features.

Font family for Shopify admin

The Shopify admin uses the Inter font, an open-source variable font that offers adjustable knobs for fine-tuning font weight and slant. For languages where Inter doesn't offer a complete set of glyphs, the admin employs the system font to ensure proper rendering and compatibility.

Visual hierarchy in Pro design language

Information is structured in a clear visual hierarchy, emphasizing important details through variants like size, weight, and color. Space is used to create groups of related information. Color adds or removes emphasis to make the interface easier to scan and enables efficient decision making.

Text component moved to stable in Version 11

The Text component has been moved from beta to stable phase in Version 11. Its API is stable and ready for full adoption, and can support most, if not all, environments.

Version 10 typography is alpha release

The new Text component and Figma text styles are available as an alpha release. Significant changes could still be made. The existing type components (DisplayText, Heading, Subheading, Caption, TextStyle, VisuallyHidden) will continue to be available until the new Text component is finalized. Users should coordinate with their team and the Polaris team before adopting the new typography system.

Version 10 typography system consolidation

Polaris version 10 consolidates typography into a new Text component replacing 6 separate components (DisplayText, Heading, Subheading, Caption, VisuallyHidden, TextStyle). The type system is reorganized into two categories: Heading and Body, each with default variants and flexible options.

Reasons for type system changes

Polaris typography was updated because only approximately 8% of custom components in shopify/web used typography tokens. Teams were creating workarounds by hard-coding CSS values or building new components instead of using the existing system. The lack of flexibility in the 6 separate typography components, limited guidance on typography design, and insufficient range in font weights and sizes contributed to this divergence.

Single Text component benefits

The singular Text component approach was chosen after testing with developers who strongly preferred it over multiple components. Benefits include: one component to learn, autocompleting props in code editors, less code complexity and better performance, decoupled layout from type, easier sweeping changes, more flexible type control, setup for future style overrides, and one consistent way to control typography across the system.

Current type style organization before version 10

Prior to version 10, Polaris typography consisted of 4 Display variants, 1 Heading, 1 Subheading, 1 Button, 1 Body, and 1 Caption variant across 6 separate components.

Disallow hard-coded px, em, rem units for font-size and line-height

The typography/declaration-property-unit-disallowed-list stylelint rule enforces that font-size and line-height properties must use design token variables instead of hard-coded pixel, em, or rem units. Font-size should use var(--p-font-size-*) tokens and line-height should use var(--p-font-line-height-*) tokens.

Correct way to apply typography using design tokens

Use CSS custom properties for font sizing, such as font-size: var(--p-font-size-300), instead of legacy Sass typography functions.

Disallow legacy Sass typography functions

The stylelint rule typography/function-disallowed-list disallows the use of legacy Sass typography functions. Instead of using functions like font-size('caption'), use design tokens such as var(--p-font-size-300) or the Text component with appropriate variants.

Deprecated typography function syntax

The syntax font-size: font-size('caption') is deprecated and should not be used. This is an example of a legacy Sass typography function that the typography/function-disallowed-list rule prevents.

Avoid direct typography property declarations

Do not declare text style properties directly using CSS variables like font-size, font-weight, line-height, or letter-spacing. Instead, use the Text component with semantic variant props such as headingXs.

Use Text component for typography

Apply typography styles through the Text component using the variant prop (for example, variant="headingXs") rather than applying individual font properties.

Disallowed typography CSS variables

The following CSS custom properties for typography should not be declared directly: --p-font-size-*, --p-font-weight-*, --p-font-line-height-*, and --p-font-letter-spacing-*.

Text variant headingXs replaced with headingSm

The Text component's variant="headingXs" is replaced with variant="headingSm". For example, <Text variant="headingXs"> becomes <Text variant="headingSm">.

Text variant heading4xl replaced with heading3xl

The Text component's variant="heading4xl" is replaced with variant="heading3xl". For example, <Text variant="heading4xl"> becomes <Text variant="heading3xl">.

Text color prop replaced with tone in v12

The Text component's color prop is replaced with tone. Special mappings apply: color="warning" becomes tone="caution". Other color values map directly to tone values.

Give your agent this brain