Typography

Deskblocks offers a typography system that simplifies font management, allowing developers to focus on features rather than font specifics.

Type system

Zoho Desk supports three typefaces: Zoho Puvi, Roboto, and Lato. Zoho Puvi is selected by default, but users can choose their preferred option.

As a developer, you don’t need to manually manage fonts because Deskblocks handles all the complex processes. Simply use the tokens below to modify any typography-specific parameters, and the system will automatically adjust everything. When users switch to a different font in their interface, your extension will seamlessly update the typography settings.

If you’re interested in the inner workings, particularly around typography, you can explore more in the article Supporting multiple fonts in a design system.

Font Stack

The primary font in the font stack changes based on the user’s preference.

`--db-fontstack`	puvi, roboto flex, roboto, lato, inter, system-ui, -apple-system, sans-serif
`--db-fontstack-mono`	sf mono, jetbrains mono, zoho puvi mono, monospace


`--db-fontsize-small`	0.75rem	12px
`--db-fontsize-medium`	0.875rem	14px
`--db-fontsize-large`	1rem	16px
`--db-fontsize-xlarge`	1.5rem	24px

Font Weight

Based on the user’s font preference, the following font weights will be automatically applied.

`--db-fontweight-regular`	400	370	400
`--db-fontweight-medium`	500	470	600
`--db-fontweight-bold`	600	570	700

Line Height

Line height is resolved as unitless values.

`--db-lineHeight`	1	16px
`--db-lineHeight-large`	1.5	24px

Letterspacing

Letter spacing is resolved in em units.