CSS & HTML
CSS Tricks You Might Be Tempted to Use, and What to Use Instead
A practical review of the CSS tricks designers are tempted to use, which ones are now safe, which need care, and which…
Tag: typography
Typography
@font-face and Web Fonts: Self-Hosting, WOFF2 and font-display
Use @font-face with one WOFF2 file, a variable font, font-display and a preload. Compare self-hosting with Google Fonts and Adobe Fonts, and…
Typography
CSS @font-face Guide: WOFF2, Variable Fonts and Fallbacks
How to use @font-face today: ship WOFF2, use one variable font file, choose font-display deliberately, preload the critical file and build fallbacks…
Typography
A Brief History of Western Typography for Web Designers
A practical tour of Western typography, from blackletter and Venetian roman to Didone, grotesque sans serifs and variable fonts, with notes on…
Typography
Force Text to Wrap in CSS: overflow-wrap, hyphens and text-wrap
Use overflow-wrap: anywhere for flex and grid children, break-word for shrink-to-fit boxes, and polish line breaks with hyphens and text-wrap.
Typography
30 Free Fonts for Creative Projects
Thirty free fonts you can use commercially, grouped by job: text sans, serif, display, handwriting and monospace, plus how to self-host them.
Typography
HTML Symbol Entities: Characters, Arrows and Quotes the Modern Way
Named and numeric character references, UTF-8, CSS content escapes and when to use SVG instead, with accessible examples for quotes, arrows, breadcrumbs…
CSS & HTML
5 Simple but Useful CSS Properties Every Designer Should Know
aspect-ratio, gap, clamp(), accent-color and text-wrap: balance each replace a classic CSS hack. Copy-ready code, plus what to check before you ship.
Design
Minimal Website Design: 10 Examples and the CSS Behind Them
Ten live minimal websites across portfolios, blogs, products and shops, each with one technique you can copy and the modern CSS demo…
Design
Web Design Trends With Live Examples
Ten web design trends with real, live examples and the modern CSS behind them, from bento grids and light-dark() to container queries,…
CSS & HTML
CSS Gradient Text Effect
Create gradient headings with three lines of CSS: background-clip text, OKLCH colour blending, animation with @property, safe fallbacks and accessibility checks.
Typography
Typographic Contrast and Flow in Modern CSS
Seven ways to build typographic contrast and reading flow, rewritten with fluid type, variable fonts, OKLCH color and text-wrap, plus copyable CSS.