Typographic Foundation

We tested 47 typefaces before selecting the final combination. The body text needed to sustain 3,000-word reads without eye fatigue, which eliminated any typeface with quirky proportions, inconsistent spacing, or insufficient x-height. The display type needed to create hierarchy without shouting — a typeface that could signal "this is important" at heading size while remaining elegant at smaller sizes for pull quotes and section titles.

We settled on a contemporary serif for body text and a geometric sans-serif for navigation, metadata, and functional elements. The serif provides warmth and readability for long-form content, while the sans-serif handles the utilitarian aspects of the interface without competing for attention. The two typefaces share proportional DNA — similar x-heights, compatible stroke weights — ensuring they feel like a designed pair rather than an arbitrary combination.

Line lengths were meticulously controlled. Research consistently shows that optimal reading comfort occurs between 45 and 75 characters per line, and we calibrated the content width to sit at 65 characters at the default body size. Line heights were adjusted to account for the specific proportions of the chosen serif, creating a reading rhythm that feels effortless even across thousands of words.

Grid and Layout System

The grid is built on a 12-column system that allows for three distinct article layouts: standard (single column, text-focused), feature (wider with pull quotes and inset images), and visual (image-heavy with text overlays and full-bleed photography). Each layout has its own rhythm but shares the same proportional DNA, so readers moving between article types experience variety without disorientation.

White space is generous throughout. Margins between paragraphs, around images, and between sections are calibrated to create natural pauses in the reading experience — visual breathing room that allows each idea to land before the next begins. Line lengths are controlled, reading distance is considered, and every spatial decision serves the act of reading.

We designed a system for image placement that respects the editorial flow. Images are never positioned arbitrarily — each placement option (inline, inset, full-width, side-by-side) has specific rules about where it can appear relative to the text it accompanies. This prevents images from interrupting a paragraph mid-thought or creating awkward visual gaps in the reading flow.

Digital and Print Bridge

Chronicle publishes both online and in a quarterly print edition, and both audiences expect the same editorial quality from the design. The system works across both media — the same typographic hierarchy, the same image treatment principles, the same sense of space and proportion. Readers who move between the website and the print edition experience continuity rather than disconnect.

The print edition uses the same grid system adapted to the physical page, with specific accommodations for the tactile qualities of print: paper stock selection, ink density, binding method, and the way spreads create spatial relationships that single screens cannot. The digital edition uses the same grid adapted for responsive viewing, with breakpoints that maintain reading comfort and proportional harmony across devices.

This dual-media consistency required careful font licensing and production planning. The typefaces are licensed for both web and print use, and the design tokens — sizes, spacing, color values — are maintained in a shared system that feeds both the website's CSS and the print templates in InDesign. Changes made in one context automatically propagate to the other.