Theme

Typography blog posts

  • In defence of fluid typography

    This is a response to Miriam Suzanne’s excellent post on Reimagining Fluid Typography. She poses lots of really interesting questions, some of which I disagree with, but most of all they got me thinking… and writing.

  • Beware the faux bold (and how to fix it)

    I don’t know if it’s just me, or if something’s happened in the last few months, but I keep seeing faux bolds everywhere. The fix is tiny and simple, although frankly the mistake is pretty basic – there’s no excuse for it being so prevalent.

  • What I learned by creating a dark mode toggle

    The short answer is: quite a lot. The long answer covers some accessibility issues, some new CSS, some slightly older CSS, some high level colour theory, a bit about SVGs, and some typography finessing; all of which I’ll cover in this post.

  • The problem with superscripts and subscripts

    A bug in Chromium and Safari makes support of proper superscript and subscript characters problematic. See exactly why, and what you might be able to do about it.

  • Design does not mean innovation

    Design has nothing to do with innovation and little to do with creativity. For the most part it’s there to help de-risk your business, but we tend not to talk about it like that.

  • Retrofitting fluid typography

    As part of my forthcoming Patterns Day talk I decided to rebuild the newly redesigned Creative Boom article page using Utopian fluid typography to replace its multitude of breakpoints. This is the story of why and how.

  • Responsive typography and its role in design systems

    Later this year I’ll be talking at Patterns Day. Jeremy asked me to weave responsive typography into his narrative of the day. How do I explain something as all-encompassing as typography within something so potentially granular as a design system?

  • Pagination widows, or, Why I’m embarrassed about my ebook

    The handling of widowed headings across pages in Apple Books is of particular concern. Since 1997, CSS has had properties to handle this, and yet browsers including Safari and Firefox still don’t support them – why not?

  • 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.

  • New year, new typeface: switching to variable fonts

    My website used to be set primarily in two very different typefaces: Ingeborg and Premiéra. This is story of how I switched to a fantastic single variable font which provided the same practical and stylistic benefits, only better.

  • How to typeset a date range properly

    During these 10 days of mourning following the death of the Queen, wherever you look – on websites, billboards and shop windows – we are presented with a badly typeset date range: 1926 – 2022. Here’s how to do it correctly.

  • How to subset a variable font

    Professional fonts can contain a lot characters you will never use, increasing file size uncessarily. These characters can be removed by subsetting a font. This post explains how to subset fonts from first principles on a Mac using fonttools.

  • 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.

  • Chrome just got darker

    A couple of days ago, my installation of Google Chrome updated itself from version 49 to version 50. The timing was fortuitous and relieved me of a growing text rendering headache.

  • 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.

  • Conference diversity from an organiser’s perspective

    Clearleft we know we have a responsibility to the industry to help redress the gender balance, and that means putting together diverse line-ups at our conferences. This is much easier said than done, but difficult doesn’t mean impossible.

  • Back my Web Typography book

    I’m writing a book on Web Typography which I’m hoping to crowdfund on Kickstarter. It’ll be a handbook for designing beautiful and effective typography in modern websites, and I hope it’ll be available in time for Ampersand conference this year.

  • Brief thoughts about web typography in 2015

    Last week Digital Arts online featured me, among others, in a piece on web fonts in 2015. My main points were twofold: more interesting treatments are required, and type designers keep giving us more fantastic materials to work with.

  • List of pangrams

    There used to be a page on Wikipedia listing pangrams in various languages. This was deleted yesterday. Pangrams can be occasioanlly useful for designers, so I’ve resurrected the page of here, pretty much as it was in Wikipedia.

  • The Scourge of Helvetica Neue Light

    I’m no lover of Helvetica but neither do I hate it. That said I really do have an aversion to Helvetica Neue Light, or rather an aversion to when Helvetica Neue Light is used without due thought and attention, and particularly within user interfaces.

  • Soft hyphen bug in Webkit

    Investigation into, and a fix for a peculiar bug in Mac-based Webkit browsers, including Safari and Chrome.

  • 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.

  • The trouble with font classifications

    I want to design a new way for visual designers to find fonts which specifically suit their needs and the needs of their clients. This means approaching things by way of a user-centred design process. And I need your help.

  • The Ampersand Story

    Why and how I put together Ampersand, the UK’s first conference dedicated specifically to web typography.

  • TypeCon 2010

    TypeCon2010 in Los Angeles was my first typography conference. It felt good. I was made welcome, made new friends, renewed old acquaintances and learned a lot.

  • 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.

  • Talking Type and Design at South by Southwest

    I’m on two proposed panels for SxSW 2010 – please cast a thumbs up in their favour! Also, some typography and other interesting looking panels that caught my eye.

  • 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.

  • Skillswap went typographic

    Back in January I was part of a double bill with Jon Tan, entitled Skillswap goes typographic. It went down really well so I thought I’d better tie it all together here.

  • Web Typography panel at SxSW

    I’m proud to have been part of the Web Typography panel at SxSW 2009 alongside Jon Tan, Ian Coyle, Elliot Jay Stocks & Samantha Warren. I’ve jotted down some of the topics we discussed, and some we talked about beforehand but didn’t have time for.

  • 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.

  • Talking type in Ljubljana

    On presenting web typography in Slovenia, my hospitable hosts, and discovering Zemanta, a clever blog enhancement tool.

  • 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.

  • Fonts licensed for web apps

    Following on from yesterday’s post regarding Opera’s probable support of web fonts, there comes a timely press release from font publishers, Ascender.

  • 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?

  • HTML Entity Character Lookup

    HTML Entity Character Lookup is a little free webapp and comes a Dashboard widget too, which is super-handy.

  • Top ten tips for web typography

    The latest issue of Design Edge Canada magazine – a publication for Canada’s graphic design industry – was a web typography special for which I contributed top ten tips for web typography.

  • 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.

  • Web Typography Sucks

    So Mark and I gave our presentation yesterday at South by Southwest. The slides and some references are online, along with a recording of the session and its transcription.

  • Talking type at SxSW

    First thing on Tuesday morning, I’ll be presenting Web Typography Sucks with the venerable Mark Boulton. Also that day is Helvetica the Movie. And on Saturday there’s the Great British Booze-up.

  • 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”.

  • Problems with font rendering on Macs

    Just recently Jeffrey Zeldman was bemoaning the sub-standard state of text rendering in Firefox on a Mac. And the sad truth is he only skimmed the surface; Firefox, Safari, Opera and Camino may render even the same font differently.

  • Arial 12pt

    Getting work with governmental bodies frequently involves a tedious, time consuming, tendering process with spurious clauses bad for the soul.

  • Underworld typography

    Underworld recently put out some 12” singles and I’m loving the type-based artwork.

  • Speaking on typography at SxSW 2007?

    This year, SxSW Interactive is enabling attendees to vote for panels to be featured in the conference. I’m hoping to present a talk with Mark Boulton called Web Typography Sucks. The Panel Proposal Picker Round Two is now live, so get your votes in!

  • On fonts for the Web

    The availability of fonts for use in Web typography, or more specifically the lack thereof, has been getting some welcome attention recently.

  • Unicode Font Info

    Unicode Font Info is a really handy free application for OS X. Essentially it’s a font inspection tool with full support for Unicode 3.2, allowing you to easily navigate huge fonts with tens of thousands of supported glyphs.

  • Seventy Penguins

    I’ve just come back from a week with Her Indoors in the West Country. While there I bought five books, all of which were Penguin paperbacks, one of which proved to be particularly fascinating.

  • 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.

  • Hyphens a soft problem

    Typographers divide words using hyphens to increase readability. All books and newspapers of any quality use this technique to ‘justify’ their text, yet it is not a tool available to Web designers in any useful form.

  • 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.

  • Textilisation

    Clagnut now uses a slightly customised version of Dean Allen’s wonderful Textile. Textile provides speedier text input (without having to mark up the input into my CMS) and formats the text nicely, with proper “typographer’s quotes” and so on. There…

  • Phonetic diacritics

    Epizootic is to animals as epidemic is to people. And a brief exploration of putting Unicode characters into Web pages.

  • Apostrophe s

    Why is the humble apostrophe so regularly misused and why are hairdressers so often the culprits? Ladie’s perm’s at half price (As the Guardian readers’ editor points out, journalists who should know better also get it wrong.) Apostrophes have two…

  • Compo results

    The Guardian UK weblogs competition results are out. Obviously I didn’t win, however Scary Duck did. Highly commended were iMakeContent and Greenfairydotcom; runners up were blogjam, LinkMachineGo and Plenty of Taste. Congratulations to all the winners, all the entries…

  • Why oh why?

    Scene 360 asks the question of twenty three top zines and design portals: Why do you do it? A beautifully put together piece with some fascinating insight into how the likes of K10K and Design is Kinky think. The Evolution of Type, a fine introduction to the origins, evolution…

  • When good type goes bad

    Jakob mourns the demise of the text sizing buttons IE but fails to point out that it won’t have any effect on a Windows machine if text is sized in pixels. Microsoft have stopped giving away their free web fonts.

  • Fontastic

    Survey of installed fonts on different platforms, Mark Newhouse’s real world CSS and the Polar Bear 2 is in beta.

  • Bent over a barrel

    Behind the typeface: Cooper Black – a brilliant satire. A cry for help with a smart quotes algorithm. Typography links including designing logos from ligatures. And how close to the real thing your wireframes should be when presented for user testing.

  • old skool

    Frames and nested tables bemoan their demise: “NESTED TABLE: is there a place for us, for us maligned remnants of earlier html? We who are cast off by maturing web designers like the velveteen rabbit?” And a fine explanation of the correct use of quotation marks.…

  • Stand back

    A quick review of the amazing Public Lettering walk website.

  • Back into type

    The Z-man pointed us to webactivism.org today. And a fine blog it is too with some great typographical postings, particularly on the value of Arial and Bringhurst. And this coincides nicely with the latest Cre@teOnline magazine which has an errant focus on typography. I shall…

  • Get It

    Mozilla 1.0. Stick a fork in it. It’s done and looking good. Posted a few pikkies from the Mini Rally recently held in Brighton. Check out those wonderfully ridiculous chopped cars – why have a small car when you can have a tiny one? Like me, Owen Briggs has been…

  • Sad

    It is with much regret that I have to inform you of the demise of linesandsplines. A beautiful intellectual web log dedicated to the joys & aesthetics of typography. Often way above my amateurish knowledge of the subject – but that was the point for me – how…