Bookmarks

Published: June 17th, 2025

Updated: July 25th, 2025

A curated collection of tools and resources that have proven genuinely useful. These focus on web development and design currently, with more sections coming over time.

Web development and design

Web development and design

Typography and fonts

Modern Font Stacks. System font stack CSS, organized by typeface classification.
System font stack. The fastest fonts available. No downloading, no layout shift, no invisible text.
Wakamai Fondue. The tool that answers the question, “What can my font do?”
Unicode Range Interchange. Perform math on unicode-range values for web fonts.
Accessible fluid CSS type generator. Generate accessible fluid typography CSS with appropriate constraints.
xheightable. Font pairing tool with x-height data from 150+ Google and Adobe fonts.
Triangle. Interactive game teaching the balance of font size, line height, and line width.
Letter Pair - Font Compatibility Analyzer. Tool for uploading and analyzing compatibility between up to three fonts.
Typewolf resources. Comprehensive collection of typography resources including books, tools, learning materials, type foundries, font services, blogs, and identification tools.
Typedetail resources. Curated typography resources organized by category including websites, blogs, online books, talks, tools, projects, events, foundries, and articles.

Color and accessibility

Advanced Perceptual Contrast Algorithm (APCA) Calculator. Next-generation contrast calculator.
WebAIM Color Contrast Checker. Verify color contrast ratios for Web Content Accessibility Guidelines (WCAG) compliance.
Whocanuse. See how color choices affect people with different vision types.
Oklab Lightness Chroma Hue (OKLCH) Color Picker. Perceptually uniform color picker in the OKLCH color space.
coloraide. Python library for color manipulation and conversion.
Material Theme Builder. Generate Material Design 3 color schemes from seed colors.

Cascading Style Sheets (CSS) and standards

Browser Default Styles. Search and compare default CSS styles across browsers.
Typography - U.S. Web Design System. Government design system typography guidelines and components.
Using type | U.S. Web Design System. Government design system’s approach to typography with optical normalization and design tokens.

Articles and guides

A comprehensive guide to font loading strategies. Complete guide to web font loading performance strategies.
Modern Fluid Typography Using CSS Clamp. How to create responsive typography with CSS clamp function.
Responsive Type and Zoom. Understanding how responsive typography affects browser zoom accessibility.
Addressing Accessibility Concerns With Using Fluid Type. Making fluid typography accessible for all people.
The Realities And Myths Of Contrast And Color. In-depth exploration of the science behind color and contrast.
The Equilateral Triangle of a Perfect Paragraph. Typography theory explaining how font-size, line-height, and line width work together.
Practical Typography. Matthew Butterick’s comprehensive online typography book covering fundamentals from type composition and text formatting to font recommendations and page layout.
Best Practices of Combining Typefaces. Guide to effectively pairing different typefaces in design, covering principles like serif-sans serif combinations, typographic personalities, contrast creation, and common mistakes to avoid.
Evaluating the quality of a typeface. Comprehensive criteria for assessing typeface quality beyond personal taste, including technical drawing quality, stroke consistency, character proportions, spacing, kerning, and design coherence for both users and designers.

Static Site Generators (SSGs)

Jamstack SSGs list. Comprehensive list of open source SSGs with optional filters for programming language, template, and license.
ssg. Minimal static site generator written in shell.
Zola. Rust-based static site generator using Tera templating engine, designed as an intuitive alternative to Hugo’s Go templates.

Scalable Vector Graphics (SVG) utilities

usvg. SVG simplification tool written in Rust that converts complex SVGs to simplified representations while maintaining validity.
svgo. Node.js-based SVG optimizer that removes redundant metadata and elements to reduce file size.
rsvg-convert. Command-line SVG renderer using Cairo that converts SVGs to other formats with high-quality output.

Research and studies

Readability group survey. Results from The Readability Group’s survey testing font accessibility claims.
Great typography bake off. Scientific study comparing eight fonts for glance-based legibility.
Utilising psychophysical techniques to investigate the effects of age, typeface design, size and display polarity on glance legibility. Psychophysical study of factors affecting text legibility in brief glance conditions.
Closed letter counters impair recognition. Experimental study showing closed apertures in letters reduce recognition accuracy.
Research Highlight | How important is x-height for font legibility?. Research summary on x-height’s impact on letter recognition through visual attention theory.
Good Background Colors for Readers: A Study of People with and without Dyslexia. Large-scale study showing warm background colors improve reading performance.
Towards Individuated Reading Experiences: Different Fonts Increase Reading Speed for Different Individuals. Large-scale study showing 35% reading speed variation between fonts.
The Influence of Fonts on the Reading Performance in Easy-to-Read Texts: A Legibility Study with 145 Participants. Study challenging sans-serif font recommendations for cognitively accessible texts.
Font Matters: Investigating the Typographical Components of Legibility. Comprehensive analysis of typographical factors affecting legibility in print and digital media.
Evaluating Fonts: Font Family Selection for Accessibility & Display Readability. Practical guide evaluating dozens of fonts for glyph distinctiveness and accessibility features.