Naive UI Design Typography

Typography Design Specifications

Naive UI creates font conventions to ensure the best presentation across different platforms. Typography is an art that enhances readability and visual hierarchy.

When to Use

• Understanding font conventions
• Applying consistent text styles
• Setting font-family for cross-platform compatibility
• Managing font sizes and line heights
• Using typography components

Font Family

Naive UI uses a carefully selected font stack for optimal cross-platform display.

Sans-serif Font (Default)

font-family: v-sans, system-ui, -apple-system, BlinkMacSystemFont, 
             "Segoe UI", sans-serif, "Apple Color Emoji", 
             "Segoe UI Emoji", "Segoe UI Symbol";

Monospace Font

font-family: v-mono, SFMono-Regular, Menlo, Consolas, Courier, monospace;

Font Stack Explanation

Font Sizes

Naive UI provides standardized font size variables for different contexts.

Usage Examples

<script setup>
import { useThemeVars } from 'naive-ui'
const themeVars = useThemeVars()
</script>

<template>
  <p :style="{ fontSize: themeVars.fontSize }">Base text</p>
  <span :style="{ fontSize: themeVars.fontSizeMini }">Mini text</span>
</template>

Font Weight

<template>
  <n-el style="font-weight: var(--font-weight-strong)">
    Strong text
  </n-el>
</template>

Line Height

Header Typography

Naive UI provides typography components with predefined header styles.

Header Font Sizes

Header Components

<template>
  <n-h1>Heading 1</n-h1>
  <n-h2>Heading 2</n-h2>
  <n-h3>Heading 3</n-h3>
  <n-h4>Heading 4</n-h4>
  <n-h5>Heading 5</n-h5>
  <n-h6>Heading 6</n-h6>
</template>

Header with Prefix Bar

Headers can display a colored bar prefix for visual emphasis.

<template>
  <n-h1 prefix="bar">Heading with bar</n-h1>
  <n-h2 prefix="bar" align-text>Aligned heading</n-h2>
  <n-h3 prefix="bar" type="success">Success heading</n-h3>
</template>

Text Component

Naive UI provides a Text component for styled text display.

Text Types

<template>
  <n-text>Default text</n-text>
  <n-text type="primary">Primary text</n-text>
  <n-text type="success">Success text</n-text>
  <n-text type="info">Info text</n-text>
  <n-text type="warning">Warning text</n-text>
  <n-text type="error">Error text</n-text>
</template>

Text Depth

<template>
  <n-text>Primary depth (default)</n-text>
  <n-text depth="2">Secondary depth</n-text>
  <n-text depth="3">Tertiary depth</n-text>
</template>

Text with Tag

<template>
  <n-text tag="div">Text as div</n-text>
  <n-text tag="span">Text as span</n-text>
  <n-text tag="label">Text as label</n-text>
</template>

Paragraph Component

<template>
  <n-p>
    This is a paragraph with proper spacing and typography.
    Naive UI provides consistent text styling across components.
  </n-p>
</template>

Other Typography Components

Anchor (Link)

<template>
  <n-a href="https://example.com">Link text</n-a>
</template>

Horizontal Rule

<template>
  <n-hr />
</template>

Lists

<template>
  <n-ul>
    <n-li>Unordered list item 1</n-li>
    <n-li>Unordered list item 2</n-li>
  </n-ul>
  
  <n-ol>
    <n-li>Ordered list item 1</n-li>
    <n-li>Ordered list item 2</n-li>
  </n-ol>
</template>

Blockquote

<template>
  <n-blockquote>
    <n-p>This is a blockquote with proper styling.</n-p>
  </n-blockquote>
</template>

CSS Variables Summary

:root {
  --font-family: v-sans, system-ui, -apple-system, BlinkMacSystemFont, 
                 "Segoe UI", sans-serif;
  --font-family-mono: v-mono, SFMono-Regular, Menlo, Consolas, Courier, monospace;
  
  --font-size: 14px;
  --font-size-mini: 12px;
  --font-size-tiny: 12px;
  --font-size-small: 14px;
  --font-size-medium: 14px;
  --font-size-large: 15px;
  --font-size-huge: 16px;
  
  --font-weight: 400;
  --font-weight-strong: 500;
  
  --line-height: 1.6;
}

Component Heights

Naive UI uses standardized heights for form controls and interactive elements.

Best Practices

1. Use Typography Components: Use n-h1 through n-h6, n-p, n-text for consistent styling
2. Cross-Platform: The font stack ensures consistent display across platforms
3. Hierarchy: Use font sizes and depths to establish visual hierarchy
4. Line Height: Maintain readable line height (1.6) for body text
5. Dark Mode: Typography automatically adjusts in dark mode
6. Semantic HTML: Use appropriate tags (tag prop) for accessibility

Related Resources