Skip to content
Jaringan

Foundations

Typography

Archivo at five widths for headings, labels and signage, Atkinson Hyperlegible Next for reading, and Noto Sans SC for Chinese. Set text with a single type-* class.

Families

Display, headings, signage, UI

Archivo

A grotesque with a width axis from 62 to 125: expanded headlines, standard headings, semi-condensed station labels and condensed line badges from one family.

Body, lede, captions, forms

Atkinson Hyperlegible Next

Designed by the Braille Institute so that similar characters stay distinct: I, l and 1, or 0 and O. That matters for student IDs, room codes and second-language readers.

Chinese, all roles

思源黑体

Noto Sans SC: a 黑体 (sans), the style of Chinese metro signage, with weights that match Archivo's.

Fonts load only through next/font/google, which self-hosts them. Never the Google Fonts CDN, which is unreliable from mainland China, where most readers are. Noto Sans SC needs preload: false; the browser downloads only the unicode-range slices a page uses.

Width

Width is set inside the type-* utilities. Never set it by hand and never fake it with scale-x. The specimens below override it only to show the axis.

  1. 125 · ExpandedDisplay sizes on screens ≥ 64remKepengurusan 2026/2027
  2. 112 · Semi-expandedDisplay sizes on phones, type-display-lgKepengurusan 2026/2027
  3. 100 · NormalHeadings, UI labels, buttons, numeralsKepengurusan 2026/2027
  4. 87.5 · Semi-condensedtype-sign: station names, timetablesKepengurusan 2026/2027
  5. 75 · CondensedLine badgesKepengurusan 2026/2027

Type scale

Fluid sizes interpolate from a 360px to a 1440px viewport. Heading levels: h2 → display-lg, h3 → heading-lg, h4 → heading-md. Never skip levels.

  1. type-display-2xlArchivo 800 · 44→120px · wdth 112→125Home hero h1 onlyOne network.
  2. type-display-xlArchivo 800 · 38→80px · wdth 112→125Page h1Kepengurusan
  3. type-display-lgArchivo 750 · 32→56px · wdth 112Section h2, lead member nameUpcoming events
  4. type-heading-lgArchivo 700 · 24→32pxh3, event and article titlesShenzhen Cup 2026
  5. type-heading-mdArchivo 650 · 20→24pxh4, member namesNadia Putri Rahman
  6. type-heading-smArchivo 700 · 17pxForm section headings, footer titlesData diri
  7. type-numeralArchivo 700 · 40→72px · tabularDates and stats14
  8. type-signArchivo 600 · 15px · wdth 87.5Station names, timetable cells, metadataCUHK-Shenzhen · 19.00
  9. type-kickerArchivo 600 · 13px · +0.08em · capsSection kickers, status badgesUpcoming events
  10. type-uiArchivo 600 · 16pxButtons, nav links, labelsSee all events
  11. type-ledeAtkinson 400 · 20→24pxStandfirst under an h1More than five hundred students on six campuses.
  12. type-body-lgAtkinson 400 · 18→20pxArticles, AboutWe meet every month on a different campus.
  13. type-bodyAtkinson 400 · 17→18pxDefault body, input textOprec is open until September 30.
  14. type-body-smAtkinson 400 · 15pxSummaries, toast messagesWe'll let you know by email.
  15. type-captionAtkinson 400 · 14pxCaptions, helper and error textPhoto: Media Kreatif division

Three languages

Bahasa Indonesia comes first. Indonesian runs 20–30% longer than English, so test every component with its longest Indonesian label. Mark Chinese blocks lang="zh-Hans": the CSS switches to Noto Sans SC, drops tracking, uppercase and italics, scales display sizes and loosens line heights.

The same block in each language
Preview

Upcoming events

Shenzhen Cup 2026

Badminton, basketball, Mobile Legends and mini soccer. Open to every campus.

Upcoming events

Shenzhen Cup 2026

Badminton, basketball, Mobile Legends and mini soccer. Open to every campus.

即将举行的活动

深圳杯 2026

羽毛球、篮球、王者荣耀和五人制足球。欢迎所有校区的同学参加。

Show code
<section lang="zh-Hans">
  <p className="type-kicker">即将举行的活动</p>
  <h3 className="type-heading-lg">深圳杯 2026</h3>
  <p className="type-body">羽毛球、篮球……<em>欢迎</em>所有校区的同学参加。</p>
</section>
Bilingual station labelThe Latin name in type-sign, the Chinese name below in type-caption.
Preview
CUHK-Shenzhen香港中文大学（深圳）SUSTech南方科技大学Tsinghua SIGS清华大学深圳国际研究生院
Show code
<StationLabel name="CUHK-Shenzhen" zh="香港中文大学（深圳）" />
FormatEnglish (the UI)Bahasa Indonesia (an Indonesian block)
DateSat, Nov 14Sab, 14 Nov
Time with WIB19:00 Shenzhen time (18:00 WIB)19.00 waktu Shenzhen (18.00 WIB)
Number1,5001.500
MoneyRp50,000Rp50.000
Today (fixed for previews)Tue, Oct 13Sel, 13 Okt

Rules

  • No text below 13px. 13px is only for uppercase kickers; line badges are 12px condensed codes, not sentences.
  • Body text is never below 17px. Input text is never below 16px, so iOS doesn't zoom on focus.
  • Left-aligned, never justified. Running text at most 66ch (Chinese at most 38em).
  • Uppercase only through type-kicker and line badges. Sentence case everywhere else.
  • Keep expanded hero copy short; put &shy; in an unavoidable long word and check at 320px.

Don’t

text-5xl font-black tracking-tight, or stretching type with scale-x.

Do

One type-* class. The width axis is set inside it.

Don’t

Tracking, uppercase kickers or italics on Chinese, or a Chinese block without lang.

Do

lang="zh-Hans" on the block. The CSS handles fonts, line height and emphasis dots.