Search for ‘The Elements of Typographic Style’

There are 50 entries matching ‛The Elements of Typographic Style’:


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

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

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

  • CSS & Accessibility

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

  • Mark-up tactics

    Your mantra for today: ditch divs and eliminate ids for leaner, more meaningful mark-up. Now before you turn away, branding me as a slave to semantics, I will explain some of the common misconceptions to show how the number of divs and ids can easily be reduced.

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

  • Discovering DOM scripting

    DOM scripting is much more than getElementById. Elements can be isolated and manipulated without having an id at all. To demonstrate this I’ve put together a simple script which redefines the styles of a class.

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

  • Reformulation launched

    You are now looking at the new formulation of clagnut. The underlying HTML has swapped for more meaningful markup and the resulting style sheets completely rewritten. So far I’ve only tested on Mozilla and IE6 on Windows, so any further input from other platforms will be…

  • Skinny images in Safari

    It seems that some of the images on Clagnut are being rendered as skinny strips in Safari 1.2. I’m confused as to why.

  • Boxed in

    “You can’t get an XBox, it’s a big, ugly, tacky hulk of shit. Who cares about the technical stuff and what the games are like? What counts is what they look like when switched off and stowed in the corner.”

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

  • A new year, a new design

    To my surprise, Clagnut.com was last redesigned in September 2008. Well, it’s all change, with a new redesign launched today. It’s been created from the typography outwards, responsive from the beginning and elegant on huge as well as tiny screens.

  • Happy New Year

    Welcome all to 2003. Hope you’re all recovering from the excesses of Tuesday night! I’ve been a bit quiet recently, taking a break from all things computery, but normal service will now be resumed (unlike the poor unfortunate West Pier).

  • A matter of style

    Eric Meyer has created a rather nifty colour blending widget which calculates a palette between any two given colours. Fun (and funky JavaScript) and if nothing else, it’s useful for calculating the midpoint between two colours. Matt has posted a list of online style…

  • Lists, lists & more lists

    A discussion of the recent prevalence and possible overuse of heavily styled lists for such elements as site navigation and overall blog structure.

  • Curvacious

    Web designers are forever sticking curves in their designs, particularly when smoothing corners of boxes. Designers have good reasons for this, but those of us charged with building the reality find it a pain in the bum, usually having to resort to tables to quickly get the job…

  • Eliminating inline styles

    This week’s MCU web access tip recommends placing printable characters between adjacent links (such as in horizontal navigation). The tip suggests hiding the printable character using spans and inline styles. I show how to do it a little better.

  • Interface widgets

    Christina Wodtke has created Widgetopia, a collection UI elements, and discusses solving user interface problems – by best practice or common practice?

  • Transparently brilliant

    There’s a fabulous new design in the CSS Zen Garden which makes use of a clever transparent PNG effect.

  • DevEdge dead?

    Anyone know if it’s permanent and where the sidebar might be replicated?

  • Swiss cheese?

    I enjoy minimal design, and I also believe that, for the majority of commercial and otherwise meaningful sites on the Web, that is exactly what is required. But minimal design to me, does not mean no graphics, no Flash, etc. If these elements are seen to add to the experience…

  • Clutching at straws

    A recoding of Zeldman’s ‘previous reports’ button to use a styled link rather than a javascript-driven form button.

  • Accessible contents menu?

    Clagnut’s global navigation is a JavaScript-driven drop down (the Site contents button graphical browsers will see top-right). An accessibility no-no, you might think, but I reckon otherwise.

  • In accord

    It makes for really dull conversation when everyone agrees, but right now a number of people are talking sense and I feel better for it….

  • Fear the Pie!

    I love this current poster campaign from the British Heart Foundation.

  • Don’t break the back button!

    The new W3C Validator has come out of beta and released unto the world. There is an improved UI and loads of links to the Specs, as well as help, documentation, tips and improved accessibility (accesskeys a-plenty). There also seems to have been a few changes to the…

  • When good lists go bad

    First off, the css-discuss mailing list now has a searchable online archive. It’s high traffic, extremely high quality and will almost certainly already contain an answer to your CSS problems. Here are a few gems I discovered there regarding the problems with styling…

  • West Pier on fire!

    Brighton’s poor old West Pier is on fire. Yet more trouble for the beleaguered land mark. See the BBC webcam footage. It’s now burnt down to the metal super-structure. I don’t know what can have caused the fire, but my guess is arson. The pier is…

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

  • Link toolbar

    Link toolbar is an excellent Firefox extension replicating the Site Navigation Toolbar in Mozilla.

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

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

  • In the Box

    “It’s not because he’s American and it’s not because the British are evil. Fundamentally, simply, basically, finally he’s just hated because he’s a twat.” On an unrelated note, get yerself over to Whitespace, a great new blog focussing…

  • Browser stickies

    Browser Stickies is a little experiment I knocked together in the lull between SxSW Interactive and SxSW Music.

  • @media

    This week’s ALA shows how to conceive and design print style sheets that automatically format web content for off-screen delivery. Includes tips on hiding inappropriate content, styling text for the printer, and displaying the URL of every link on the page.

  • Stand back

    A quick review of the amazing Public Lettering walk website.

  • Recent mark-up chatter

    I’ve contributed my two penn’orth to a couple of interesting HTML related posts.

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

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

  • Liquid lunch

    The new issue of Digital Web mag sees Peter-Paul Koch extolling the fine virtues of graceful degradation. That is the honourable action of building web sites that work† on all browsers without worrying if they are pixel perfect. With care, attention & experience this…

  • buy this book

    ‘Cascading Style Sheets: Separating Content from Presentation’ has just been released. Published by Glasshaus, it is written by four seriously talented people: Owen Briggs, Steven Champeon, Eric Costello and Matt Patterson. On this information alone I can…

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

  • Now it’s the other pier

    Brighton’s other pier, the Palace Pier, has now suffered it’s own disaster, catching fire in a rather big way. Sad as it is, I haven’t got quite as much sympathy with the Palace Pier as I do with the West Pier. The Palace Pier is nowhere near as old, and is…

  • Mozilla 1.1

    Mozilla 1.1 is now out with some lovely new icons. It also claims to have improved application and layout performance, stability, CSS, DOM and HTML standards support. Official news on the forthcoming all-new Opera 7.

  • iTunes/Win

    So I’ve just downloaded iTunes for Windows and it’s lovely. Straight away, here’s three things it’s got over Windows Media player: Music sharing with your local network.
    Quick browsing – play an individual album in your library with one click.

  • SxSW 2007 wrap up

    It’s Sunday and it finally feels like I’ve caught up sleep and got over jet lag, thus enabling me to attempt a personal wrap up of my South by Southwest.