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

Font	Best for	Locale variants
DancingScript	Decorative script, branding	en
OpenSans	UI text, body content	en
NotoSans	Multilingual UI text — automatically uses Myanmar or Thai glyph sets when the active locale is my or th	en, my, th

Usage

With Typography

import { Typography } from '@multinaire/expo-ui';

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

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

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

Direct Access

const { fonts } = useTheme();

<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": "NotoSans", "fontSize": 20 },
      "medium": { "fontFamily": "NotoSans", "fontSize": 20 },
      "bold": { "fontFamily": "NotoSans", "fontSize": 20 }
    },
    "body": {
      "regular": { "fontFamily": "NotoSans", "fontSize": 14 },
      "medium": { "fontFamily": "NotoSans", "fontSize": 14 },
      "bold": { "fontFamily": "NotoSans", "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 } = useResponsiveDesign();

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