Analog Surf Styleguide

Fonts

Heading: Figtree | style: normal | baseline_ratio: 0.15

Crazy Frederick bought many very exquisite opal jewels

Subheading: Figtree | style: normal | baseline_ratio: 0.15

Crazy Frederick bought many very exquisite opal jewels

Accent: Figtree | style: normal | baseline_ratio: 0.15

Crazy Frederick bought many very exquisite opal jewels

Body: Figtree | style: normal | baseline_ratio: 0.15

Crazy Frederick bought many very exquisite opal jewels

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

Paragraph text

Button text

Accordion text

Tab text

Section title

Kicker title / list title

Richtext output (page, product description, article, etc.)

Typographic elements in type-resize-all-xl prose wrapper

Typographic elements in type-resize-all-lg prose wrapper

Typographic elements in type-resize-all-md prose wrapper

Typographic elements in type-resize-all-sm prose wrapper

Typographic elements in type-resize-all-xs prose wrapper

History of the Web

The web has evolved from static documents into dynamic, interactive platforms shaping everyday life.

Tim Berners-Lee proposed the World Wide Web in 1989 as a way to share information across systems. Hosted at CERN in 1991, the first website explained the basics of the web, linking to related documents.

The 1990s saw explosive growth as businesses flocked online, giving rise to the .com era.

Web 2.0 and User Content

Sites like Wikipedia, YouTube, and Facebook ushered in the age of user-generated content.

Text Styles

Use emphasis, bold, code, and Ctrl + Z to represent keyboard input.

Lists

HTML
CSS
JavaScript

Plan
Design
Deploy

HTML: Structure of web pages
CSS: Visual styling

Table

Tech	Purpose	Year
HTML	Page structure	1991
CSS	Styling	1996
JavaScript	Interactivity	1995

Blockquote / Indent Support

"Vague but exciting." — Mike Sendall

This represents a second level of indentation.

Conclusion

The web continues to grow—from a simple document-sharing tool to a foundation for global communication and commerce.

Baseline ratio centering

Centering fonts with `baseline_ratio` and css `cap` height values.

HTML wraps fonts in a content box. When two different fonts are used in a line, the font baseline is used to align them.

This magic assumes inline positioning. When fonts are displayed inside buttons and badges we lose the magic baseline information.

We also gain an extra bit of alignment complexity.

For most fonts, centering a capitalized letter requires two ratios:

Baseline: distance from the bottom of the content box to the baseline
Cap height: distance from the top of the content box to the top of the capitalized letters

Centering a lowercase letter requires a third value:

X-height: distance from the top of the content box to the top of a lowercase x

Lowercase fonts also have:

Ascender: the top of a curve letter like f may protrude above the cap height
Descender: the bottom of a j or p

This is why visually centering a font is challenging. The centering is not the same for uppercase and lowercase letters.

How it works:

To achieve visual centering, we calculate the space above the cap-height and below the baseline, represented below as the colored areas.

We turn those values into three classes that can be used to center text:

One that only calculates the vars and lets you decide how to center the text
Two that trim them from the line height, and apply them as margin or padding but flipped so the text is perfectly centered when capitalized and optically near-centered when lowercase containing capital letters

The reason this is not done everywhere is because it's not an improvement over baseline centering, and only works perfectly in cases where the font is uppercase. It works very well in buttons and badges, but will not improve the rhythm of prose text.