Imagine a garden newsletter with long paragraphs. Giving narrow and wide letters equal space can make its prose uneven.
How: work toward a solution
Read the garden letter, then use the separate width lab. The loaded Noto Sans gives i and W different advances. Tabular digits can still align numbers. Changing letter spacing is not what makes the face proportional.
Read a garden newsletter, then compare character advancesGARDEN LETTER / SEPTEMBER
A note from the garden
Small leaves, wide windows
Morning light reaches the new shelf. We moved the fern beside the window and left a little space for the next green arrival.
Bring a cutting to our Saturday plant exchange.
Optional type measurement
iiiWWW 0123
Measured advances appear after fonts load.
111.11888.88123.45
The editable width sample starts at 48px. The named face renders supported Latin; Korean and Japanese use Noto CJK. Other characters may fall back. Guides measure text in context, so shaping and ligatures can affect the ranges.
A fictional demo within this article. Reset or reload restores its initial state.
What: the concept
Proportional letters use varying advance widths.
Font coverage and number features vary; measure the loaded face rather than infer widths from its name.
Choose proportional letters when running text should reflect different glyph proportions. Use monospace when spaces must align Latin columns. Both serif and sans-serif families may be proportional, and proportional text may use tabular numerals.
02Applications
The garden newsletter pairs flowing Latin paragraphs with localized supporting text. Editorial pages and everyday interface copy can use the same width model. Inspect the actual font and script rather than assuming every glyph is proportional.
03Implementation & cautions
Wait for document.fonts.ready and inspect the loaded font. Range measurements retain shaping in one text node; ligatures, combining marks and fallback glyphs can affect ranges. Keep width experiments separate from the real specimen, and test localized font coverage.
Already talking with external AI? Share this article link and explain why the choice fits your project and which tradeoff matters. Ask how it applies to your agreed requirements.
Discuss this idea
Comments are shared across languages. GitHub login required to post.