Typography
Isang typeface, ilang weight, at isang role-based na scale na bumababa ng isang baytang sa mas maliliit na screen. Bawat laki sa ibaba ay isang CSS variable na binabasa mula sa stylesheet.
Typeface
Ang interface ay nakatakda sa Inter, self-hosted sa halip na kinuha mula sa isang font service kaya hindi kailanman naghihintay ang unang paint sa isang third-party na request. Walang display o heading font: ang weight at laki ang nagdadala ng hierarchy. Ang mga heading ay tumatakbo sa 800, ang mga sub-heading at label sa 700, ang mga button at diin sa 600, at ang body copy sa 400.
Ang buong stack ay bumabalik sa system sans-serif kung hindi pa na-load ang Inter, kaya laging nababasa ang text.
Ang scale
Ang mga laki ay mga role, hindi mga isahang gamit. Ang parehong variable ang nagpapatakbo sa bawat title ng pahina, bawat section heading, at iba pa. Ang tatlong column ay ang desktop value at ang dalawang step-down, na inilalapat sa tablet at mobile breakpoint sa Layout page.
| Token | Desktop | Tablet | Mobile | Role |
|---|---|---|---|---|
--fs-h1 | 34px | 32px | 30px | Title ng pahina, kasama ang green bar. |
--bar-h1 | 52px | 48px | 44px | Lapad ng green bar sa ilalim ng title. |
--fs-h2 | 26px | 20px | 18px | Mga section heading. |
--fs-h3 | 20px | 18px | 17px | Mga sub-heading at detail browline. |
--fs-h4 | 18px | 16px | 14px | Mga minor na label sa multi-role na pahina. |
--fs-body | 17px | 15px | 14px | Long-form na copy sa labas ng mga artikulo. |
--lh-body | 1.6 | 1.6 | 1.7 | Line height para sa body copy. |
--fs-prose | 17px | 16px | 16.5px | Laki ng pagbabasa ng artikulo. |
--fs-prose-h2 | 24px | 21px | 21px | Mga section heading ng artikulo. |
Mga specimen
Na-render sa kanilang live na laki. Paliitin ang window at bababa ang mga ito nang eksakto tulad ng ginagawa ng site.
Ang title ng pahina
--fs-h1 34px · 32px · 30px 800 Title ng pahina. May dalang green bar sa ilalim nito.
Isang section heading
--fs-h2 26px · 20px · 18px 700 Section heading.
Isang section heading ng artikulo
--fs-prose-h2 24px · 21px · 21px 700 Section heading ng artikulo, kasama ang green underline.
Isang detail sub-heading
--fs-h3 20px · 18px · 17px 700 Detail sub-heading at browline.
Isang minor na label
--fs-h4 18px · 16px · 14px 700 Minor na label, multi-role na pahina.
Itinatakda ng body copy ang bilis ng pagbabasa sa labas ng mga artikulo: sapat ang haba para makahinga, sapat ang ikli para ma-scan. Ito ang laki kung saan binabasa ang karamihan ng mga salita sa site.
--fs-body 17px · 15px · 14px 400 Long-form na copy sa labas ng mga artikulo.
Laki ng pagbabasa ng artikulo, bahagyang mas malaki at mas maluwag, nakatono para sa mahabang pag-upo na may isang column ng text.
--fs-prose 17px · 16px · 16.5px 400 Laki ng pagbabasa ng artikulo.
Mga heading treatment
Dalawang green na marka, dalawang trabaho. Ang mga page title at section title ay may maikling green bar sa ilalim ng unang mga salita: fixed-width na accent na hindi humahaba kasama ng teksto. Ang mga article heading naman ay may buong underline na umaabot sa lapad ng mga salita. Kung sakop ng marka ang teksto, nasa loob ka ng artikulo; kung maikling bar ito, page o section title ang tinitingnan mo.
Monospace
Minamarkahan ng monospace stack ang anumang machine-set: mga meta line at petsa, mga tag at badge, table header, code, at ang maliliit na uppercase na kicker. Nagpapahiwatig ito ng “ito ay data, hindi prosa”. Ang stack ay SF Mono, Fira Code, Cascadia Code, pagkatapos ay ang system monospace.
Sa paggamit
Kung saan lumilitaw ang bawat role:
May isang nuance ang body role: sa home page, ang unang talata ng about text ay tumataas sa primary colour at medium weight, isang tahimik na lede treatment.
- Title ng pahina. Ang h1 sa bawat top-level na pahina, kasama ang green bar.
- Section heading. Mga band heading, kasama ang maikling green underline.
- Heading ng artikulo. Ang h2 sa loob ng isang blog post, kasama ang green underline. Article h2 lamang; ang mga sub-heading ay bumababa sa plain na weight.
- Body. About na text, mga intro ng pahina, card copy.
- Prose. Ang reading column ng isang artikulo.
- Meta. Mga petsa, oras ng pagbabasa, mga tag. Monospace.