Typography

Guidance for using and tuning typography.

Typography clusters

Shuriken UI provides BaseHeading, BaseParagraph and BaseText components to render titles and body copy. These components share size and weight props and map to an underlying type system to ensure consistent typography throughout your app.

<template>
  <BaseHeading
    as="h4"
    size="lg"
    weight="semibold"
    class="mb-4"
  >
    Iam a text heading
  </BaseHeading>
  <BaseParagraph size="md">
    Iam a text paragraph here to show you how to
    use the typography components. Each one has a
    configurable size, weight and line height.
  </BaseParagraph>
</template>

Formatting

You can nest typography components to create rich text formatting.

<template>
  <BaseParagraph size="sm">
    This is a
    <BaseText weight="semibold">
      very important
    </BaseText>
    message!
  </BaseParagraph>
</template>

Type scale

The typographic system is based on a 13 step scale, every step has a corresponding font-size, line-height and letter-spacing value which are all designed to be used in combination.

Font weight

The following weights are supported. When using the typography components, you can use the weight prop to set the font weight.

Customizing fonts

Both BaseHeading and BaseParagraph components use the --font-sans and --font-heading CSS variables to set the font family.

You can override them in your CSS file to use custom fonts, note that fonts should be loaded separately in your project.

@theme {
  /** Fonts */
  --font-sans: Inter, sans-serif;
  --font-heading: Roboto, sans-serif;
}

Loading fonts

Use the @nuxt/fonts module to load custom fonts in your Nuxt.js project.

pnpm add -D @nuxt/fonts

export default defineNuxtConfig({
  modules: [
    '@shuriken-ui/nuxt',
    '@nuxt/fonts',   ],
  fonts: {
    experimental: {
      processCSSVariables: true,     },
  },
})