Best of Typography — 2025
- 1
- 2
daily.dev Changelog·44w
We improved readability on daily.dev
Daily.dev implemented several typography and readability improvements including better font sizing, improved heading hierarchy, balanced line heights, wider reading areas, and faster font loading with smoother fallback handling. These incremental changes aim to create a more comfortable reading experience and reduce eye fatigue for users consuming content on the platform.
- 3
Hacker News·1y
Nebula Sans
Nebula Sans is a custom typeface created by Nebula to address personalization, advanced typography features, and sustainability concerns regarding commercial font licensing. Built on the foundation of Source Sans, adjustments were made to align it with the metrics of Nebula's previous brand typeface, Whitney SSm.
- 4
WebCraft·37w
Fira Code iScript, to make reading code faster
Fira Code iScript is a font variation that combines Fira Code's regular and bold styles with Script12 italics to improve code readability. The font maintains ASCII compatibility, supports IDE ligatures, and uses visual symbols to replace common programming sequences like arrows and comparison operators, helping developers read code faster with reduced cognitive load.
- 5
Open Source·1y
What I Learned After 3 Hours of Typography Debugging
Learn about the challenges and solutions related to typography in web development, focusing on the differences in text rendering between Figma and browsers. This guide covers essential concepts like baseline, cap-height, x-height, and provides practical solutions for common text alignment issues.
- 6
Collections·24wNew CSS Properties for Responsive Text Sizing: text-grow and text-shrink
Chrome Canary 145 introduces experimental CSS properties `text-grow` and `text-shrink` that enable automatic text resizing to fit container widths. These properties support multiple scaling methods including font-size adjustments, letter-spacing, and inline scaling, with options for per-line or consistent fitting. While promising for responsive typography without JavaScript, accessibility concerns remain around font enlargement and interactions with line-heights, paragraph endings, and inline images. The feature is in early discussion at the CSS Working Group.
- 7
Codrops·44w
Motion Highlights #11
A curated collection of 21 standout motion design and animation projects from creative professionals, featuring kinetic typography, UI interactions, grid animations, and experimental motion graphics. The roundup includes work from various studios and designers showcasing diverse animation techniques and styles, plus a recommendation for a free GSAP JavaScript animation course.
- 8
Community Picks·52w
Figma Design System Generator
Kigen is a Figma plugin that accelerates design system creation by providing pre-built color palettes from popular design systems, predefined variables, semantic aliases, typography tokens, and standardized spacing scales. It includes documentation features for token handoff and supports best practices for consistent UI design across products.
- 9
Brad Frost·1y
Future Fonts
Future Fonts is a platform where type designers sell fonts-in-progress, offering inspiration and support for independent designers. The author shares their experience of buying a font named Mayonnaise and replacing a Google Font on their website, finding it a great way to support independent creators.
- 10
Chrome Developers·1y
Chrome for Developers
From Chrome 133, the text-box property allows developers and designers to control the space above and below text elements like <h1>, <button>, and <p>. This feature offers improved optical balance and easier alignment, overcoming previous challenges with uncontrollable half leading space. Examples and demos show effective usage of text-box for better text layout and design.
- 11
Motion Highlights #5
Motion Highlights #5 presents a curated selection of standout motion designs from diverse creators. The post includes highlights such as After Effects templates, menu animations, fluid mouse interactions, and typography motions. Notable creators featured are Satto.studio, Motto, Nathan Riley, and others, providing inspiration for enthusiasts and professionals in the field.
- 12
CSS-Tricks·23w
Toon Title Text Generator
Andy Clarke released a tool that generates cartoon-style typography with configurable options for font, color, stroke, spacing, and shadows, outputting ready-to-use CSS. The tool pairs with Splinter.js, a text-splitting library that wraps each character in accessible markup using ARIA attributes to prevent assistive technology issues, improving upon traditional solutions like SplitText.js.
- 13
Web Dev Simplified·49w
I Love This New CSS text-wrap Feature
CSS introduces new text-wrap properties to solve common responsive design issues with text layout. The 'balance' property distributes text evenly across lines, making titles look more balanced, while 'pretty' prevents single words from appearing alone on new lines in paragraphs. Balance has good browser support at 90%, but pretty isn't yet supported in Firefox or Safari. Both properties work as progressive enhancements that gracefully degrade without breaking layouts.
- 14
The Elements of a Clean Web Design
Clean web design relies on four key elements: solid grid-based layout structure, restrained typography using 1-2 typefaces with proper spacing, limited color palettes focusing on grays plus one accent color, and consistent imagery style throughout. To achieve clean designs, start with complex layouts then simplify by removing non-essential elements, continuously tweak details like spacing and colors, and regularly print layouts to evaluate the overall system. The process requires balancing imagination with meticulous attention to detail.
- 15
WebKit·1y
Better typography with text-wrap pretty
Support for text-wrap: pretty has been introduced in Safari Technology Preview, enhancing typography on the web by using paragraph-based algorithms to solve traditional issues like short lines, bad rag, and poor hyphenation. The feature aims to improve readability and aesthetics of web text significantly. It's compared to the text-wrap: balance value, illustrating the different use-cases for each. Using text-wrap: pretty should have minimal performance impact for typical-length paragraphs, and developers are encouraged to test it and provide feedback.
- 16
LambdaTest·1y
How to Use CSS Custom Fonts Effectively
Custom fonts enhance web design by allowing the use of diverse and unique styles that align with a brand's identity. CSS custom fonts can be added via hosted services like Google Fonts or self-hosting them using the @font-face rule. This includes understanding different font extensions for cross-browser compatibility, setting font properties, and optimizing loading times with the font-display property. Custom fonts improve branding, readability, aesthetics, and cross-browser compatibility, thus enhancing overall user experience.
