Celestial circles and sundials: the ritual of space in an interface
Revisit Junction's original imagery of circles, dials, paper, and ink, and turn the idea of space into a reading practice.
A PATH THROUGH THE FOLIO
Quest · Find a rhythm for reading
Explore space, type, bilingual rhythm, and colour. Give visual choices a reason and readers a clear, comfortable route through the page.
Read in order
01 / CHAPTERS↗
Give type a range—and reading some room
Build a reusable typography starting point by considering body size, scale, spacing, and viewport together.
Punctuation and wrapping: a rhythm for both languages
Test real headings, long links, and bilingual paragraphs without forcing both languages into the same visual rhythm.
What to check after the contrast ratio
A color-pair check is a beginning; text size, backgrounds, focus, and error states still need review in the actual page.
Keep exploring
02 / REFERENCESTypography
Fluid type with clamp() ↗
Express bounded CSS sizes with minimum, preferred, and maximum values.
Read alongside the typography workshop's size range to understand responsive changes.
- For
- Makers adjusting responsive headings and body text.
- Before use
- A formula does not replace reading tests, zoom checks, or extreme widths.
Source checked · 2026.10.13
developer.mozilla.org
Typography
Requirements for Chinese Text Layout ↗
Consult guidance on Chinese punctuation, line boundaries, and mixed-script layout.
A useful reference for punctuation and mixed-script issues before adding manual spaces.
- For
- Designers of Chinese long-form and bilingual pages.
- Before use
- An evolving layout reference; practical implementation still needs browser checks.
Source checked · 2026.10.13
www.w3.org
Typography
Line height ↗
Understand line-height values, inheritance, and unitless numbers.
Build line spacing that follows text size and reduces conflicting local styles.
- For
- People styling articles or building reading presets.
- Before use
- Examples are starting points; read long samples in both languages.
Source checked · 2026.10.13
developer.mozilla.org
Typography
Noto CJK fonts ↗
Explore Noto CJK font files, regional variants, and project documentation.
Start with a documented font source when planning CJK character coverage.
- For
- Developers selecting and deploying CJK fonts.
- Before use
- Check the chosen file's license, download size, and regional glyph variants.
Source checked · 2026.10.13
github.com
Accessibility
Text contrast ↗
Read the thresholds, conditions, and rationale for WCAG text contrast.
Give the contrast tool's numbers a source and avoid passing a rounded-up result.
- For
- People adjusting body text, links, and button labels.
- Before use
- A passing colour pair does not establish whole-site accessibility conformance.
Source checked · 2026.10.13
www.w3.org
Accessibility
Non-text contrast ↗
Understand contrast requirements for controls and meaningful graphics against adjacent colours.
Extend inspection beyond body text to inputs, graphics, and interface states.
- For
- Designers and developers creating forms and controls.
- Before use
- Check actual control states and adjacent backgrounds, not just brand colours.
Source checked · 2026.10.13
www.w3.org
Accessibility
Page structure tutorial ↗
Organize understandable pages with regions, heading levels, and content structure.
Long articles and curated directories need navigable structure as well as visual spacing.
- For
- People organizing article templates and site navigation.
- Before use
- Apply it to real HTML and include keyboard and assistive-technology checks.
Source checked · 2026.10.13
www.w3.org
Accessibility
Accessible interaction patterns ↗
Consult semantics, keyboard interaction, and examples for common components.
Establish behaviour before styling interactions such as dialogs and tabs.
- For
- Front-end developers implementing custom interactions.
- Before use
- Adapt and test examples; consider native elements where suitable.
Source checked · 2026.10.13
www.w3.org