Typography

Typography defines the foundation for clear and consistent communication across our products. It establishes hierarchy, readability, and rhythm, ensuring our interfaces feel cohesive across every screen size and platform.

Download

Specs

Heading

Body

Font Family

Font Weight

Hover Diatype

Diatype is a warm yet sharp grotesque ideal for text and reading on screen. Its name refers to the clunky, pre-digital typesetting machines that informed its shapes and the Swiss Neo-grotesque genre at large.

Type scale

The type scale creates a balanced system of sizes and line heights that adapts across breakpoints. It ensures clarity, hierarchy, and consistency whether used in dense interfaces or large, expressive layouts.

Usage

React

Use a preset size by either using the Heading or Body component or by applying a textStyle before overriding fontSize or lineHeight.

React Native

On React Native, fonts must be loaded asynchronously before text can render. Use Expo's useFonts hook from expo-font to load the Hover Diatype font family, and defer rendering until the fonts are ready:

import { useFonts } from 'expo-font';

const Fonts = ({ children }) => {
  const [isFontLoaded] = useFonts({
    'HoverDiatype-Regular': require('@hoverinc/tokens-typography/assets/diatype-regular.otf'),
    'HoverDiatype-Regular-Italic': require('@hoverinc/tokens-typography/assets/diatype-regular-italic.otf'),
    'HoverDiatype-Bold': require('@hoverinc/tokens-typography/assets/native/diatype-bold.otf'),
    'HoverDiatype-Bold-Italic': require('@hoverinc/tokens-typography/assets/native/diatype-bold-italic.otf'),
  });

  if (!isFontLoaded) return null;

  return <>{children}</>;
};

Wrap your app (or the DesignSystemProvider) with this component so that Heading and Body render with the correct font family. The font assets are shipped in @hoverinc/tokens-typography.

Font Scaling

React Native respects the user's device font size setting automatically. All design system text components (Body, Heading, ButtonText, TextInput) and their compound wrappers (Radio, Checkbox, Toggle, Toast, Badge, Field) cap scaling at 1.35x via maxFontSizeMultiplier. No extra work is needed when using these components directly.

To test how a screen behaves at larger font sizes, change the accessibility text size setting on the simulator or device (or emulator, on Android) rather than a Storybook control — the design system has no separate scaling toggle.

Extending text components with styled()

When creating a custom text component that extends Body or Heading, use BodyBase or HeadingBase instead to preserve Tamagui's styled() composition:

import { styled } from '@tamagui/core';
import { BodyBase } from '../Body';

const CardLabel = styled(BodyBase, {
  size: 'small',
  color: '$colorDimmed',
});

Bootstrap

Heading and Body preset sizes are baked into <h1> through <h6> elements or corresponding .heading-* class.

Accessibility

We aim for WCAG 2.2 level AA color contrast, i.e. 4.5:1 in most cases.

The default colors we ship for type in Heading and Body meet this standard when on the default background. If you're using a custom color or background color, please confirm the color contrast before delivering designs.

For more details about our color palettes, see the color tokens documentation.

Line length

Running text that spans multiple lines at standard screen sizes should adhere to best practices for line length. That means ensuring that no line of type in running text contains more than about 66-72 characters including spaces and punctuation, regardless of text size.