CSS techniques blog posts

  • Preventing too-short final lines of text blocks

    At the end my previous post, I said I’d settle for direct control over widows and orphans in text blocks. It turns out not to be quite as a simple as one might think, with lots of discussion over the years. I created an experiment to test a solution.

  • An end to typographic widows on the web

    Currently shipping in Chrome Canary, and thus soon to be in Blink-based browsers including Edge, is a relatively new CSS declaration which promises to virtually end typographic widows.

  • Font optical sizing bug in Safari 16

    In my previous post I extolled the virtues of Literata’s font optical sizing, in particular how it worked automatically in the browser. That is until the release of Safari 16 with macOS Ventura. Here’s how to work around the bug.

  • Avoiding groupthink: fine-tuning CSS specifications

    Every now and then I’m asked to help out the CSS Working Group, especially when typography is involved. Invariably it’s also a chance to learn, not just about upcoming CSS, but also new methods of collaboration and group decision making.

  • All you need to know about hyphenation in CSS

    Automatic hyphenation on the web has been possible since 2011 and is now broadly supported. There is however far more control available to designers than just turning on hyphens. Updated January 2023.

  • Upcoming changes to the CSS you need for variable fonts

    Two weeks ago I was invited to Berlin for a CSS Working Group meeting. One afternoon was dedicated to resolving issues with the CSS Text and Font modules. Two resolutions in particular will affect the CSS we need to work with variable fonts.

  • How to use variable fonts in the real world

    Using variable fonts in the real world turns out to be tricky. This post explains how we achieved it for the new Ampersand website and what we learned along the way.

  • Getting started with variable fonts

    Variable fonts are a new font format offering unprecedented flexibility. They will be landing in web browsers and native operating systems within 12 months. Learn how to try them out now.

  • Use rems for global sizing, use ems for local sizing

    An unedited extract from my forthcoming book, Web Typography. This chapter is quite technically focussed and hopefully stands well on its own. The other chapters I’ve written contain much higher proportion of typographic theory.

  • Web Typography is now open source

    In December 2005 I launched the Elements of Typographic Style Applied to the Web, a practical guide to web typography using Robert Bringhurst’s book “The Elements of Typographic Style”. The site needs updating, so I’ve now open sourced it on Github.

  • Fontdeck is go!

    I’m extremely proud to say that two weeks ago Fontdeck opened its doors to the type-loving public. It’s been a long time in coming – too long I’d admit – but Fontdeck is now live and I’m hugely excited about what’s to come.

  • Leading type designers love webfonts

    At Typ09, FontShop put together Webfonts Week, a series of interviews with leading type designers. There is universal support for webfonts now, even from those who were dead set against it a year ago.

  • Whatever happened to font-stretch?

    The font-stretch property was removed from CSS2 in the transition to CSS2.1. Unfortunately this leaves us with a rather gaping hole in overall font support.

  • A free font success story

    A free font has made it into MyFonts’s top ten list of best selling typefaces. There’s a lesson there somewhere.

  • Font-weight is still broken in all but one browser

    There’s more to the lives of many typefaces than just Bold and Regular, but almost no browsers follow the proper CSS 1 way of specifying Light, Semibold, Black and other weights. There is a workaround, but it’s nasty.

  • Facing up to Fonts this Friday

    This Friday, 24th October 2008, I’ll be presenting as part of Head, a three-day global web conference. My talk is entitled Facing up to Fonts in which I get to talk more about web typography for the first time in ages. Update: Win a ticket!

  • Moving CSS typography forward

    The CSS3 font module has come back to life, and web designers have been asked for the their wish lists. Here’s mine.

  • An ambition realised

    I’ve been an avid reader of A List Apart for many years. It’s been a long-standing source of information, inspiration and even spiritual guidance. And so it is with immense pleasure and pride that I can finally say that I am an ALA author.

  • Font embedding survey

    Thomas Phinney, Adobe’s Fonts Product Manager for & Global Typography has posted a survey asking Web designers/developers about different implementations of font-face.

  • WebKit now supports CSS @font-face rules

    Earlier this week it was announced that WebKit now supports CSS @font-face rules. There has been a mixed reception in some quarters, but this leap forward (for that’s what it is) has to be a good thing.

  • Web fonts on the horizon

    Håkon Wium Lie recently intimated that the forthcoming release of Opera will support downloadable fonts. Great news for web designers, but is it bad news for type foundries?

  • Baselines and vertical rhythm

    Interest in Web typography has really picked up over the past year. One subject in particular has piqued people’s interest: vertical rhythm and alignment of baselines. Here’s a compilation of tutorials on the subject.

  • Centering text on the longest line

    The Web Typography project continues to proceed, albeit at a glacial pace. One of the reasons for the slow progress is guidelines such as this: “verse quotations should be centered on the longest line”.

  • CSS Naked Day

    Today, April 5th, is CSS Naked Day. This means that if you are reading this on the website and not via RSS, what you are seeing is Clagnut with the CSS stripped off.

  • Variable fixed width layout

    There’s a different approach to web page layout which is gradually getting some traction. The idea is that the layout is changed to best accommodate the window size.

  • More on multi-column layouts

    Since Firefox 1.5 shipped with a partial implementation of the proposed CSS3 Multi-column layout module, it’s received a fair bit of attention…

  • Quiet around here, isn’t it?

    Well it’s the usual reason – so much stuff, so little time. There’s two projects, two books and then my arch nemesis pops up.

  • Easy alpha transparent pngs

    The BritPack logo on these pages is an alpha-transparent PNG and I use a little PHP script to deliver browser-specific code to IE6 and IE5.5 and a normal image to other browsers.

  • CSS & Accessibility

    Here’s something that’s been playing on my mind recently. What role can CSS alone play in making websites accessible?

  • CSS podGuide

    Westciv, home of StyleMaster, have turned the content of their excellent CSS guide into what they?re calling a podGuide, so now you can read it on your iPod.

  • Bug Report, Design Engaged and PowerPoint

    PPK has a new browser resource called Bug Report. Design Engaged looked to be hugely successful and fascinating (link to a terrific animation). Veen talks about the difficulty of ditching the PowerPoint mentality.

  • Web Essentials blog

    Web Essentials is almost upon us and now it has a blog. On a vaguely related note, CSS Vault recently pointed to some demonstrations of CSS in scientific web publishing in particular rendering mathematical expressions.

  • How to size text using ems

    Text for the screen is sized with CSS in terms of pixels, ems or keywords. Pixels is easy, keywords are well documented. That leaves ems. I will now attempt to show you how ems can be as quick and easy to use as pixels.

  • Mozilla DOM inspector

    Mozilla’s DOM Inspector (also available in Firefox) can seem daunting at first but is amazingly powerful. Amongst other things, it allows you to see which CSS rules are affecting any given element in order of cascade priority.

  • OS X newbie alert

    My new iBook arrived just in time for the Easter break. This is not only the first time I’ve owned a Mac but also the first time I’ve used one for more than about a minute.

  • CSS from the BBC

    BBC Broadcast has just released a classy new site with valid XHTML and CSS underneath the hood. Check out the transparent sliding menus built on lists.

  • CSS crib sheets

    Another CSS crib sheet (on centering divs) from Andy Budd and a first A List Apart article (on creating a JavaScript image gallery) from Jeremy Keith.

  • More on fixed widths

    Fixed versus liquid design is an emotive debate. Liquid layout seems more intuitive, appropriate and elegant but is not without issues. However many concerns can be addressed with little or no compromise.

  • The new typography

    Why and how Web designers should be using font-family in a more adventurous manner: there are some great typefaces out there – let’s use them. The Visibone survey is an invaluable aid in typeface selection.