element-plus-design-typography

Typography Design Specifications

Element Plus creates font conventions to ensure the best presentation across different platforms.

When to Use

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

---

Font Family

Element Plus uses a carefully selected font stack for optimal cross-platform display:

font-family:
  Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
  'Microsoft YaHei', '微软雅黑', Arial, sans-serif;

Font Stack Explanation

Font	Platform	Purpose
Inter	All	Primary modern font
Helvetica Neue	macOS	System fallback
Helvetica	macOS/iOS	System fallback
PingFang SC	macOS (Chinese)	Chinese characters
Hiragino Sans GB	macOS (Chinese)	Chinese characters
Microsoft YaHei	Windows (Chinese)	Chinese characters
Arial	All	Universal fallback
sans-serif	All	Generic fallback

---

Font Sizes

Element Plus provides standardized font size variables:

Variable	Value	Usage
--el-font-size-extra-large	20px	Extra large headings
--el-font-size-large	18px	Large headings
--el-font-size-medium	16px	Medium text, subheadings
--el-font-size-base	14px	Base body text
--el-font-size-small	13px	Small text, captions
--el-font-size-extra-small	12px	Extra small text, hints

Usage Examples

/* Heading */
h1 {
  font-size: var(--el-font-size-extra-large);
}

/* Subheading */
h2 {
  font-size: var(--el-font-size-large);
}

/* Body text */
p {
  font-size: var(--el-font-size-base);
}

/* Caption */
.caption {
  font-size: var(--el-font-size-small);
}

/* Hint text */
.hint {
  font-size: var(--el-font-size-extra-small);
}

---

Font Weight

Variable	Value	Usage
--el-font-weight-primary	500	Primary weight for emphasis
--el-font-weight-secondary	100	Secondary weight for light text

/* Emphasized text */
.emphasis {
  font-weight: var(--el-font-weight-primary);
}

/* Light text */
.light {
  font-weight: var(--el-font-weight-secondary);
}

---

Line Height

Element Plus provides line height variables for consistent vertical rhythm:

Variable	Value	Usage
--el-font-line-height-primary	24px	Primary line height
--el-font-line-height-secondary	16px	Secondary line height

Line Height Guidelines

/* Body text */
p {
  line-height: var(--el-font-line-height-primary);
}

/* Compact text */
.compact {
  line-height: var(--el-font-line-height-secondary);
}

---

CSS Variables Summary

:root {
  /* Font Family */
  --el-font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 
    'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  
  /* Font Sizes */
  --el-font-size-extra-large: 20px;
  --el-font-size-large: 18px;
  --el-font-size-medium: 16px;
  --el-font-size-base: 14px;
  --el-font-size-small: 13px;
  --el-font-size-extra-small: 12px;
  
  /* Font Weight */
  --el-font-weight-primary: 500;
  --el-font-weight-secondary: 100;
  
  /* Line Height */
  --el-font-line-height-primary: 24px;
  --el-font-line-height-secondary: 16px;
}

---

Text Component

Element Plus provides a Text component for styled text display:

<template>
  <!-- Text types -->
  <el-text>Default text</el-text>
  <el-text type="primary">Primary text</el-text>
  <el-text type="success">Success text</el-text>
  <el-text type="warning">Warning text</el-text>
  <el-text type="danger">Danger text</el-text>
  <el-text type="info">Info text</el-text>
  
  <!-- Text sizes -->
  <el-text size="large">Large text</el-text>
  <el-text size="default">Default text</el-text>
  <el-text size="small">Small text</el-text>
  
  <!-- Truncated text -->
  <el-text truncated>Long text that will be truncated...</el-text>
  
  <!-- Line clamped text -->
  <el-text :line-clamp="2">Long text clamped to 2 lines...</el-text>
</template>

---

Best Practices

1. Use CSS Variables: Always use predefined font variables for consistency
2. Cross-Platform: The font stack ensures consistent display across platforms
3. Hierarchy: Use font sizes to establish visual hierarchy
4. Line Height: Maintain readable line heights for body text
5. Dark Mode: Typography automatically adjusts in dark mode
6. Chinese Support: Font stack includes Chinese-optimized fonts

---

Related Resources

Resource	Description
Text Component	Text component documentation
Color Design	Text color variables
Border Design	Related design specifications