Source

Command Palette

Search for a command to run...

Typography

Explore the typography scale and font families used throughout LSD.

Font Families

LSD offers three font family stacks for different use cases. Choose what serves your content and context.

Monospace

(default)

Sans Serif

Serif

Font families can be controlled by adding font classes to any element.

Setting Font Family

You can set the font family directly in your HTML by adding font classes to any element:
<!-- Set font family on HTML element -->
<html class="font-serif">
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>
Font classes can be applied to any element in your application, enabling mixing different fonts together.
<!-- Parent element with serif font -->
<div class="font-serif">
  <!-- Child elements inherit the parent's font -->
  <p>This text uses serif font</p>

  <!-- Override to sans serif -->
  <div class="font-sans">
    <p>This text uses sans serif font</p>
  </div>

  <!-- Override to monospace -->
  <div class="font-mono">
    <p>This text uses monospace font</p>
  </div>
</div>

Typography Scale

The Typography component provides a consistent scale for establishing hierarchy and guiding the reader through content.
Display
Large display text for hero sections
Display Text

Heading 1
Main page heading

Heading 1

Heading 2
Section heading

Heading 2

Heading 3
Subsection heading

Heading 3

Heading 4
Minor heading

Heading 4

Body
Standard paragraph text
Body text is used for most content. It provides excellent readability and is the default choice for paragraphs and longer text blocks.

Label
Secondary text and labels

Using Typography

Import and use the Typography component to apply consistent typography across your application:
import { Typography } from '@nipsys/lsd';

function MyComponent() {
  return (
    <div>
      <Typography variant="h1">Welcome</Typography>
      <Typography variant="body1">
        This is body text with consistent styling.
      </Typography>
      <Typography variant="label1">
        Secondary information
      </Typography>
    </div>
  );
}
Spacing