Charlie Harvey

Font of the Month: CSS Sans

It is not often that one sees something as clever as the CSS sans font yet which has no practical application beyond the sheer fun of creating it.

It’s been a while since my last Font of the Month, which was Sans Bullshit Sans back in February, so this time I thought I should review something a little different. CSS sans typeface

Yusuke Sugomori’s CSS Sans achieves something that I am unaware of anyone else having down yet. He has created a font that uning only CSS. CSS is the language the web developers use to communicate how they want the content of webpages to look when viewed in a browser.

Interestingly you can get a nice idea of the history of CSS, by looking at how the font renders in different browsers as Sugomori does in this video that he created to showcase the font.

On the CSS Sans home page, Sugomori writes of his creation

CSS SANS is the [sic] font created by CSS, the programming language for web designing and typesetting. It is an unprecedented font that reflects history and evolution of the Web, and even changes its own shape.

There is a nice font demonstration tool that shows how the font renders in different browsers if you would like to see for yourself what Sugomori means about the history and evolution of the Web. As in the video above, you can see how CSS Sans renders in various browsers.

You can download the source code of CSS Sans from GitHub (of course). It’s been developed with less and also seems to use Sass, though I didn’t dig around in the guts of the font too much.

CSS Sans is, naturally, far from practical to use, but Sugomori provides the font as rendered by various browsers as a downloadable OTF and TTF fonts. The font only has uppercase letters. It looks a little rough round the edges, for example the kerning is never quite right. But it does have some nice distinctive letters — I rather liked the S, though it won’t be to everone’s taste.

However, the CSS Sans project is not really about aesthetics as about pushing the limits of both typography and web design and in that sense I think that it is a success. I think in some ways that it may point to the future. Not a future where we use CSS to define fonts but perhaps on where we have a language for creating typefaces within the broswer, perhaps something like Don Knuth’s MetaFont.

Some will argue that WOFF — which will let you embed TTF or OTF fonts — is enough for all our typographic needs on the web. But I like the idea of being able to scale and transform fonts on the browser without having to download a new font each time. Apps like EtherPad or GoogleDocs would suddenly let you do much more complex typographical transformations, possibly with less data and we could engineer a layer that could render the font as SVG or on an HTML5 canvas.

Whatever the future holds for web typography I think that Sugomori has made a valuable contribution to the present and helped us to see how the web has evolved to its present.


Comments

  • Be respectful. You may want to read the comment guidelines before posting.
  • You can use Markdown syntax to format your comments. You can only use level 5 and 6 headings.
  • You can add class="your language" to code blocks to help highlight.js highlight them correctly.

Privacy note: This form will forward your IP address, user agent and referrer to the Akismet, StopForumSpam and Botscout spam filtering services. I don’t log these details. Those services will. I do log everything you type into the form. Full privacy statement.