Typography

Picking the perfect font is never easy. When choosing the right font for a user interface poses some unique challenges, here’s what to look for in a font for your UI: a font that performs well across contexts and devices. A face that looks just as pretty set at 72px as it does at 10px.

TextSize

Set a font-size and a line-height to the element.

TypeDefault Value
stringnull
display medium
display small
display extra small
heading extra large
heading large
heading medium
heading small
heading extra small
text extra large
text large
text medium
text small
text extra small
<NVBlock>
  <NVBlock TextSize="d-md">display medium</NVBlock>
  <NVBlock TextSize="d-sm">display small</NVBlock>
  <NVBlock TextSize="d-xs">display extra small</NVBlock
</NVBlock>

<NVBlock MT="12">
  <NVBlock TextSize="h-xl">heading extra large</NVBlock>
  <NVBlock TextSize="h-lg">heading large</NVBlock>
  <NVBlock TextSize="h-md">heading medium</NVBlock>
  <NVBlock TextSize="h-sm">heading small</NVBlock>
  <NVBlock TextSize="h-xs">heading extra small</NVBlock>
</NVBlock>

<NVBlock MT="12">
  <NVBlock TextSize="xl">text extra large</NVBlock>
  <NVBlock TextSize="lg">text large</NVBlock>
  <NVBlock TextSize="md">text medium</NVBlock>
  <NVBlock TextSize="sm">text small</NVBlock>
  <NVBlock TextSize="xs">text extra small</NVBlock>
</NVBlock>

FontWeight

Set the font-weight of the element.

TypeDefault Value
stringnull
normal (400)
medium (500)
bold (700)
<NVBlock GutterY="3">
  <NVBlock FontWeight="normal">normal (400)</NVBlock>
  <NVBlock FontWeight="medium">medium (500)</NVBlock>
  <NVBlock FontWeight="bold">normal (700)</NVBlock>
</NVBlock>
On this page