# Typography (/foundations/type)



<div className="hd-typography">
  <span id="type-apply" className="hd-type-anchor" aria-hidden="true" />

  ## Apply a text style [#apply-a-text-style]

  Every size, line height, and letter spacing is one token. Set it with `textStyle` and the three come together.

  ```tsx title="example.tsx"
  <p className={css({ textStyle: "sm", color: "fg.body" })}>Entity type saved.</p>
  ```

  ## Typeface [#typeface]

  Use &#x2A;*HASH Sans (KH Teka)** for `fonts.display` and `fonts.body`, and &#x2A;*HASH Mono (KH Teka Mono)** for `fonts.mono`. &#x2A;*HASH Serif (KH Giga)** has an extremely limited role in marketing and sales material.

  <TypographyFaces />

  ### Choosing a typeface [#choosing-a-typeface]

  * **HASH Sans** is the default for page titles, headings, body copy, navigation, labels, and actions across our products and communications.
  * **Serif** is for selected direct quotes from people, customer testimonials, and short editorial callouts in case studies, presentations, or campaign material. Keep these passages brief and generously sized. Set attribution, supporting copy, and interface controls in HASH Sans. Reserve Serif for a deliberate editorial exception rather than a general product text style.
  * **Mono** is for code, commands, token names, and identifiers where exact characters matter. Use HASH Sans with tabular figures for numeric columns.

  KH Giga is selected explicitly in the layouts that use it. The shared `fonts.display`, `fonts.body`, and `fonts.mono` tokens retain their existing families.

  ### Google Docs exception [#google-docs-exception]

  <Callout title="Use Geist in Google Docs" type="info">
    Google Docs is a documented exception to our usual typeface rules. When creating or editing documents in Google Docs, use:

    * **Geist Sans** in place of HASH Sans for headings, body copy, labels, and quotations.
    * **Geist Mono** in place of HASH Mono for code, commands, and identifiers.

    Keep the same hierarchy, spacing, and readability guidelines. Use paragraph styles for consistent headings and body text. This substitution applies to Google Docs; use our ordinary brand typefaces in other design work.
  </Callout>

  <span id="families-and-weights" className="hd-type-anchor" aria-hidden="true" />

  ### Font stacks [#font-stacks]

  The HASH font stacks include fallbacks for when a typeface is unavailable. Copy a stack where a token cannot be used.

  <TypographyStacks />

  <span id="text-styles" className="hd-type-anchor" aria-hidden="true" />

  ## Scale [#scale]

  <TypographyScale />

  ## Style [#style]

  A style is a step of the scale with a job, a family, and a weight. Product titles use HASH Sans at medium with tight tracking; interface text and prose use HASH Sans; code uses HASH Mono. The occasional use of HASH Serif in marketing and sales material sits outside these product text styles.

  <TypographyStyles />

  <span id="hierarchy-and-reading" className="hd-type-anchor" aria-hidden="true" />

  * Use sentence case for headings, labels, and actions.
  * Use tabular figures for numbers in columns.
  * Mono is for code and identifiers, rather than dates, counts, or names.
  * Links and rows change color on hover. Keep another visible cue, such as a link icon, where needed.

  ### Type color [#type-color]

  Choose type color for legibility first. Keep running text neutral; hierarchy comes from size, weight, and position. Color marks links, the primary action, and status. See [Colors](/foundations/colors) for the palettes.

  <TypographyColors />

  <TypographyColorTokens />

  * Do not tint running text with a palette. A colored paragraph reads as an alert.
  * Disabled text uses its disabled state token, rather than opacity.
  * Code is `fg.body` in KH Teka Mono. Syntax color belongs to code blocks only.

  ## Weights [#weights]

  Three weight tokens. KH Teka has no separate 600 weight in the site's font set, so semibold renders as Medium.

  <TypographyWeights />

  ## Leading [#leading]

  Six line-height tokens. Each text style also supports tight (0.9×) and loose (1.1×) leading. Use tight in dense tables; loose for long reading.

  <TypographyLeading />

  <span id="type-license" className="hd-type-anchor" aria-hidden="true" />

  ### License [#license]

  KH Teka and KH Teka Mono are commercial typefaces. HASH has an unlimited license for any medium and any number of users and devices, including embedded mobile and desktop applications, print, and the web. No third party is granted rights to use them.

  See [HASH Sans](/foundations/type/sans-serif), [HASH Serif](/foundations/type/serif), and [HASH Mono](/foundations/type/mono) for usage guidance, character sets, OpenType features, language support, and the relevant licensing notices.
</div>