Bookmarks

Published: June 17th, 2025

Updated: July 11th, 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.

Table of contents

• Web development and design
  • Typography and fonts
  • Color and accessibility
  • Cascading Style Sheets (CSS) and standards
  • Articles and guides
  • Static Site Generators (SSGs)
  • Scalable Vector Graphics (SVG) utilities
  • Research and studies

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.

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.

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.