Design
Good design goes beyond appearance. Typography, layout, usability, and the small decisions that make digital experiences feel right.
Browse 30 articles in this topic. View all topics.
- Better Vertical Text Alignment With text-box-trim
CSS text-box-trim adjusts space around text using font metrics. See cap and baseline edges, heading and button examples, plus readable browser fallbacks.
- CSS border-shape Can Draw Boxes clip-path Cannot
CSS border-shape lets borders and shadows follow a custom outline. Compare it with clip-path, try complete examples, and keep a usable rounded fallback.
- CSS corner-shape Goes Beyond Rounded Corners
CSS corner-shape adds bevels, scoops, and squircles to ordinary boxes. See how it works with border-radius, normal borders, and a rounded-card fallback.
- CSS Calculations With sibling-index() and sibling-count()
Use CSS sibling-index() and sibling-count() for staggered animations and position-based calculations, with working examples and browser support checks.
- Smarter Responsive Calculations With CSS round()
CSS round() snaps responsive values to useful steps. See rounding strategies, spacing scales, and a column calculation, with browser support checks.
- 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
Why 100vh can exceed the visible mobile screen. Choose svh, lvh, or dvh, let content grow, and put older Safari workarounds in their historical context.
- 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.