Typography

We create a font convention to ensure the best presentation across different platforms.

Font

import { Fragment } from "react";const FONT_TERMS = [  "pingfang",  "hiragino",  "microsoft",  "helvetica",  "arial",];const IMAGE_BASE = "https://element-plus.org/images/typography";export default function TypographyFont() {  return (    <div className="demo-term-box">      {FONT_TERMS.map((term, index) => (        <Fragment key={term}>          <img            className={              index === 2                ? "demo-term-box__img demo-term-box__img--last is-light"                : "demo-term-box__img is-light"            }            src={`${IMAGE_BASE}/term-${term}.png`}            alt=""          />          <img            className={              index === 2                ? "demo-term-box__img demo-term-box__img--last is-dark"                : "demo-term-box__img is-dark"            }            src={`${IMAGE_BASE}/term-${term}-dark.png`}            alt=""          />        </Fragment>      ))}    </div>  );}

Font Convention

Level	Font Size	Demo
Supplementary text	12px Extra Small	Build with Element
Body (small)	13px Small	Build with Element
Body	14px Base	Build with Element
Small Title	16px Medium	Build with Element
Title	18px Large	Build with Element
Main Title	20px Extra Large	Build with Element

const FONT_SIZES = [  { level: "Supplementary text", type: "extra-small", value: "12px" },  { level: "Body (small)", type: "small", value: "13px" },  { level: "Body", type: "base", value: "14px" },  { level: "Small Title", type: "medium", value: "16px" },  { level: "Title", type: "large", value: "18px" },  { level: "Main Title", type: "extra-large", value: "20px" },];function formatType(type: string) {  return type    .split("-")    .map((item) => item.charAt(0).toUpperCase() + item.slice(1))    .join(" ");}export default function TypographyConvention() {  return (    <table className="demo-typo-size">      <tbody>        <tr>          <td>Level</td>          <td>Font Size</td>          <td className="color-dark-light">Demo</td>        </tr>        {FONT_SIZES.map((fontSize) => (          <tr            key={fontSize.type}            className={`demo-typo-size__row demo-typo-size__row--${fontSize.type}`}          >            <td>{fontSize.level}</td>            <td>              {fontSize.value} {formatType(fontSize.type)}            </td>            <td>Build with Element</td>          </tr>        ))}      </tbody>    </table>  );}

Font Line Height

line-height:1 No line height
line-height:1.3 Compact
line-height:1.5 Regular
line-height:1.7 Loose

const IMAGE_BASE = "https://element-plus.org/images/typography";const LINE_HEIGHTS = [  { value: "1", note: "No line height" },  { value: "1.3", note: "Compact" },  { value: "1.5", note: "Regular" },  { value: "1.7", note: "Loose" },];export default function TypographyLineHeight() {  return (    <div className="demo-typo-lineheight">      <img        className="lineH-left is-light"        src={`${IMAGE_BASE}/line-height.png`}        alt=""      />      <img        className="lineH-left is-dark"        src={`${IMAGE_BASE}/line-height-dark.png`}        alt=""      />      <ul className="lineH-right">        {LINE_HEIGHTS.map((item) => (          <li key={item.value}>            line-height:{item.value} <span>{item.note}</span>          </li>        ))}      </ul>    </div>  );}

Font-family

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