Typography

The typography system provides consistent text styling across your application.

Text Categories

Category	Usage	Default Size
display	Brand name, logo text, decorative headers	24px
heading	Page titles, section headers	20px
subheading	Card headers, secondary titles	18px
title	List items, button labels, navigation	16px
body	Content text, paragraphs, descriptions	14px
caption	Helper text, timestamps, footnotes	12px

Font Weights

Each category has three weight variants:

Weight	Usage
regular	Body text, descriptions, general content
medium	Emphasized text, labels, navigation items
bold	Headings, buttons, important labels

Available Fonts

• DancingScript: Decorative script font, ideal for branding
• OpenSans: Clean sans-serif, ideal for UI text

Usage

With MultinaireText

import { MultinaireText } from '@multinaire/multinaire-design';

// Using type and weight props
<MultinaireText type="heading" weight="bold">
  Page Title
</MultinaireText>

<MultinaireText type="body">
  Regular body text
</MultinaireText>

<MultinaireText type="caption" color="neutralVariant">
  Helper text
</MultinaireText>

Direct Access

const { fonts } = useMultinaireTheme();

<Text style={fonts.heading.bold}>
  Page Title
</Text>

<Text style={[fonts.body.regular, { color: colors.onBackground }]}>
  Body text
</Text>

Configuration

Define typography in your theme.json:

{
  "texts": {
    "display": {
      "regular": { "fontFamily": "DancingScript", "fontSize": 24 },
      "medium": { "fontFamily": "DancingScript", "fontSize": 24 },
      "bold": { "fontFamily": "DancingScript", "fontSize": 24 }
    },
    "heading": {
      "regular": { "fontFamily": "OpenSans", "fontSize": 20 },
      "medium": { "fontFamily": "OpenSans", "fontSize": 20 },
      "bold": { "fontFamily": "OpenSans", "fontSize": 20 }
    },
    "body": {
      "regular": { "fontFamily": "OpenSans", "fontSize": 14 },
      "medium": { "fontFamily": "OpenSans", "fontSize": 14 },
      "bold": { "fontFamily": "OpenSans", "fontSize": 14 }
    }
  }
}

Typography Scale Recommendations

Category	Min	Default	Max
caption	10px	12px	13px
body	13px	14px	16px
title	14px	16px	18px
subheading	16px	18px	20px
heading	18px	20px	24px
display	20px	24px	32px

Responsive Typography

The typography values are fixed, but you can adjust which type to use based on screen size:

const { isMobile } = useMultinaireResponsiveDesign();

<MultinaireText type={isMobile ? 'title' : 'heading'} weight="bold">
  {title}
</MultinaireText>