Design
Browse 26 articles in this topic. View all topics.
- Better Line Breaks With CSS balance and pretty
Use text-wrap balance for short headings and text-wrap pretty selectively for longer copy without hard-coded line breaks.
- Why 100vh Doesn’t Always Fit a Mobile Screen
Choose svh, lvh, dvh, or a flexible min-height when mobile browser controls make 100vh an awkward fit.
- Making Links Easy to Recognize
Make links recognisable with underlines, clear focus states, useful text, and behaviour that does not surprise the reader.
- A More Useful 404 Page in Hugo
Turn Hugo's 404 page into a useful route back to the homepage, search, or content visitors may have wanted.
- Smoother Page Changes With View Transitions
Use the View Transition API for same-page state changes and progressive cross-document animation on a normal multi-page site.
- When to use CSS clip-path or mask
Choose between CSS clip-path and mask by deciding whether the element needs a hard boundary or levels of transparency.
- Fading images with CSS masks
Use CSS masks for image fades, scroll hints, cutouts, and recolourable icons without changing the source asset.
- Responsive shapes with CSS shape()
Use the CSS shape() function for scalable clipping paths with lines and curves, while keeping a simple fallback.
- The Modern CSS Color Functions I Find Useful
Practical uses for oklch(), color-mix(), relative colors, and light-dark() in modern CSS.
- CSS Scroll-Driven Animations Without JavaScript
Link CSS animations to scrolling for progress bars and reveal effects without maintaining scroll event listeners.
- CSS interpolate-size: Animate From 0 to auto
Animate between fixed and intrinsic sizes such as auto with CSS interpolate-size, while keeping a safe fallback.
- Self-Hosting Web Fonts Without Overcomplicating It
Serve WOFF2 fonts from your own site with a focused @font-face rule, sensible fallbacks, and the right licence and caching checks.
- Serving Google Fonts from your own domain with Cloudflare
Cloudflare Fonts can serve Google Fonts from your own domain. Here is what that changes for performance, privacy, and setup.
- Figma vs Sketch in 2024
A practical 2024 comparison of Figma and Sketch, focused on collaboration, platforms, offline work, and handoff.
- Figma vs Sketch: The Workflow Matters More Than the Feature List
Compare Figma and Sketch by platform support, collaboration, files, prototyping, plugins, and the workflow your team already uses.
- One Font File, Many Weights: Variable Fonts
Use one variable font file to cover a range of weights, widths, slants, and other typeface variations.
- Font sizes that scale with the screen using CSS clamp()
Use CSS clamp() to make type scale with the viewport without becoming tiny on phones or enormous on wide screens.
- What's different about OpenType and TrueType fonts?
The practical difference between OpenType and TrueType fonts, including outlines, typographic features, and compatibility.
- Illustration libraries for websites and apps
A practical list of customisable, free, and commercial illustration libraries for websites and apps.
- The hidden fonts included with macOS Catalina
macOS Catalina includes optional fonts from Commercial Type and Klim Type Foundry, but you need to download them in Font Book.