typo.

interactive specimen for exploring baseline size and modular scale. the deeper rationale still lives in the mathematical typography note.

Playground rules (typo)

Rules implemented in this playground. Baseline size $s_b$ and scalar $r$ are the only inputs:

l_b = s_b \cdot r^2, \qquad b = l_b

Headline sizes for level $k \in \{1,\ldots,6\}$ use step index $n = 7 - k$ :

s_n = s_b \cdot r^n

The spacing coefficients are locked to the reciprocal scale:

\alpha = \lambda = \frac{1}{r}

Paragraph and figure spacing therefore become:

p = \frac{b}{r}, \qquad \text{figure space} = 2p

Caption: size $s_b / r^2$ , gap $p / r = b / r^2$ , line-height $r^2$ .

Bullet list:

Top and bottom: margin $p$ above and below the list.
Left: padding-left $b$ .
Between items: gap $p/2$ between list items (last item has no margin below).

Heading margins (per level, with $s_n$ the heading’s font size):

m_t = \frac{2 s_n}{r}, \qquad m_b = 4 \ln(s_n)

baseline text size

scalar r

alpha = lambda =

A Mathematical Headline for Testing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede.

Heading Two

Sed feugiat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut pellentesque augue sed urna. Vestibulum diam eros, fringilla et, consectetuer eu, nonummy id, sapien. Nullam at lectus. In sagittis ultrices mauris. Curabitur malesuada erat sit amet massa. Fusce blandit. Aliquam erat volutpat. Aliquam euismod. Aenean vel lectus. Nunc imperdiet justo nec dolor.

Heading Three

Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam.

Heading Four

Heading Five

Heading Six

Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.
Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper arcu massa, scelerisque vitae, consequat in pretium.
Pellentesque congue ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue praesent egestas leo in pede. Fusce blandit aliquam erat volutpat.
Aliquam euismod aenean vel lectus nunc imperdiet justo nec dolor. Sed feugiat cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Annotated DSP preamp algorithm architecture diagram. — Annotated signal-flow diagram used as a neutral specimen image.