Перейти к содержимому

Typography

Скачать .md ↓

Typography is based on the managed Google Sans design family. The local runtime loads fonts/GoogleSans-Variable.ttf from the official Google Sans release through src/styles.scss.

Font Family

Token	Value	Usage
`font.family.base`	`Google Sans`	Main interface text

Font Size

Token	Value	Usage
`font.size.100`	`11px`	Captions and compact labels
`font.size.200`	`13px`	Descriptions and secondary metadata
`font.size.250`	`14px`	Sidebar text
`font.size.300`	`15px`	Body text and paragraph text
`font.size.400`	`17px`	Actions and compact titles
`font.size.500`	`19px`	Section titles
`font.size.600`	`24px`	Page titles
`font.size.700`	`34px`	Large display titles

Font Weight

Token	Value	Usage
`font.weight.regular`	`400`	Default text
`font.weight.medium`	`500`	Accent text and emphasized labels
`font.weight.bold`	`700`	Titles
`font.weight.code`	`700`	Large SMS-code digits

Font Height

Token	Value	Usage
`font.lineHeight.100`	`14px`	11px text
`font.lineHeight.200`	`16px`	13px text
`font.lineHeight.300`	`18px`	15px compact title text
`font.lineHeight.400`	`20px`	14px, 15px, and 17px text
`font.lineHeight.500`	`22px`	15px paragraph text and 19px titles
`font.lineHeight.600`	`26px`	24px titles
`font.lineHeight.code`	`30px`	Large SMS-code digits
`font.lineHeight.700`	`38px`	34px display titles

Letter Spacing

Token	Value	Usage
`font.letterSpacing.default`	`0`	Default text
`font.letterSpacing.sidebar`	`-0.3px`	Sidebar text

Источник: specs/ux/foundations/typography.md