Scaled Metric Surprises on iOS & iPadOS
Explains unexpected scaling behavior of UIFontMetrics and @ScaledMetric in iOS/iPadOS and provides a workaround for proportional UI scaling.
Explains unexpected scaling behavior of UIFontMetrics and @ScaledMetric in iOS/iPadOS and provides a workaround for proportional UI scaling.
A developer details how they fixed blurry font rendering in Safari on iOS by correctly configuring the @font-face rule for a variable font.
A simple CSS snippet for quickly styling text-based HTML pages with improved typography and layout.
A developer's exploration of font selection for websites and coding, covering criteria, cost, and specific monospaced fonts for programming.
A tutorial on creating fluid, responsive typography using the CSS clamp() function to make font sizes scale dynamically with screen or container size.
Explains why using unitless ratios for CSS line-height is better than fixed pixel values for responsive, flexible typography.
A guide to implementing Dynamic Type support with monospaced digit fonts in iOS apps to prevent UI layout shifts.
Explores the concept of 'CSS forces' as a design principle for creating balanced, fluid layouts by distributing pressure and relief across a composition.
A developer shares their personal journey of buying, using, and ultimately abandoning the premium Operator Mono code font, reflecting on developer culture and tool choices.
Discusses a font rendering bug caused by Google Fonts updates, arguing for self-hosting fonts for control and performance.
Explains how using variable web fonts can improve website performance by reducing font file requests and page load times.
A technical guide on fixing vertical alignment issues in button labels caused by font line-height, using CSS pseudo-elements.
Explores CSS techniques for inheriting grandparent font sizes using type-relative units, with practical examples and use cases.
A technical guide to creating animated underlines for links using modern CSS properties like text-underline-offset and text-decoration-color.
A developer explores Google Fonts subsetting to reduce font file sizes, sharing performance tests and results from implementing it on a website.
The author details the design process for the Learn JavaScript course portal, focusing on typography, layout, and heading structure for optimal learning.
Andy Bell shares a front-end tip for preventing line breaks using a zero-width, non-breaking space HTML entity.
A technical tutorial on recreating the 'His Dark Materials' TV show logo using advanced CSS techniques like pseudo-elements and custom properties.
Reflects on the permanence and global considerations of web standards, advocating for careful feature development and platform-native solutions.
The article argues for more intuitive and enjoyable user interfaces for working with variable fonts, comparing current tools to clunky emoji selection.