Skip to main content

Typography

Rott UI provides a responsive typography system with predefined font sizes, families, and weights.

Font Sizes​

Predefined Sizes​

<Label text="Extra Small" fontSize="xs" />   // 10px
<Label text="Small" fontSize="sm" />          // 12px
<Label text="Medium" fontSize="md" />         // 14px (default)
<Label text="Large" fontSize="lg" />          // 16px
<Label text="Extra Large" fontSize="xl" />    // 18px
<Label text="2X Large" fontSize="xxl" />      // 24px
<Label text="3X Large" fontSize="xxxl" />     // 36px

Responsive Sizing​

Font sizes automatically adjust for small screens (< 380px width):

SizeNormalSmall Screen
xs10px9px
sm12px11px
md14px12px
lg16px14px
xl18px16px
xxl24px20px
xxxl36px30px

Custom Font Sizes​

Override at component level:

<Label text="Custom Size" style={{ fontSize: 20 }} />

Font Families​

Default Fonts​

Rott UI uses the Markpro font family by default:

  • MarkproRegular - Regular weight
  • MarkproBold - Bold weight
  • MarkproMedium - Medium weight
  • MarkproLight - Light weight

Using Font Families​

<Label text="Regular" fontFamily="MarkproRegular" />
<Label text="Bold" fontFamily="MarkproBold" />
<Label text="Medium" fontFamily="MarkproMedium" />

Custom Fonts​

Add custom fonts via rott.config.ts:

rott.config.ts
export const config = defineRottConfig({
  fontFamilies: {
    regular: 'Inter-Regular',
    medium: 'Inter-Medium',
    bold: 'Inter-Bold',
    light: 'Inter-Light',
  },
} as const);

Font Weights​

Using Font Weight​

<Label text="Regular" fontWeight="regular" />
<Label text="Medium" fontWeight="medium" />
<Label text="Bold" fontWeight="bold" />
<Label text="Light" fontWeight="light" />

Font Weight Mapping​

Font weights automatically map to font families:

fontWeights: {
  regular: 'MarkproRegular',
  medium: 'MarkproMedium',
  bold: 'MarkproBold',
  light: 'MarkproLight',
}

Typography Scale​

Headings​

<Label text="H1 Heading" fontSize="xxxl" fontWeight="bold" />
<Label text="H2 Heading" fontSize="xxl" fontWeight="bold" />
<Label text="H3 Heading" fontSize="xl" fontWeight="bold" />
<Label text="H4 Heading" fontSize="lg" fontWeight="bold" />

Body Text​

<Label text="Body Large" fontSize="lg" />
<Label text="Body Medium" fontSize="md" />
<Label text="Body Small" fontSize="sm" />

Captions​

<Label text="Caption" fontSize="xs" variant="grey-800" />

Letter Spacing​

Add custom letter spacing:

<Label text="Tight" letterSpacing={-0.5} />
<Label text="Normal" letterSpacing={0} />
<Label text="Wide" letterSpacing={2} />

Text Styles​

Emphasis​

<Label text="Bold Text" fontWeight="bold" />
<Label text="Medium Text" fontWeight="medium" />
<Label text="Light Text" fontWeight="light" />

Alignment​

<Label text="Left" textAlign="left" />
<Label text="Center" textCenter />
<Label text="Right" textAlign="right" />

Truncation​

<Label 
  text="Long text that will be truncated with ellipsis"
  numberOfLines={1}
/>

Typography in Components​

Button​

<Button fontSize="lg" fontWeight="bold">
  Large Bold Button
</Button>

Input​

<Input
  name="email"
  label={{
    text: "Email",
    fontSize: "lg",
    fontWeight: "bold",
  }}
/>

Best Practices​

Do's ✅​

  • Use the predefined font scale for consistency
  • Use semantic sizes (lg for headings, md for body)
  • Test typography on different screen sizes
  • Ensure readable line heights

Don'ts ❌​

  • Don't use too many font sizes on one screen
  • Don't use extreme letter spacing
  • Don't mix too many font families
  • Don't forget to test on small devices

Accessibility​

  • Minimum font size: 12px for body text
  • Sufficient line height: 1.5 for body text
  • Clear hierarchy with size and weight
  • Good contrast ratios

Next Steps​