Typography

Font Properties #

Font Family #

Dialtone's product UI font stack defers to the user's default system font, ensuring a seamless native experience.

Font Weight #

Four weights for clear hierarchy and visual contrast among different elements.

Font Size #

Dictates the scale of text, enhancing readability and defining information hierarchy across content.

Line Height #

Adjusts vertical spacing between lines of text, optimizing legibility and text flow.

Styles #

Usage #

All product UI text can be characterized as one of Headline, Body, Label, Helper, or Code. These styles are effectively composition CSS Utilities, combining multiple properties like font-size, font-family, font-weight, and line-height.

<el class="d-{category}--{size}-{strength}-{density}">...</el>

Examples #

<dt-stack gap="400">
  <dt-stack>
    <h2 class="d-headline--lg">Ai that works for you</h2>
    <div class="d-body--md-compact">Support customers, drive sales, and collaborate with your team—all in one, beautiful Ai-powered app.</div>
  </dt-stack>
  <dt-stack direction="row" gap="500" align="start">
    <dt-stack>
      <h3 class="d-headline--md-compact">Ai Contact Center</h3>
      <p class="d-body--sm">The world’s most advanced customer engagement platform</p>
    </dt-stack>
    <dt-stack>
      <h3 class="d-headline--md-compact">Ai Voice</h3>
      <p class="d-body--sm">Say hello to the world’s smartest business phone</p>
    </dt-stack>
    <dt-stack>
      <h3 class="d-headline--md-compact">Ai Meetings</h3>
      <p class="d-body--sm">Ai-powered video meetings with built-in transcriptions</p>
    </dt-stack>
  </dt-stack>
</dt-stack>

Headlines #

Titles and headings to establish hierarchy and set the tone of contextual groupings.

Body #

Default text style for longer-form prose content, designed for comfort and clarity in reading varying lengths.

Label #

Shorter-length copy like form fields, buttons, and other UI-labeling elements, ensuring clear navigation and interaction.

Helper #

Complementary information or guidance, such as tooltips and hints, to aid user understanding without overwhelming.

Code #

Code snippets, technical commands, or data values rendered as a monospaced font.

API #

Each typography style is expressed through a shorthand font property, and its value's design token contains all font styles, e.g. font-size, line-height, font-family, etc,