Typography

Density’s default font family is inherited by the page. Set data-dn-font-family="default" to apply it explicitly, or use data-dn-font-family="mono" for code, identifiers, and numeric values that benefit from fixed-width alignment.

Font families

Primary 123,456.78Secondary 123,456.78Ghost secondary 123,456.78Ghost tertiary 123,456.78Monospace 123,456.78

import { View } from "density-base-ui";

export default function NumberTypographyExample() {
  return (
    <View align="start" gap="md" padding={false}>
      <span data-dn-emphasis="primary">Primary 123,456.78</span>
      <span data-dn-emphasis="secondary">Secondary 123,456.78</span>
      <span data-dn-emphasis="ghost-secondary">Ghost secondary 123,456.78</span>
      <span data-dn-emphasis="ghost-tertiary">Ghost tertiary 123,456.78</span>
      <span data-dn-emphasis="primary" data-dn-font-family="mono">
        Monospace 123,456.78
      </span>
    </View>
  );
}

Use the default family for ordinary interface text. Reserve the monospace family for data where character alignment makes scanning easier.