Hasty Treat - CSS Typography and Systems

Episode Summary

Executive Summary: The episode focuses on building maintainable CSS typography systems using consistent font scales, CSS variables, and reusable conventions. Scott and Wes compare approaches, discuss accessibility and responsive behavior, and recommend using tools like Type Scale to generate harmonious type hierarchies instead of eyeballing every value. The core message is that a typography system reduces guesswork, improves consistency, and helps prevent messy, hard-to-maintain CSS.

Main Topics: Why typography systems matter: The hosts explain that consistent typography improves visual quality, reduces amateur-looking inconsistencies, and prevents CSS from devolving into random one-off values over time. Scott’s typography workflow: Scott describes organizing typography in a dedicated typography.css file, using a 10px or 62.5% base, rem-based sizing, semantic headings, and utility variants like hero or large text. Wes’s CSS variable-based scale: Wes outlines a fully variable-driven approach where all font sizes come from CSS variables, including named sizes for navigation, body text, headings, and extra-large display text. Responsive scaling and accessibility: The discussion covers how font systems interact with media queries, how base sizes can scale the whole typographic system, and why zoom/accessibility concerns are less problematic with modern browser behavior. Using Type Scale to generate a system: The hosts recommend Type Scale as a practical tool for generating font hierarchies based on ratios and previewing the results before copying the CSS into a project. Semantic markup vs visual styling: They discuss styling an H2 to look like an H1 while keeping semantic heading levels intact for accessibility, SEO, and document structure. Systems as a guardrail for non-designers: They emphasize that a defined system helps developers who are not typography experts make good-looking choices without needing deep design training.

Key Arguments: A typography system enforces consistency, which is a major factor in making interfaces look polished. Using a dedicated file or centralized variables makes typography easier to maintain and discourages ad hoc overrides. Rem-based sizing tied to a base HTML font size allows the whole scale to be adjusted predictably. Modern browser zoom behavior makes old accessibility concerns about setting the base font size less relevant than they used to be. Semantic heading tags should remain correct even when their visual appearance needs to differ. CSS variables let teams define all font sizes in one place and avoid thinking about raw pixel values throughout the app. Tools like Type Scale are valuable because typography is a specialized discipline and generators help produce balanced scales. A system reduces decision fatigue by limiting the number of choices developers make when styling text.

Data Points: Base font size example: 10px / 62.5% - Scott describes setting the HTML base font size to 10px or 62.5% so rem values are easy to calculate mentally. Body text size example: 1.5rem - Scott says he usually sets paragraph, list, and button text to around 1.5rem. Wes’s typographic scale count: 9 font sizes - Wes mentions using nine font sizes ranging from 3.052rem down to 0.512rem. Base font size example: 18px - Wes says his HTML base font size is set to 18px. Additional display sizes: 7 heading levels plus extra-large variants - Wes describes heading sizes from heading one through heading seven, plus extra heading and extra big ass heading. Free usage tier offer: Double the free usage tier - Sanity sponsorship offer mentioned with the URL sanity.io/syntax. Sentry promo: 2 months free - Sentry sponsorship includes coupon code tasty tree for two months free.

Pivotal Quotes: "How do you define type in your projects? Font sizes, font families, those type of things. How do you define them in your actual projects?" — Scott Tolinski: Sets up the episode’s main question about creating maintainable typography systems. "The reason behind that is because the default font size in the browser is 16 pixels." — Scott Tolinski: Explains the rationale for choosing a 10px or 62.5% base for easier rem calculations. "If you have a system for your typography and a system for your spacing, then as long as you have that system, it's going to be consistent." — Scott Tolinski: Summarizes the central design philosophy behind systematizing CSS typography.

Implications: Listeners are encouraged to centralize typography decisions, use generators and variables, and keep semantics intact. For teams, this means easier scaling, better accessibility, and more maintainable CSS systems.