import Example from "../../components/example";
import Layout from "../../components/layout";
import Exports from "../../components/exports";

import * as TypographyExports from "baseui/typography";
import Display from "examples/typography/display.tsx";
import Heading from "examples/typography/heading.tsx";
import Text from "examples/typography/text.tsx";

export default Layout;

# Typography

A set of text block components for an out-of-the-box path to the BaseUI font standard.

You can find the font definitions in the [Theming values](/guides/theming/#typography) page.

## When to use

- Use the drop-in typography components for titles and text blocks in an app.

## Examples

<Example title="Typography Display Blocks" path="typography/display.tsx">
  <Display />
</Example>

At Uber, we use Display components with an alternate font family to create typographic contrast in our UI.

<Example title="Typography Heading Blocks" path="typography/heading.tsx">
  <Heading />
</Example>

<Example title="Typography Body Blocks" path="typography/text.tsx">
  <Text />
</Example>

<Exports
  component={TypographyExports}
  title="Typography exports"
  path="baseui/typography"
  cheatsheet={false}
/>