Language Preview—DTL is currently in alpha. Explore the language, try the playground, and learn how to use it.Alpha release coming soon.

Typography Example

This example demonstrates how to define typography tokens including fonts, sizes, weights, and line heights.

Basic Typography

Typography Scale

Semantic Typography Tokens

Responsive Typography

Complete Typography System

Best Practices

  • Use arrays for scales: Font sizes work well as arrays for easy indexing
  • Organize with objects: Group related values (fonts, weights) into objects
  • Create semantic tokens: Define text styles that map to your design system
  • Maintain consistency: Use the same scale across all typography
  • Consider accessibility: Ensure font sizes meet minimum readability standards

Related