Entries tagged with ‘typography’

Display:

Tags

  1. Reversed Logotype

    Reversed type optical illusion example.

    This image shows a particular optical illusion that confronts us every day. Notice the difference between the black text on a white background and the reverse. With reversed type — light text on a darker background — the strokes seem bolder.

    Black text on white is very familiar, so we can be forgiven for thinking it correctly proportioned. For familiarity’s sake we can say it is, but there are two effects happening here: The white background bleeds over the black, making the strokes seem thinner. With reversed type the opposite is true: The white strokes bleed over the black, making it seem bolder.

    Punched, backlit letters on a sign outside the Nu Hotel, Brooklyn.

    One of the most obvious examples of this is with signs where the letters are punched into the surround then lit from inside. In his article, Designing the ultimate wayfinding typeface, Ralph Herrmann used his own Legibility Text Tool to simulate this effect for road and navigational signs.

    One might say that characters are only correctly proportioned with low-contrast. Although objective reality hails that as true, it isn’t a good reason to always set type with low contrast. Type designers have invariably designed around optical illusions and the constraints of different media for us. Low-contrast text can also create legibility and accessibility problems. Fortunately, kind folks like Gez Lemon have provided us with simple tools to check.

    As fascinating as optical illusions are —  the disturbing, impossible art of Escher comes to mind — we can design around reversed body type. On the Web, increasing tracking and leading are as simple as increasing the mis-named letter-spacing and line-height in CSS. However, decreasing font weight is a thornier problem. Yes, we will be able to use @font-face to select a variant with a lighter weight, but the core web fonts offer us no options, and there are only a few limited choices with system fonts like Helvetica Neue.

    Reversing a logotype

    For logotype there are plenty of options, but it makes me slightly uncomfortable to consider switching to a lighter font for reversed type logos. The typeface itself is not the logotype; the variant is, so switching font could be tricky. Ironically, I’d have to be very sure that that was no perceivable difference using a lighter weight font. Also, with display faces, there’s often not a lighter weight available — a problem I came across designing the Analog logo.

    The original Analog logo seen here is an adapted version of Fenway Park by Jason Walcott (Jukebox Type).

    Analog logo original.

    The logotype worked well when testing it in black on white. However, I wanted a reversed version, too. That’s when I noticed the impact of the optical illusion:

    (Reversed without any adjustment.)

    Analog logo reversed (flawed).

    It looked bloated! Objective reality be damned; it simply wouldn’t do. After a few minutes contemplating the carnage of adjusting every control point by hand, I remembered something; eureka!

    (Reversed then punched.)

    Analog logo reversed (punched).

    Punching the paths through a background image in Fireworks CS4 removed the illusion. (Select both the path and the background then using Modify > Combine Paths > Punch.) Is this a bug? I don’t know, but if it is, it’s a useful one for a change!

    Modify > Combine Paths > Punch in Fireworks CS4.

    N.B. I confess I haven’t tested this in any other Adobe products, but perhaps you will be so bold? (’scuse the pun. :)

    Fireworks CS4 screenshot.

    Matthew Kump mentions an Illustrator alternative in the comments.

    I grinned. I was happy. All was well with the world again. Lovely! Now I could go right ahead and think about colour and I wouldn’t be far from done. This is how it emerged:

    Analog logo.

    A final note on logotype design & illusions

    Before we even got to actual type for the Analog logo, we first had to distill what it would convey. In our case, Alan took us through a process to define the brand values and vision. What emerged were keywords and concepts that fed into the final design. The choice of type, colour, and setting were children of that process. Style is the offspring of meaning.

    I always work in greyscale for the first iterations of a new logo for a few simple reasons:

    1. The form has to work independently of colour — think printing in greyscale or having the logo viewed by people with a colour-impairment.
    2. It allows for quick testing of various sizes — small, high contrast versions will emphasise rendering and legibility issues at screen resolutions, especially along curves.
    3. I like black and white. :)

    I realise that in this day and age the vast majority of logos need to perform primarily on the Web. However, call me old-fashioned, but I still think that they should work in black and white, too.

    Brands and display faces emerged with consumer culture during the 19th Century. Logotypes were displayed prominently in high streets, advertising hoardings, and on sign boards. In many instances the message would be in black and white. They were designed to be legible from a distance, at a glance, and to be instantly recognisable. Even with colour, contrast was important.

    The same is true for the Web today; only the context has changed, and the popularity of logomarks and icons. We should always test any logo at low resolutions and sizes, and the brand must still have good contrast (regardless of WCAG 2.0) to be optimal. A combination of colour and form works wonders, but in a world of a million colours where only a handful are named in common parlance, having the right form still seems a smarter choice than trying to own a palette or colour.

    A final word

    This article was prompted by a happy accident followed by a bit of reading. There are many references to optical illusions in design and typography books. The example image at the start of this article was inspired by one found in the excellent Stop Stealing Sheep and Find Out How Type Works by Erik Spiekermann and E.M. Ginger. There’s also plenty of online material about optical or visual illusions you can dive into. There’s also more on how the eye processes light. Oh, and don’t forget the work of M. C. Escher!

    Human eyes are amazing. In two sets of watery bags we get a wide-angle lens with incredibly sharp focus and ridiculous depth of field. Apparently our brain is even clever enough to compensate for the lag in the signal getting from retina to cortex. I know next to nothing about ocular science. Spending a morning reading and thinking about optical illusions, and contemplating my own view here in the garden office is pretty awe-inspiring. If only my photographs were as good as my eyes, illusions or no.

    Share

  2. Display Type & the Raster Wars

    ClearType is 10 years old this Autumn. For most of that time it lay hidden until Vista brought it to the fore by default. Font rendering in Internet Explorer using ClearType is good for body copy at smaller sizes; it’s a huge improvement on the Standard rendering that preceded it. However, larger display text is badly rendered. I don’t say it lightly, but every time I load a page for testing in IE7, I wince at the jaggies. What makes this worse is that Standard rendering is better at display size anti-aliasing. I used to compose scales and size headers to take advantage of smoother Standard rendering at larger sizes.

    The context in which I view the text has the most influence over my reaction: Apple. I use a Mac. My browser of choice is Safari which uses OS X’s native ATSUI font rasterisation engine. Text is as beautiful as it can be on the Web right now. If text rendering in Firefox is disappointing in comparison because of the added weight, rendering in IE on Windows is positively distressing.

    The quality of the rendering is dependent on various factors like the display type (LCD or CRT), the display resolution that has limited pixel density, the rendering engine itself, and the quality of the font file — specifically the hinting of the typeface.

    ClearType was launched in 1998 at COMDEX by a celebratory Bill Gates. In a press release, the director responsible for the ClearType project, Dick Brass, was quoted as saying:

    ClearType makes inexpensive screens look as good as the finest displays, and it makes the finest displays look almost as good as paper.

    If only that were true. OK, it’s a press release, so we assume a degree of hyperbole from exaggerateers, AKA marketeers, writing the copy. But still. Let’s look at the evidence. I built a quick test suite using Georgia, Verdana and Arial because they’re some of the more commonly used Core Web Fonts. Here are screenshots of a heading set in Arial at 36px in different browsers:

    1. IE7 with ClearType on XP Pro:

    2. IE7 with ClearType on Vista:

      Sample thanks to Ryan Brill (he was the first of many kind replies via Twitter). Thanks, all!

    3. IE6 with Standard on XP Pro:

    4. Firefox 3 OS X:

    5. Opera 9 OS X:

    6. Safari 3 OS X:

    Compare the jaggies and dire anti-aliasing in IE7 using ClearType with the Standard Windows rendering of IE6. Also compare the heavier weight of Firefox using its own platform-independent engine with that of Safari using ATSUI.

    Factual insights about the differences from professional font, browser, or raster engine developers would be welcome in the comments.

    One of the reasons for the glaring difference between IE and Safari is a fundamentally different approach to web typography from Apple and Microsoft. Apple tries to render type as true to the original typeface design as possible, Microsoft uses grid-fitting when rasterising a font. There’s more in a previous article for those interested. Studies have shown ClearType to be more legible than Standard rendering, but they only compared the two. Expanding the study to test Macs and Linux-based PCs, as well as ensuring the test group was populated equally by people who use machines other than Windows PCs, would have all helped the results be more interesting.

    Type rendering anomalies are a serious issue for web design. Designers and clients with an eye for detail want typefaces to render accurately and smoothly. Shaun Inman is right:

    Until anti-aliasing discrepancies between platforms can be resolved I don’t see even a standardized approach being accepted by discerning designers.

    ClearType fails to deliver good anti-aliasing. In my view it is a backward step from the old Windows Standard rendering. I am at a complete loss to explain why it is allowed to persist. Especially because Microsoft Typography seems packed full of experts in the field. Surely they’ve noticed?

    Typography on the Web should at least equal the sophistication of print typography, if not enrich it. To do so, type needs to be rasterised correctly, and web designers need the ability to set it with much of the same subtlety and detail available in print. Until that time, technologies like Flash, PDF, and hacks like embedding type in images, will continue to thrive. Designers will use them not just because they ‘do type better’, but because they won’t have to deal with painful inconsistencies between user agents; the bane of the browser wars, and in this instance, the bane of web typography in what seems like the age of the raster wars.

    Share

  3. @font-face in IE: Making Web Fonts Work

    All Hallows’ Eve seems the perfect time for something a little spooky. Getting @font-face working in IE may just be spooky enough. As you probably know @font-face already works in Safari 3 via WebKit and is supported in the latest Firefox 3.1 beta. With IE, that means around 75% of the world audience could see custom typefaces today if their EULAs allowed it. Fortunately, there are good free faces available to us already, as well as some commercial faces that permit embedding. Fontin is one of them and I’ve built it into this example page:

    Before we get into the nitty-gritty of making this work, which you can skip to if you wish, I thought a little history and a brief summary of the current status of the web fonts debate might be useful.

    Web Fonts: Then & Now

    Web fonts have been with us for a decade. They were an original part of the CSS2 recommendation in 1998. Recently, the godfather of CSS, Håkon Wium Lie, brought them sharply into focus with articles in CNet and A List Apart. The ironic thing is, IE has supported web fonts using the Embedded Open Type (EOT) format since 1997. The problem was that EOT was a proprietary format, belonging to Microsoft. Not for much longer: it’s been submitted to the W3C and is going through the process towards becoming a web standard.

    Since the debate opened up, the web and type communities have both been busy discussing how the future will unfold. More collaboration between the disciplines would be beneficial to both, and I’d encourage any interested designers or developers to get involved with organisations like the Association Typographique International (ATypI).

    Recently, Bert Bos of the W3C paid a visit to the ATypI Conference in St Petersburg to meet with type designers face to face. His summary of the current situation is essential reading. The debate has continued apace on the ATypI mailing list, which unfortunately has no public archives. However, if you are member of the ATypI, you can see this summary about the conference panel on web fonts by Nadine Chahine that started the debate in earnest. Simply put, type designers seem anxious about @font-face linking making it too easy to steal a font. Both Microsoft’s EOT format and direct font linking are under consideration with EOT a favourite with many. However, rather than paraphrase a wide-ranging set of opinions, I’d encourage you to join the ATypI yourselves as designers and developers to participate or observe.

    If you have other favourite comments or posts about the future of web fonts, please add them to the comments.

    As a designer, I want a straightforward way of licensing and including fonts for my work. I will pay, respect the rights of type designers as I expect mine to be respected, then get on with the glorious business of merging content with type. It’s not as simple as it sounds, though. The licensing of fonts, and the protection of the rights of smaller designers in particular, is a sticky issue. DRM does not work, so what then? Richard Rutter has shared thoughtful insights which are very much worth a read. My view is that I would be perfectly prepared to pay a separate or extra licence fee to use quality fonts on the Web. I would have no problem selling this to my clients. Embedding or linking to fonts has to be straightforward though. I get paid to think about, plan and implement design, not grapple with obstructive software (more on that later). If fonts were delivered through a third-party web service as Richard suggests, the one proviso must be that it would have to be done by someone who knows exactly what it means to scale a service for millions of users. Like most designers though, I have very little knowledge of the real security and scalability issues, but hope to see a comment from a real security expert, shortly.

    User agents are currently taking divergent routes. Bert Bos’ summary reports:

    Mozilla has stated that they don’t want EOT. But they are not opposed to letting the browser check the license, as evidenced by the proposal to let HTTP headers carry license data.

    Microsoft has said that it is impossible for them to support linking to native OpenType as long as font vendors oppose it.

    Apple’s Safari has implemented font download with no checking of licenses. They said they are against EOT, but would not be against browsers checking licenses, e.g., using Mozilla’s proposal.

    Opera remarked that there are more existing and announced implementations for downloading native OpenType than for EOT. They conclude that the market apparently doesn’t need EOT and thus they see no need to support it themselves either. W3C’s limited resources should be spend on more important standards.

    That means that designers and developers have the same perennial problem: Two different implementations to achieve the same result. Safari 3 and Firefox 3.1 beta both support direct linking to OpenType (.otf) font files. Presumably Opera will soon. Only IE 4 to IE 7 support Embedded Open Type (.eot) files. IE8 does not, but will at some point. So, to see Fontin display in standards complaint browsers like Safari 3 and IE, we need to provide two separate fonts.

    @font-face Example

    The @font-face example uses Fontin Regular by Jos Buivenga — a free face kindly provided by Jos with a licensing permitting embedding with attribution. Jos also has many other fine faces available via his foundry site, Exljbris. The example is a quick one using a traditional scale, with all of the CSS available in the <head> of the file.

    1. Set the basic font-family:

      h1, h2, h3, p, td{
      font-family:'Fontin-Regular', georgia, serif;
      }
      

      Notice the 'Fontin-Regular' name — this is an arbitrary name that can be whatever you like. All it does is tell the browser when to apply the font file referenced in the @font-face rule.

    2. @font-face and .otf for standards compliant browsers:

      Ed: White space inserted for clarity.

      @font-face{
      font-family:'Fontin-Regular';
      src: url('Fontin-Regular.otf') format('opentype');
      }

      Note the 'Fontin-Regular' name, again. This rules basically tells the browser, when the @font-face is set to 'Fontin-Regular', use the font found at this URL.

      Screen sample of Fontin Regular in Safari 3 set at 16px with 24px line height from the example:

      Fontin in Safari 3

      When Safari renders the page, it will look for the font file, then render the text accordingly. There’s a slight delay as WebKit works. In the example you might notice that the text not requiring the loading of a font file renders quickly, but the rest is blank until the browser catches up. For reference, the Fontin-Regular.otf file is 32KB in size. Some font files can be much larger.

    3. Create the .eot file with WEFT:

      To do this you will need to download and install WEFT3, a Microsoft application for creating EOT files from TT fonts. WEFT is not able to create EOT files from an OTF. It must be converted to a TrueType file, first. WEFT is the only tool for this as far as I’m aware, although I believe there is an open source one in development. If it wasn’t for WEFT, embedding EOT files would be easy. What I want WEFT to do is convert the font to EOT, and allow me to create a subset if required. It does that, but in a nightmarish, frighteningly over-complicated way. Perfect for an All Hallows’ Eve entry. Here are a few tips I learnt the hard way:

      1. WEFT requires the URL of the page or site where the EOT font will be used. It will then ‘scan’ the pages by crawling the site to see what glyphs are used and try and create a subset of the EOT file accordingly. If it refuses to analyse a valid URL as it did for me, get granular and specify pages or sub-directories in your information architecture.
      2. If you’re using WEFT via Parallels and XP Pro, it may refuse to add some fonts in your windows/fonts directory to its database of available fonts. Try using a standalone PC if you can. I haven’t tested in any other virtual machine.
      3. Use the wizard to set up your project, but after that try it manually using the View menu item to see what fonts are available to convert, and the Tools menu item to convert them.
      4. WEFT will try to save the EOT file to a remote location. You can over-ride this manually to save the file wherever you please for you to upload yourself.
      5. Disable your original OTF fonts on your system before testing (obvious but worth a prompt).

      Be warned, WEFT is awful to use, in every way. It did not work for me running Parallels with XP Pro on a Mac. 7th Nov: After more experiments, Weft will accept TrueType (.ttf) files in Parallels. It also worked with the gracious help of Jon Gibbins and his standalone PC running XP Pro. Because it is so painful, I cannot give support for WEFT. You can try the Microsoft WEFT user community, but I can’t comment as to its usefulness, and I could not find any other support avenues.

      Hopefully, you now have an .eot file to use.

    4. @font-face and .eot for IE using conditional comments:

      Ed: White space inserted for clarity.

      <!--[if IE]>
      <style type="text/css” media="screen">
      
      @font-face{
      font-family:'Fontin-Regular';
      src: url('Fontin-Regular.eot');
      }
      
      </style>
      <![endif]-->
      

      These are screen samples from IE:

      Screen sample of Fontin Regular in IE6 set at 16px with 24px line height from the example:

      Fontin in IE6

      Notice the bar missing from the capital ‘A’ towards the end of the second line. The tyepface designer, Jos Buivenga is currently looking into the font hinting, with input from John Boardley.

      IE7 sample:

      Fontin in IE7

    See a full size Safari 3 screenshot, and IE6 screenshot on Flickr.

    That’s all! Try the example in different browsers to see how it works for yourself (but please don’t blame me for ClearType’s poor anti-alias at larger font sizes).

    Summary

    We have only a few web fonts with a EULA that permits embedding right now, unless they are free. Please respect the EULAs of any typefaces you try out until the type community resolves the issue for all commercial fonts.

    My feeling after doing this is that EOT has potential advantages in file size over OTF, but OTF files could always be edited (as far as I’m aware) to create subsets just like EOT. Although EOT is not a DRM solution per se, it feels like one. If it achieves widespread acceptance, no doubt some clever soul will be reverse-engineering an OTF file from EOT before too long.

    What we need to encourage designers and developers to use EOT today is a good tool to create EOT files in the first place. Perhaps even one hosted remotely, where we can buy a licence, convert the font to EOT, grab the same OTF subset for complaint browsers, and get the work using the typefaces we’ve always dreamed of. WEFT is not the tool right now to enable EOT usage. In fact it discourages it.

    Regardless of what security is implemented, the font file will have to be on the audience’s machine somewhere, even temporarily. ‘Defense in depth’ is a term used by web app security experts. It would seem that the question is how much depth will satisfy foundries and type designers, and what form that depth will take.

    As a designer, I can only speak for myself to say that if OTF and TTF were supported, regardless of how easy it was to steal the file, I would still pay as required by the EULA. I have a strong feeling the vast majority of my colleagues feel exactly the same.

    Share

  4. Flipped Types

    Typesetting-Printing Office. Digital ID: 1152640. New York Public Library

    Sometimes, flipping things around can be a useful mental exercise. It can raise a wry smile. An idle comparison between print and web typography was one of those times.

    Imagine this: A client gives you a detailed brief and the content to go with it. You choose the type and design the layout, applying all of your craft and skill to every last detail of the work. With the help of a rendering expert, you specify precisely what device, screen, operating system, colour profile and browser the finished work will be viewed with. You test your work in that environment and make necessary adjustments. It’s distributed to the audience who see it exactly as you expect. That’s print typography.

    Now imagine this: A client gives you a detailed brief and the content to go with it. You choose the type and design the layout, applying all of your craft and skill to every last detail of the work. Two files are given to the audience: one with content, the other with detailed design instructions. They pass both files to their printer. The instructions ask for a specific typeface to be used. The printer may or may not have it, but will never tell anyone, so you specify a few alternatives, just in case. The audience chooses the kind of paper to use, and what size it will be. They also tell the printer what personal preferences they want applied to the design, like making the text size smaller or larger. Your work is printed for them. You never see it. You’ve already resigned yourself to the fact that it will look different for different people. By testing your work in a broad range of environments before you sent it to the printer, you’d like to believe it will look good for most people, and adjust itself gracefully. Not to worry though, someone will probably tell you in no uncertain terms if you get it wrong. That’s web typography.

    Image courtesy of the New York Public Library digital gallery, entitled Typesetting-Printing Office from Working with the hands : being a sequel to ‘Up from slavery’, covering the author’s experiences in industrial training at Tuskegee (1904) by Booker T. Washington.

    Share

  5. Quotation Marks & Texture

    Single quotation marks pattern.

    In the last entry, I stopped using double quotation marks and started using the single version. Some super-observant folks may have noticed but if you didn’t that’s also a good thing. Permit me to explain:

    The final test for running text is legibility, so failing to notice would mean the style was not imposing on the text. The texture was good. When they occur, stylistic interruptions provide me with food for thought. If the punctuation interrupts the meaning, it demands fresh scrutiny. Double quotation marks seemed to interrupt by emphasising too heavily. Emphasis is sometimes required, but to my mind, with my style of writing, it seemed to impose on the text, altering the meaning by changing the silent voice in my head reading the text.

    Legibility is subjective, and typographers can debate the nuances of style to achieve the best form until the end of time. However, context, typeface, and content are such varied beasts that trying to style them with one set of rules is unnatural, no matter how attractive it can seem. Whatever rules we follow, being consistent is a rule that’s truly universal. Knowing why we use a particular form is another. If we can’t justify a particular usage, the chances are we’ve probably not considered it enough.

    Context is important here. American English is the lingua franca of web design, from the properties of CSS, to the majority of text we read. The best-selling handbook of American writing style, The Elements of Style by Strunk and White, only provides examples with double quotation marks followed by singles for quotations within quotations:

    “This is a quotation with ‘another quotation’ inside it in the American style.”

    However, I’m British. I live and work in the UK. In the UK, double quotation marks are also used, but there’s also a tradition of single inverted commas being used as the primary, with double inverted commas contained within them as needed:

    ‘This is a quotation with “another quotation” inside it in the British style.’

    To my mind the latter imposes much less and suits me much better. I agree with book designer Jost Hochuli in Detail in Typography:

    ‘A more attractive appearance is achieved by using single quotation marks for the more frequently occurring quotations, and the double version for the less frequent occurrence of quotations within quotations.’

    Robert Bringhurst advises us to:

    ‘Consider the face as well as the text when deciding which convention to follow in marking quotations.’

    I agree with him but on the Web a face can change dramatically depending on the browser and operating system that’s rendering it. To my mind, we have to choose an optimal version — Safari in my case — and accept degradation after that. That’s also the case with other punctuation like spacing. I’ve just used hair spaces around the em dashes in the sentence before last, but you will see regular spaces unless you’re reading this using Safari — the only browser I know of that substitutes a hair space from the system fonts if one is not available from the specified face.

    Different languages also have different quotation marks like guillemets («»), and baseline inverted commas used as left quotation marks („); they are in common use in Germany, Russia, and Poland as Piotr Fedorczyk showed me recently. Punctuation within (or without) quotation marks is another topic altogether with a set of rules that depends on context and form. For example, American English puts commas inside. British English puts them outside depending on whether or not the comma (or full stop [period], or exclamation mark) is part of the quoted text.

    My view is, whatever style we choose, we should know why, and be prepared change it if necessary. Any rules we apply should aid legibility. Web typography is immature; the constraints and opportunities of the medium may take us down many different paths but the goal of legible, beautiful text is constant.

    Good typography in running text is subtle and ambient. It enhances the text without interrupting it. It delivers meaning with clarity. In books, speech is mainly quoted in single marks. It’s a light touch. The typography removes itself from the picture being painted in our minds, and by doing so, allows it to shine. I’d like to achieve the same kind of light touch, here. I doubt my text will shine, but at least the typography will not distract you from my thorny prose.

    Share

  6. Review: Detail in Typography by Jost Hochuli

    Detail in Typography by Jost Hochuli (Hyphen Press, 2008)

    The day was only two hours old. It already felt ancient. I was writing proposals in my little office at home. The snick of the letterbox broke the tedium. A package had arrived!

    Package from Typotheque

    Inside was an array of delights from Typotheque: Specimen No. 5 of their History project, specimen books for Brioni and Greta, and last but not least, the revised edition of Detail in Typography by renowned book designer, Jost Hochuli. Nice!

    Detail in Typography was first published in 1987 in German. The translation was released this year by Hyphen Press. It discusses ‘microtypography’ — the fundamentals of legibility; everything from how we read, to analyses of letters, words, lines, linespacing, texture, and the qualities of type. In the first chapter, Basics, Jost Hochuli writes:

    ‘These are the components that graphic designers like to neglect, as they fall outside the area that is normally considered as “creative”.’

    The writing is beautifully tight. It’s 61 pages long including references and notes. Almost every chapter has rich examples lighting up the prose, which is crisp — a credit to both the author, and the translator, Charles Whitehouse.

    What I loved about it was the soft tone. No bombastic dogma, but an insightful discourse into the details of legiblity. The second chapter introduces saccades or saccadic eye motion; the science behind how we read and understand words. From that moment I was hooked. Re-reading it when writing this, I’m hard-pressed to find highlights. Every chapter is a highlight. Perhaps two points that stood out for me are:

    1. Hochuli explores how research shows that people don’t always need to see the whole letter in order to read the word: ‘the upper half of the letter is sufficient’ — ‘this would put most sanserif faces, and particularly those with the simple form of a, at a dissadvantage against classic book types’.
    2. He also explores what he terms ‘optical facts’ as opposed to optical illusions. How, when certain mathematically precise forms like circles and squares are components of type, they distort the letterform, and therefore the word, line, and the texture.

    I found the typesetting and presentation of the book a little awkward. I found the quality of print discordant with the quality of prose. Some lines are interrupted by a page spread or verso of examples. It’s beautiful in content, but not necessarily in design.

    Inside Detail in Typography by Jost Hochuli

    Any minor criticisms I have do not detract from the superb content. The relationship between cognitive science and microtypography is precisely drawn. It inadvertently demonstrates just how far typesetting on the Web has to go before some of the aspects of fine typography can shine. I found myself constantly wondering what it would take to apply the principals on the Web with CSS; for that alone, it was a great read.

    Detail in Typography is available direct from Hyphen, or from Typotheque with specimens as part of their package, and ineviatbly, lots of other places.

    Share

  7. Early Reflections on Google Chrome

    Google Chrome screenshots

    The world is abuzz with the imminent release of Google Chrome today. The screenshots on CNet were apparently from the new site that was live for a short time. The news slipped out (or leaked) when, according to the Google blog, they “hit ‘send’ a bit early” and released the Google Chrome comic strip prematurely.

    The comic is a great piece of work by Scott McCloud. It’s a gold-mine of interesting propaganda, and I’d love to link to some of my favourite sections but there’s a critical failing: none of the pages have a permalink! Some kind soul has taken the time to republish the strip so they can be linked although the site was slowing down already when I last visited.

    Does the world need another browser? Do we need another browser to test our work on? Those seem to be the questions I hear first. However, Chrome is built on WebKit, the open source engine that also powers Safari. Safari is also my browser of choice right now — WebKit passes the Acid 3 test and Safari has the best font rendering of any browser I’ve tried — so that gives me hope. Also, Chrome will be open source, and with a few new ideas may push browser science along a little bit in a good direction, especially around security, performance and the UI.

    When I heard the name, it reminded me of the DHTML tricks we used to use way back to remove the chrome from the browser window — effectively stripping it of everything that wasn’t content. Google has said:

    “We don’t want to interrupt anything the user is trying to do. If you can just ignore the browser we’ve done a good job.”

    I do a pretty good job of ignoring the browser already. However, there are problems we’ve all been working around for a long time that Chrome wants to solve. Most of the advances have a visual metaphor in their approach to tabs. Here are some of the things that caught my eye:

    The tab is king

    Tabs will be at the top of the browser window as they are in Opera, making utilities like the address bar part of an individual tab. It makes sense to me: Often I find, when talking to less technical people and trying to get them to go to a URL, they’re so used to ignoring the address bar that I have to help them find it before they can start typing. Google don’t have a URL box though, they have an “omnibox” that does everything from remembering visited URLs to giving search suggestions and allowing us to do free text history searches. It also does autocompletion. The comic strip explicitly mentions getting this right but, just in case it doesn’t, I hope autocomplete can be toggled off.

    In Chrome, the browser controls and URL box are explicitly associated with that unique tab. Everything associated with the site open in the tab is contained within it so it can be moved or detached completely from the window.

    However, people often ignore the page title, too. In the past, this has led to all sorts of wacky, useless and inaccessible page titles being used by developers to stuff keywords or just have fun. I would of liked to have seen the page title better associated with the viewport, and visible in full, not just as part of the tab label.

    Oi, JavaScript, stop!

    How many times does an errant bit of JavaScript slow down the browser to a crawl and sometimes even crash the whole caboodle? Too many times. Chrome has a whole new JavaScript virtual machine dubbed V8. It also claims a multi-threading approach that sandboxes each individual tab so it won’t affect other open tabs, which allows us to close it and kill the process if it’s getting out of hand. They’re also giving us a task manager to enable us to see which tabs or plugins are causing problems by seeing the processing running and how much memory they’re using. Sounds good to me.

    Confined pop-ups

    Chrome will associate pop-ups with each individual tab, and confine them within that tab unless people drag them out to become a new window; an enhancement to just blocking all pop-ups altogether when some are used for legitimate purposes.

    Default tab page

    When a new tab is opened, Chrome will open a tab page with nine of your most visited pages, search history, recently closed and bookmarks. It sounds like an evolved version of Opera’s Speed Dial (Flash demo), that automatically populates the holding page by default.

    Site-specific Chrome

    Taking a lead from apps I find incredibly useful like Fluid, Chrome will allow site-sepcific browsing to access sites like Google Mail in a streamlined window. Hopefully, we’ll be able to do that for any URL, and create icons in much the same way I can with Fluid now.

    Security

    Chrome would seem to take sand boxing to its natural conclusion, isolating individual sites from any other open tab, and not allowing access to anything without user permission. I’ll be interested to see what the web app security experts say about this, especially in relation to XSS and CSRF attacks. Chrome will also continually download blacklists for phishing and malware sites and warn users when they visit them. Those lists will also be open source.

    Typography?

    I can’t talk about a new browser without mentioning typography. The WebKit rendering engine already gives Chrome an advantage to build on for web type. All I want to say is that I hope they take a lead from the great work being done with things like @font-face support, and keep a beady eye on the most important thing a browser has to do: help us read. Hopefully, nothing in Chrome will limit the fine work the WebKit team are doing to make hinting, anti-aliasing, grid-fitting and hyphenation as good as they can be. Chrome will be released for Windows first. I’m looking forward to see how it reads, but how it integrated with OS X’s native text rendering will also be very interesting.

    One thing is…

    Google Chrome has already changed the browser landscape and it’s not released yet. We’ll see if all the web application savvy at Google Inc. emerges in the browser — I’m looking forward to it. After all, if we can’t just have one very good browser to design and develop for (oh, what luxury that would be), we may as well have another using WebKit — a rendering engine that’s committed to standards support, is open source, and doing a fine job already.

    Share

  8. Typeface != Font

    Typeface and font.

    A typeface is not a font. A font is not a typeface. It’s been said before, but confusion still resigns supreme; even the Online Etymology Dictionary and the holders of the rights to Georgia get it wrong. So, at the risk of stating the obvious, but in the hope that someone might find this useful, I’m going to attempt a little disambiguation.

    Define: Typeface

    A typeface is designed by a type designer. I think of a typeface as the design of a type family. Like every family, type families have names. An example of a type family name is Georgia. Georgia is a type family — a typeface — not a font.

    Typeface = a type family’s design

    In many non-European cultures like the Chinese, the family name comes before the personal name. For example, my Chinese name is Tan Tek Whah. “Tan” is my family name. “Tek” is my generation name. “Whah” is my first name. The last two are identify me personally. The same is true for fonts. They have a family name (typeface) and personal names (style, variant, size) that identify them uniquely within that family.

    Define: Font

    To understand why a font is not a typeface, it’s useful to know where the term came from. Here’s a (very abridged) bit of history drawn from various sources:

    Font (or previously, fount) is derived from a Middle French word, fonte, meaning something that has been melted. In type founding, metal was melted then poured into a hand mould with a matrix, to cast each individual piece of movable type, known as a sort. Font, fount and fonte have a common ancestor in the Latin word, fons, meaning spring or source (of water). They are all related to the word, fountain. So, now you might be able to see why “font” is a word that describes a variant of a typeface, and a container for casting water on Christian babies’ heads.

    Everytime a specific variant of a typeface was cast at a specific weight, a font was created. Therefore, a font is a particular casting of a typeface belonging to that type family. In electronic publishing nothing is cast, but fonts are still digitised from the design created by a type designer.

    Font = one member of a type family

    In my mind I think of a font as a variant of a typeface.

    Spot the heading error in the Georgia page by Ascender Corp, licensees of the Georgia typeface.

    Using the Georgia typeface example, the “Georgia Regular”, “Georgia Italic”, “Georgia Bold”, and “Georgia Bold Italic” in my library are all fonts of the Georgia typeface.

    Wait though, we’re not done! A font was more granular than just the variant of a typeface: Each size of those variants would, historically, have being cast individually. Therefore, a font is actually any variant in a typeface’s size and style. For example: “9pt Georgia Bold Italic” is a font as is “12pt Georgia Bold Italic”, and “9pt Georgia regular”.

    Electronically evolved terms

    These days, rather than casting specific sizes, we hit a button and the typeface variant changes size. Size has ceased to be so important because changing it has become so easy, and we don’t have to buy typefaces at different sizes. So these days, even people who understand clearly what the word “font” means have been known to use it to just describe a variant like Georgia Italic, or Helvetica Bold Condensed Oblique without reference to a particular size. That seems like a fairly logical evolution of the term to me.

    Why is this stuff important?

    Well, compared to world peace, it’s not. However, nomenclature is important because being understood is important. Struggling with my own ironic typos and awful spelling makes me doubly aware of this. There’s another reason too. I’ve been delving into the font module of CSS for a series of articles and reminded myself how confused the terminology was. The absence of the term, “typeface“ and certain uses of “font”, seemed strange to me; font-variant in particular makes no sense.

    Hopefully this explanation makes a little more sense, or at the very least, gave you an insight into Chinese naming conventions.

    Share

  9. Elastic to… Russian Elastic

    Illustration of a man standing by an anvil.

    It’s been a Russian-flavoured week so far. First came a bit of grappling with the dire unicode support in Fireworks CS3 for Andrei’s Russian-themed twitter background. More on internationalisation — or i18n for the cool kids  —  later. Suffice to say, for a bazillion pounds a license Adobe could get it right, and the core web fonts that don’t have Cyrillic glyphs are suboptimal when I’m trying to post Russian.

    However, the real purpose of this rambling post is to announce that the em and elastic layout article has been kindly translated to Russian! My thanks go to the volunteer efforts of Nickolas Loiko of CSSMake. Thanks Nickolas!

    Next up, I’m expecting a visit from Putin to discuss Georgia with me by accident. I will, of course, redirect him to Ben Ramsey, who’s Georgian all over, or so goats have led me to believe. Just to show how anything can be made into a happy co-incidence, Georgia visited the Welsh last night and won 2–1.

    Any more from me and the confusion will get ridiculous. Therefore, I’ll be going now.

    Share

  10. Events & The Favour Bank

    SXSW 2009.

    Have you ever heard of the Favour Bank? It’s a derivative of karma, using an obviously capitalist metaphor, but Paulo Cohelo used the phrase in his novel, The Zahir. That’s when it first grabbed my attention.

    “Zahir” is an Arabic word meaning visible, evident, obvious, or always present; an obsession; that’s what the novel is about.

    The Favour Bank is something we are all aware of. According to Pablo, we withdrawl from it by receiving the help of friends and contacts when we’re starting out. We also deposit in it by helping others later, after establishing ourselves. Hopefully we end up in credit. An example might be Jeff Croft’s intention to highlight the work of less well-known people who aren’t the usual suspects, but are still doing great work, regardless. I try and do the same in my asides and rare posts. Hopefully you do, too.

    I mention the Favour Bank because it fits neatly with a two events happening over the next few months; both might put all of us in credit at the Favour Bank:

    1. Web Developer’s Conference, 2008

      The Watershed, Bristol, UK. 12 November, 2008.

      This is a conference run by, and for, the students on the Web Design degree course at the University of Western England (UWE). It’s an opportunity for them to meet and mix with industry professionals. There’s some interesting talks by folks such as Patrick H. Lauke. I will be on a panel discussing working in the Southwest with Joe Leech, Rick Hurst and Peter Coles. As of writing this, my profile hasn’t been added to the panels page but everyone else is there, so there’s much more interesting stuff to read.

      The conference is free to attend, and based on last year’s event, should be fun and interesting. If you’re around at the time, consider popping in.

    2. South by Southwest (SXSW) 2009

      Austin, TX, USA. 13–22 March, 2009.

      This time I’m asking for your vote for our typography panel, Quit Bitchin’ and Get your Glyph On. It will be hosted by Samantha Warren, and fellow panel members will be Elliot Jay Stocks, John Boardley, and Ian Cole.

      We’ll be discussing web typography and I have a sneaking feeling that there will be some very different views on the panel so it should be fun. There’s also a fair amount of experience and passion there, too. So, if you can join us I’d love to see you there, but even if not, your vote would be very much appreciated! To vote, go to the panel picker page and either cast it, or quickly sign up to give us a thumbs up. Thanks!

    In other news…

    Locally, BathCamp is happening on the 13th and 14th of September at Invention Studios. I’m going to try valiantly to make it, and drop some typography musings on the unsuspecting crowd, but there’s already a heap of people going so it will be a fantastic day of geekery regardless. Keep in mind, according to BathMaster, Tim Beadle, any talk you give doesn’t have to be technical. Someone gave a talk about growing veg last year; it’s just a chance to geek about your areas of expertise in front of an audience who will appreciate the geekiness of it, no matter what.

    Away from the Southwest, Scripting Enabled takes place on the 19th and 20th of September at the Metropolitan University of London. It’s a two day “conference and hack day” that aims to break down the barriers between disabled users and the social web. The first day will be a summit to discuss and identify the barriers with anecdotal evidence from disabled users. The second day will try and solve some of them — especially in regard to existing sites  — with a hackathon. Sounds like an event bursting with social karma, and thus, very cool. My accessibility lexicon and good mate, Jon Gibbins, will be in attendance, too. I’m tempted to ask you to heckle him if you see him, but I think I’ll reserve that right for myself.

    If you know of any other interesting events coming up, feel free to share them by throwing the relevant HTML in the comments. It’s all good credit in the Favour Bank, or good karma, or however you want to describe the wonderfully seductive and aspirational concept of mudita.

    Share

  11. The Paragraph in Web Typography & Design

    Paragraphs are punctuation, the punctuation of ideas. After selecting a typeface, choosing the right paragraph style is one of the cornerstones of good typography. This is a brief inquiry into paragraph style for the Web.

    To collect my thoughts I put together a rough page of examples. I was interested in openings and texture more than font style, so they all share the same basic copy, typeface, size, and leading (line height). It was mostly for my own reference and will change over time, but you’re welcome to take a peek:

    Typographers use layout techniques like single line boundaries, indents, outdents and versals (drop caps etc.) to punctuate paragraphs in a stream of discourse. Block paragraphs are common to the Web, indented paragraphs are common to print. Browser vendors gave us a default block style of flush left, ragged right with a single line boundary, but there are many variants we can pick from depending on the context.

    In any project, the text itself will have its own tone, rhythm and meaning. It’s our job to provide it with a stage on which to sing. Typography serves the spirit of the text, bringing it before an audience, and then quietly fading into the background as the reader delves into the meaning. As Ellen Lupton says in Thinking with Type:

    Typography is a tool for doing things with: shaping content, giving language a physical body, enabling the social flow of messages.

    In the Web era, designers create narrative spaces made up of text, images, video, etc. We add context and legibility to those formats. We also create spaces where people express themselves. We work with enacted narratives where the content is already available, and emergent narratives to be created over time. Instead of just styling symbols, we’re styling bytes in fluid narrative spaces. We’re bytographers; literally, the writers of bytes, not just glyphs. Yet still, at the heart of this explosion in publishing, is the humble and beautiful paragraph.

    From paragraphos to paragraph

    Punctuation is a word derived from the Latin punctus, to point. Punctus is also the precursor of the period, or full stop. Punctuation was called pointing in English. It was used to indicate pauses or breaths until the 16th century. Punctuation as syntax didn’t emerge until the Renaissance.

    A paragraph was historically a punctuation mark. According to the Online Etymology Dictionary, the word paragraph has roots in the old French word paragrafe from modern Latin paragraphus or “sign for start of a new section of discourse”. That in turn is based on the Ancient Greek word paragraphos, a “short stroke in the margin marking a break in sense". The great reference of the 20th century, the Encyclopædia Britannica says:

    In the oldest Greek literary texts, written on papyrus during the 4th century BC, a horizontal line called the paragraphos was placed under the beginning of a line in which a new topic was introduced. This is the only form of punctuation mentioned by Aristotle.

    This fragment of a parchment scroll shows a paragraphos (a) indicating the line where the new paragraph starts with a break in the text (b).

    Source: The ‘Textual Mechanics’ of Early Jewish LXX/OG Papyri and Fragments by Robert A. Kraft (University of Pennsylvania), The Manuscript Fragments, s.5: parchment roll, ca 100 bce; Rockefeller Museum, Jerusalem.

    Parchment roll fragment

    Medieval punctuation employed a paragraphus—also known as a “‘gallows-pole’ or upper-case gamma, or § (later ¶)”— to separate ideas in a running discourse.

    White space did not punctuate paragraphs until the 17th century. This was the era of Ben Jonson’s English Grammar, where he recommended the use of syntactic punctuation. Around that time, the practise of indenting the first line of a paragraph became part of our standard syntax, along with the use of capital letters for the start of a sentence, and the use of a space between words.

    Technology & cost influencing style

    Materials and technology have always influenced calligraphy and typography. Papyrus was used from the 4th century BC. It was brittle, so papyrus was rolled instead of folded. Parchment codices became more popular in the 5th century AD. The finest parchment was vellum, made from the white skin of a calf. Next came paper: Invented in China in the 1st century, the first latin text was written on paper around the 10th century. By the mid-15th century it was becoming dominant. Johannes Gutenberg printed only 45 copies of his Forty-two line Bible on vellum, using paper for the remaining 135 copies because it was cheaper.

    During the industrial revolution in the 19th century, cheaper wood-based paper emerged along with steam-driven paper making machines. Intuition tells me that also influenced typography. By the turn of the 20th century paper was cheaper than ever before. The cost of inserting a single line of white space between paragraphs—the most common style today—would have reduced. The emergence of the consumer society and rise of advertising also encouraged a change in typographic style. “Fat face” display type was created for bills and advertisements; hyperbole became a style of visual layout. Before the 19th century, the insertion of a full line of white space between paragraphs would have surely been decadent. Perhaps that’s how it became commonplace. However, this is speculation; I cannot find reference to how it became prevalent, so would welcome further evidence.

    The single line boundary is the most common paragraph delimiter used on the Web today and the most common browser default style. Generally, the indent is still the most prevalent paragraph delimiter in printed books and publications. In some ways, the block and indent styles exemplify the divide between Web and print. Printing cost is still a consideration looking at some of the mistreated text in certain paperback books, but printing on a screen effectively removes cost as a factor. Usability is the only currency by which web typography is measured. That’s what we’ll explore next.

    Paragraphs in a narrative space

    The narrative space of a web site is where a story develops as a person navigates the site. This should not be confused with narrative as a text-type. However, in some cases, it does share some characteristics like a chronological order. For example, a blog is a narrative, no matter how broken. It has a chronological order (albeit reverse). Even though a blog has multiple entry points, it can still contain a chronological story. The chapters in that story (entries) may be any one or more of the traditional text-types {narrative; descriptive; argumentative; expository;} but they all form the narrative space of the site.

    The narrative space within a web site is made up of three components: content, layout (style and context), and information architecture.

    Further reading:

    1. Mark Bernstien writing in his mis-spent youth about narrative on A List Apart

    Web design narrative can be compared to architectural narrative: The design of an environmental experience from multiple viewpoints in time and space. Visitors experience a web site in much the same way.

    Web design narrative can also be compared to narrative in game design: both create the narrative space via a screen.

    In both comparisons, the experience of the narrative space is more than just style and technology. In fact, style and technology are tools to create the user experience. The experience of moving through a narrative space on the Web is complex. We understand that people may arrive in that space from any direction and context (referrer). They may be confronted when they arrive with any number of artifacts that convey narrative information (navigation, main content, calls to action, etc.). Any paragraph style must consider context as well as the meaning of the text.

    Thinking about paragraph style

    The way we approach the design of a narrative space on the Web is manifold. In most cases the content is not already available. If it is available, it may be subject to revision as part of a redesign process. The vision of the brand and the purpose of the site can seem clear, but may not be upon further investigation. Sometimes, our job as designers is to help refine both the vision and content. It’s during that stage that we explore layout and get a clue to the context in which the typography will live. We call it experience design. Only after that do we get down to experimenting with style.

    The context, meaning and tone of web copy should always determine typographic style. Reading the text in full—or at least understanding what the text might be before styling it—is a pre-requisite. A common mistake is to allow the design to dominate the text: Design for design’s sake, or even worse, fashion’s sake. The text is made subservient to the canvas that the designer wished to paint on the screen. This is exemplified by the proliferation of fun, but ultimately harmful, web design galleries. Once a user muscles past the gag reflex, or stops admiring the amazing graphical decoration, they can often realise the design is in their way. The content is obscured. The narrative space becomes broken into fragments, like pieces of torn parchment linked tenuously together by calls to action, or a nested index of links called a menu.

    Good typography makes the canvas fit the meaning of the text, not the other way around. It paints pictures with form that enrich the meaning of the words with colour, texture and movement. It is illusive, subtle, and ambient. It’s the shirt that engages from a distance. The closer you get to it the better it seems, but it takes a moment of reflection to even realise why. Robert Bringhurst says it beautifully in Elements of Typographic Style:

    One of the principles of durable typography is always legibility; another is something more than legibility: some earned or unearned interest that gives its living energy to the page. It takes various forms and goes by various names, including serenity, liveliness, laughter, grace and joy.

    When trying to energise paragraph text, meaning and context are the most important factors to consider. Meaning flows from the author. They are trying to share a message, a thought, an idea. Context belongs to the audience. They are trying to understand, extract meaning and find relevance. They’re doing so in the context of their own requirements, but also in the context of the page layout and the wider architecture of the site. A refined sense of empathy will help you find the right form for your paragraphs, if user testing cannot be part of your process.

    Choosing a paragraph style

    There are no hard and fast rules for paragraph style for the Web. Choosing a style depends on all the factors we’ve previously discussed. The 12 example styles I threw together are just a starting point and all paragraph styles need testing in context.

    You may find this place holder markup useful when testing styles.

    All browsers have good support for basic paragraph styles. However, complex treatments of versals and openings can be problematic. There are still browsers with immature standards support when it comes to using techniques like pseudo elements and adjacent sibling selectors. Our ability to specify fonts for body copy is also limited, and inconsistent rendering across platform and browser persistently frustrates creativity and precision. There’s still a lot to work with, though. Here are a few examples, some new and some that are aging beautifully:

    1. robweychert.com

      Rob Weychert used indents to wonderful effect in his Across America diary with text set flush left and ragged right. He also uses a deft combination of indents and small-capped openings in his blog posts. Both are a pristine example of using indents to compliment his particular style of writing. Truly a great example of bringing a love of print to the Web.

    2. funkatron.com

      Ed Finkler mixes a font stack of Palatino and Palatino Linotype with boundaries that perfectly suit his content. He publishes a mixture of material that’s often technical, so boundaries help delineate the technical writing for skim reading, while the larger size and typeface adds great texture to his site. For the technical material I might have defined sub-heads a little more, but his choice of paragraph style is instinctively good.

    3. andyrutledge.com

      Andy Rutledge treats paragraphs with love. On his home page, extracts from the three latest posts descend in a beautiful hierarchy of size and tone to indicate the chronology. Individual posts also cascade gracefully. Boundried blocks define his thoughts with great clarity. His material is often instructive, so this style perfectly suits the content.

    4. cameronmoll.com

      Cameron Moll indents paragraphs and uses boundaries. This could offend pedants in print but I find it wonderfully pleasing on the Web. His material is often educational so the division of points by boundaries helps legibility. However, one of the main reasons this style works so well is the font size: it could seem small but the indent with a boundary allows the text to breathe and adds great poise and texture.

    A note on indents

    If you choose to use an indent, stylistic tradition suggests that there should be no indent on a paragraph that follows a head or sub head. Tradition also suggests there should be no indent following elements like lists and blockquotes. You can achieve this without extraneous markup using adjacent sibling selectors. For example, if you have already set an indent on your paragraphs:

    p { text-indent: 2.5em;  }
    

    Then, to stop any paragraphs following a heading of rank 1–3 having an indent you can set:

    h1 + p, h2 + p, h3 + p { text-indent: 0; }
    

    However, I would caveat that with only if the blockquotes and indents are set flush left with hanging punctuation. Robert Bringhurst suggests: “If your paragraph indent is modest, you may for consistency’s sake want to use the same indent for quotations.” I agree, and I think the same can apply to lists on the Web. In both cases, a boundary is required to separate the list or blockquote from the surrounding paragraphs.

    A note on blocks

    If you choose a block style with no indent, but with boundaries between paragraphs, tradition suggests that there should be no indent on either lists or blockquotes. As you may have noticed from reading this article, I don’t always agree, especially on the Web. It depends on the content and the balance of elements. In certain instances, lists and blockquotes might be used to punctuate the running text, which can help people skim read on the Web.

    Web != print

    People experience the Web differently to print. The Web is not linear; in print people most often read sequentially, from front to back. They may flip, looking for something that catches their eye. After an initial look, they may skip back to interesting items using a table of contents or an index. On the Web this is reversed. Skipping to a certain page via the menu is habitual. This has been encouraged by bad design and web copy writing where inline links in the running text are sparse, if available at all.

    Skim reading is the norm on the Web. It may well even be the case that skimming is normal everywhere, it’s only when we become absorbed that we digest the meaning of the text linearly. It’s a way of filtering the noise in a page to try and get to the content of interest. However, this has become essential because of bad design; pages have been confused with intrusive advertisements, overbearing calls to action, and layouts that don’t serve legibility. It has forced people to skim, whether they want to or not. Better designers refuse such harmful techniques. Getting layout and content right in prototyping is essential.

    Careful choice of paragraph style (and other body text forms) can accommodate all of the differences in audience behavior and expectations. The optimal paragraph style you choose in summary pages may not be the optimal one for dense, detailed pages. A subtle change may well be necessary in different sections of a site. Choose judiciously, but most of all, designers should know why they are choosing a particular form; “because it looks good” is not a good reason on its own; “because it feels good” may well be.

    Share

  12. Reflecting on Acceptance

    Caffe Gusto on Bristol harbour

    You might already know that my entries are mostly about design with a few personal perspectives that peep out between the lines of prose. Sometimes the personal might take over. Today is one of those times. Apologies if you’re used to seeing more professional material in my feed, this is an indulgence: I’m celebrating!

    Summer has arrived with a smile the last few days in Bristol. It’s humid and bright, and somehow calm in the city. This morning was no exception. Just after rush hour, and before the shops opened for business, I swung my backpack on my shoulders, hitched into my flip-flops and walked through the old town to the harbour. I headed for the Watershed, but it wasn’t opening its doors until ten-thirty, so I wondered along the river with my camera, looking for some inspiration.

    The city noise fell away as I walked around a bend past the famous Lloyds TSB building; the only sounds were an occasional river boat chugging by, and people talking on their ’phones as they sat in the sun and smoked. I walked under an avenue of young trees in front of new office buildings and came to Caffe Gusto, nestled at the end of a grassy divide between tall office and apartment blocks called Cathedral Walk. The tables reach out towards the river at the edge of the dock. The wifi extends to the river like the rippled reflections of the morning sun on the water. I sat for a while in the shade then moved out under a parasol. That’s where I’m sitting now. A ferry just passed by, gently bubbling the River Avon with its velvet diesels.

    There are some changes in the air; as gentle as this moment, but no less significant. They might take me away from this city where I’ve lived for the last eight years to a different country. It’s an exciting time; all for the good. So, if I seem a little whimsical, forgive me: The breeze of change is blowing.

    I would like to share one important event with you: Last Thursday, I got a great email. It was from Freda Sack, type designer, co-founder of The Foundry, and President of the International Society of Typographic Designers. The opening line simply said:

    “Welcome to ISTD”

    I grinned so much I almost swallowed my ears. I had spoken to Freda on Monday last week to ask about submitting web specimens for consideration. She told me that was fine, the board was meeting the next day, and it would be considering applications if I could submit in time. To do so, I built a web page that mimicked the PDF application form and submitted it that night. I really wasn’t sure I would be accepted. Web typography is volatile: The paper is inconsistent, the printing imprecise, and the opportunities to make a mess of it are manifold. I looked at my specimens the next day (not to mention some of my rushed copy) and winced.

    ISTD logo

    The ISTD started life as the Guild of Typographers in 1928. It is acknowledged as the authority on typography in the UK, and has international standing. Applicants submit six specimens of work that are reviewed by the voluntary board. Acceptance is by merit, and understandably geared towards print typography, so submitting six examples of web typopgraphy was a slightly nervous experience. The standard required is high. In some ways I felt like I shouldn’t apply; to be accepted was a genuine surprise. It still feels very much like a seminal moment.

    I confess, sometimes when I read what others so generously write about my work, I feel like a fake. Such generosity is truly heart-warming to read, but I can’t help feeling sometimes that it’s undeserved. It would be ungracious to say so and detract from the gesture, so I just say thank you, and mean it. The same is true of my application. It might sound like insecurity, but I’m always conscious of how much I don’t know. I’m also deeply aware of my own impatience with false modesty so even writing this is a little tricky for me. The main issue is that I am mostly self-taught, spending time researching my craft alone. There are benefits to this accidental approach, but I never experienced the (presumably) reassuring consensus of formal learning, especially around typography. I never served my time, so to speak, like so many of the incredibly talented people who’s work inspires me every day. However, I believe in my own work, and how I approach my craft. That’s a problem itself: My pedantry precludes me from believing that any piece of work is truly complete. That’s why being accepted into the ISTD is both a cause for celebration and reflection.

    Navel-gazing aside, I am honoured to be a part of the ISTD. It’s driven by volunteer members, and I feel privileged to be a part of it. Hopefully, I can learn, and contribute too. Web typography is flourishing. Print designers are discovering the tools to bring their paper skills to the Web. Web designers are re-discovering the elegant beauty of type on the screen. Discussions around the CSS3 fonts and web-fonts modules are in full swing. Sites like I Love Typography are bridging the gap between traditional typographers and web designers. It’s an exciting time!

    I’m about to step away from Caffe Gusto, and take a slow walk back to my office. Hopefully this side note in my life has been an interesting read. For me, I’m just happy to be able to share the moment. Hopefully there’ll be more to come!

    Share

  13. Typographers, lend me your pain

    Dear web typographers and designers, I need your help (and your woes!) A couple of days back, Jason Teague, Director of Web Design for AOL Global Programming and member of the W3C CSS3 Working Group made a request for input from designers around the CSS fonts and CSS web fonts modules. He has volunteered to be an advocate for them, and wants our thoughts and feedback on the way forward. It’s a welcome move, and a veritable bag of snakes he’s opening, so congratulations to Jason for volunteering to take the pain. I think we should help him out.

    CSS

    For my part, I’m planning to respond in detail, supported by a few test cases and examples of current rendering. Wish lists are great, but I think empirical evidence is more useful when identifying current issues and areas for improvement in the recommendations. So, if you’re a web typographer or designer and have come across problems or issues that might be worth cataloging, let me know what they are. I’ll promise to try and put together a test case and convert anecdotes to science if I’m able. Alternatively, you can just throw your thoughts into the comments for Jason’s article.

    As an example of what I think might be useful, I’m planning on discussing classic type setting techniques that are either badly supported or absent like old-style versus lining versus small-cap numerals, raised or drop caps, granular glyph weights, ligatures, baseline fixing, etc. I’ll also be mentioning browser-specific hacks I use to achieve better rendering like setting a miniscule opacity value in Firefox on OSX to de-bloat the glyphs and improve larger-size anti-aliasing.

    What do you think?

    Share

  14. A Site for Sore Eyes: OmniTI

    You may have seen the recent case study featuring the evolution of OmniTI’s brand mark. Work on their new web site started soon after that was finished. This is what we did:

    OmniTI index

    OmniTI’s CTO Chris Shiflett and I worked closely on every aspect of the vision, brand message, information architecture, copy writing and content. For me it was the best kind of arrangement resulting in a piece of work I’m especially pleased with. Along the way we developed the kind of relationship that I’ve come to treasure, making me feel like I work in a collaborative industry, rather than a service one.

    OmniTI Sketch mark

    Metaphors for the invisible

    Discussions around the new site made me think of two interesting design problems. Scalability and performance, security, development and infrastructure are invisible arts. Historically, companies have fallen back on metaphors to communicate what they do visually: Faux boxes of imaginary software; stock photography of happy people at computers; they never worked for me. From my perspective, OmniTI is one of the finest development companies in the world. They’ve written some of the seminal technical books in our industry. They work for some of the most heavily trafficked sites on the planet like Digg, Friendster, National Geographic and Facebook. Their contributions to open source are legendary, with their utilities being used by Yahoo!, amongst many others. When tackling email on a massive scale they built the world’s fastest mail transfer agent. To reduce what they are capable of to awkward metaphors seemed disingenuous. I wanted to do something different.

    Another significant problem was how to convey personality. People buy from people, especially in a service industry. The relationships we develop are priceless. Many developers in our business—especially those who attend conferences like OSCON where they often speak—are already aware of the people at OmniTI, but they themsevles don’t tend to shout about what they do. Part of the reason for this is the culture of the company itself: Relaxed and down-to-earth but jam packed full of some of the most talented people anyone could hope to work with. Excellence has become commonplace, making celebrating it feel almost un-natural. It just happens by default. So, the web site needed to show some leg, reveal their personality as well as their work, without forcing patterns of publishing on them that would not be maintained.

    These problems made the job interesting. I wanted to accomplish three specific goals:

    1. Make OmniTI accessible. Personalise the brand, reveal the company character, and the people within it.
    2. Communicate the scale, quality and depth of what they do to technical and non-technical people.
    3. Make the whole experience of researching and contacting them simple, easy and useful.

    Collaboration

    To try and accomplish the goals we took a novel approach to design. It might seem ad-hoc, but it was deliberately organic; we let everything develop collaboratively, at almost the same time: From setting the vision to requirements gathering, persona development and task analysis, through to information architecture and copy writing. It sounds insane, but with a condensed time-line and a lot of intellectualising to be done, it worked in a way that only a small agile team that knows each other well can do.

    Along the way we went through four related iterations of style. Each reflected a development stage in the multi-track process we embarked on. The staff started writing a personal note for their own profiles. Some chose to stay with the professional photos, others supplied their own. All of it real though and unfiltered by marketing hype. Read the personal note of Rob Speed to get a glimpse of what I mean. The iterations kept getting better. In fact, everything kept getting better. Nothing is ever perfect, but a feeling of constant iterative improvement is a joy in itself. These are some of the highlights from my point of view:

    Theme, copy writing & content

    The theme is deliberately textual. OmniTI is a company that manipulates data in ways that are so esoteric that sometimes I had a hard time conceptualising the scale, nevermind the method. Text is the prevalent form of web data. It felt right to focus on it.

    Early on I decided to drop almost all decorative images and anything that was not content from the design. The data, the typography, they became the decoration. That went hand-in-hand with the decision to let OmniTI’s people, work and clients tell the company story. We decided to have a dual section in the planet for official company news and relevant posts from the staff’s own personal blogs. For the rest of the site, any copy that didn’t reflect the spirit of the company was avoided, and that which was left would be factual, not hyperbolic. Any claims OmniTI have made are under-estimates, and therefore all the more exceptional.

    Tiered detail

    I wanted to find a way of communicating the scope of their ability in a simple way. The audience diversity made this problematic. When developing personas to identify who we wanted to reach, two stood out: The technician and the executive. Both have very different requirements from the site. Both required detail in different areas. The first answer to this was for the home page. To grab people’s attention, I had the idea to display the actual output of their work as data in real time. There were technical and disclosure issues. We settled (for now) on showing some meta-level data around the number of pages and people that OmniTI’s clients serve:

    Screenshot: 'last month we helped some of our clients publish 880 million web pages, seen by 93 million people.'

    This will evolve over time and also be stored in an archive for future reference. Even more importantly, it is no mere boast. The figures are independently gathered and conservatively rounded down.

    The next solution was to somehow ease all of the audience into the site, whether they were technical or not. The narrative pattern we developed I call tiered detail. At the first level, like the index or any of the main navigation landing pages, chunks of different data are labeled with headers that encourage page skimming to find interesting topics. Copy is short, terse, accurate. The second level, like a personal profile, is more detailed and specific but has contextual links to related second level topics. The copy has links to third level pages where the focus narrows further to provide the kind of detail some people might want. These third level areas can be on site or off site—we didn’t distinguish between the two. All detail is useful when you want it.

    URLs

    Both Chris and I love beautiful, clean URLs. So when he came up with the idea of using verbs rather than nouns in the information architecture we we quickly agreed to make it so. The outcome of a fair degree of debate and wrangling is the structure you see today. The about page is http://omniti.com/is, the work page is http://omniti.com/does, etc. Deeper pages have a URL that forms a sentence, such as:

    http://omniti.com/does/security

    All trailing slashes have been removed making for highly legible and beautiful URLs in any context. More traditional URLs are redirected to the verb, so people can still type http://omniti.com/about and reach the about page. If you wish to know more, read Chris’s post, URLs can be beautiful.

    Typography & palette

    Evolving an interface from a brand, the type choices of which I had nothing to do with, is always interesting. Trying to find compliments is fascinating, even more so in a design that relies heavily on type composition and treatment for decoration. I’ll pretty much let the typography speak for itself .

    Italic Baskerville ampersands in the byline

    Highlights for me are the raised initial used in headlines which I always see as an icon, my favourite Baskerville italic ampersand used in the byline on the home page, and other subtle treatments like the semantics of the page titles or contextual links. I used a traditional scale, body copy is set in Georgia by Matthew Carter with the headlines set in a Lucida stack.

    The palette is included in this section because the typography developed alongside it, and they are irrevocably linked. Or, I should say, they are tonally co-dependent. Although the palette is autumnal, it is a counterpoint to the season, and you may see us have some fun with it over time, but the effect will persist: Type highlighted by luminosity, regardless of palette.

    Layout, functionality & accessible Ajax

    The layout is elastic in every respect to a strict baseline grid. This served the narrative theme, splitting the content in to equal chunks higher in the architecture for skimming, resolving to conventional asymmetric columns deeper in.

    OmniTI contact Ajax

    Jon Gibbins did a sterling job implementing the JavaScript effects on the site. He chose jQuery and added some flavour of his own to make everything accessible with or without JavaScript turned on. That extends to the Google Map on the contact page which fills the expanding container as font size is adjusted. Jon also audited the site for accessibility generally, applying his uniquely pedantic but practical approach to support a wide range of disabilities, especially where the JavaScript is concerned. You can read more in his post, Accessible Ajax: OmniTI.

    All other functionality was handled by OmniTI, with Theo himself building an unbelievably quick search engine with Perl in about an hour, and Chris building out the CMS equally as fast it seemed.

    Experience & narrative

    As designers, we wear a multitude of hats. In the final analysis I think we’re experience designers more than anything else. In many cases we use design to tell stories, or help a story unfold. We create spaces in which enacted or emergent narratives exist and the OmniTI site is no different. Like all real tales though, there’s still much to be told. Hopefully they have a good starting point; an authentic opening chapter where the history of the last ten years can sit comfortably with the next ten.

    For my part, I hope the story is a joy to read. I hope the design is unobtrusive and becomes an ambient signifier that adds a little texture to the content. It is a design I would have liked to implement for Grow itself, so a lot of my own predilections went into it. I was lucky: The great relationship that we have, and the creativity of OmniTI, allowed my ideas some breathing space. We took a journey that resulted in a site that is re-markedly different to other technical companies. Some might view that as dangerous. I think the opposite is true. To me it was a great project to do. Hopefully you’ll find it interesting enough to enjoy. If that’s the case, keep an eye on it; there may be some more subtle changes to come.

    Share

  15. Iterations in Brand Design: OmniTI

    OmniTI flames

    OmniTI are instantly recognisable to almost anyone interested in open source development, scalability or security. Their client list reads like a who’s who of the Web. Many of their people are core contributors to open source technologies like PHP; some are co-creators of popular frameworks like CakePHP and Solar; they speak at many industry conferences and have written eight critically-acclaimed technical books; they’re probably one of the most technically erudite and accomplished consulting companies working on the Web today.

    They asked me to work on their identity to mark their tenth anniversary and the separation of the email part of their business off in to a separate entity. This is an insight into the process and how the final design was created:

    Scope & objectives

    In June 2007 the initial scope asked for a redesigned mark that would still be recognisable to people already familiar with the brand. That meant retaining many of the elements of the original, including the typeface, over the course of five iterations. This was the existing mark at the time:

    OmniTI original logo

    These are the objectives of the redesign we arrived at during the specification stage:

    1. Simplify the mark “O” and incorporate it into the type to render well for the Web at small and medium sizes as well as large.
    2. Make the mark as easy to understand as possible with the correct enunciation.
    3. Clarify the typography for the Web and provide “balance”.
    4. Make the form colour–independant and suitable for all formats: print, screen or otherwise.
    5. Make the mark unique and suitable for trade mark purposes.

    Type & typography

    Identifying the original typeface was straightforward. It was Century Gothic from Monotype Imaging: A Bauhaus-inspired geometric face designed specifically for digital systems, based on 20th Century, which was drawn by Sol Hess between 1936 and 1947 and in turn inspired by Futura. Century Gothic shipped with Windows from Win98.

    After reproducing the original type treatment, I quickly capitalised the name properly in order for it to be read more accurately. I converted the text portion of the mark to black and white, and began to play with anti-alias at low screen resolutions to show a quick revision to OmniTI before starting in earnest:

    OmniTI typography

    The weight of the capitals looked incongruous to me, but the quick revision gave us all food for thought. It set the tone for the direction the design would move in, and I got stuck in to the main body of work: Trying to find a way of simplifying the existing flaming comet and incorporating it in to the leading “O”.

    Simple & Complicated Revisions

    Iterating the existing mark forced me to go back to starting principles. Much of the form needed to be retained, but it had a significant problem: If this was an identity seen mostly on the screen, then the existing mark was too complicated, effectively breaking at lower sizes, and forcing OmniTI to use a comparatively large version for the “comet” to be rendered properly.

    The first two revisions were deliberately simplified as far as I could make them with some movement retained in the stylised “O”, but stripped completely of decoration:

    OmniTI revisions 1 and 2.

    These revisions were deliberately provocative on my part by being extremely simplified and pushing the limits of the brief. However, having something tangible gave everyone room to think and react. It made the boundaries of the brief slightly clearer and allowed me to continue with more of a feeling for the direction we needed to go in.

    From the super-simplified, the next two iterations re-introduced the trails from the original mark as flames, and swung the design in an opposite, more complicated direction:

    OmniTI revisions 3 and 4.

    This was deliberate, too. I’ve sometimes found that good results come from a design process that swings like a pendulum or an elliptical orbit around the final outcome. To find the right balance between the requirements it sometimes feel right to push the design out to the aphelion along certain lines of thought, then let the collaborative process pull it back to the perihelion where all the conditions are met and it works. That’s what happened for OmniTI. Collaborative discussion with them and their quality feedback was crucial to this approach.

    Final polish

    The final iteration combined the two approaches, with a more geometric comet that has echoes of the original, but more simply drawn. The letterforms were unlocked from the pixel grid, but with the anti-alias tightened. The acronym capitals were also adjusted. This was the result:

    OmniTI revision 5.

    During the OmniTI web site redesign (a case study will follow soon is now available) the logo was re-coloured to match the palette:

    OmniTI site logo.

    All of the iterations and development of the final brand mark were heavily influenced by the feedback of Chris Shiflett, Theo Schlossnagle, Brian Vaughn and the rest of the OmniTI folks who gave their time and opinions. This collaboration was crucial to get the end result. My job was to guide them through the technical design process and hold all of their requirements in my mind while the pixels and vectors appeared on the screen.

    It was a real privilege to be trusted with their brand. I think we achieved a good result from what is often an emotive exercise, and I’m particularly happy that we managed to build on the work that came before to reach the final design.

    Share

  16. What Future for Web Typography & Screen Fonts?

    The browser wars of yesteryear were a frustrating period for anyone working on the Web. We’ve come a long way since then. Following the vanguard of Opera, Safari and Firefox, IE8 will be the first Microsoft browser to pass the ACID2 test when it’s released in 2008. Congratulations to the IE team! 2008 may well be a seminal year for Web standards.

    However, the same might not be said for Web fonts. While we have commonly supported standards with which to author information for the Web, we still only have ten core Web fonts to present it, with six most commonly used. There are hundreds if not thousands of outstanding typefaces. A few are shipped by Microsoft, Apple and Adobe with their software, allowing us to use them with font stacks. That leaves a multitude of beautiful, important typefaces that can only be used as text in images or with kludges like sIFR. The current situation is like the browser wars, or perhaps, the type wars.

    In a world where the Web is the platform, having ten core Web fonts makes no sense. It stifles innovation in the same way that poor Web standards support used to.

    The core Web fonts, then & now

    The Microsoft core Web fonts project was started in 1996 and discontinued in 2002. To put that in context, 1996 was the same year that Internet Explorer 3 was released with a CSS gallery to test IE3’s first tentative implementation of W3C CSS.

    Today, the core Web fonts remain in stasis. Apple have renewed the license with Microsoft this year but there are no plans to expand either the typefaces or the font variants. Back in 2006, Andrei Herasimchuk made an excellent proposal closely followed by Jeff Croft’s own worthy suggestion, both of which have unfortunately not come to fruition.

    Other Web fonts with @font-face

    More recently, Web fonts and the @font-face CSS property have come into focus. Håkon Wium Lie’s article on A List Apart started some valuable discussions. Ascender also recently announced new licensing for Microsoft faces which could apply to downloads, and the observations of people like Richard Rutter give us all hope for the future.

    However, as people have already mentioned, @font-face support is not a reality yet and there are questions over support across platforms that have not been addressed. Think mobile phones for example. End-user license agreements (EULAs) will need careful consideration and the methods of protecting type designers’ and foundries’ rights are still a matter for debate.

    Universal Web Type

    If the Web is the platform, and browsers are the gateways to it, then we don’t just need standards for layout and object rendering, but also a standard type library that is universally available to all, with a mechanism to allow new faces to be added over time.

    This is not an alternative to @font-face—there will always be a place for very specialist typefaces for specific uses—but it is a compliment to it.

    I would like to invite you to contribute how you think this might work. This is how I see it:

    1. Organisation: We should form a grass roots organisation to provide universal Web type. It could be part of, or complimentary to the Web Standards Project and the W3C. It would reach out to, and include anyone who has a stake in implementing, creating or using Web fonts.
    2. Structure: The organisation should be co-operative and democratic, with membership open to all. Intellectual copyright and assets would be jointly held by the group on behalf of everyone.
    3. Purpose: The group would strive to find common ground between all stakeholders to research or support common standards, find funding to create a font library with complete typefaces that would be freely distributed.

    The group could be funded by a mixture of micro-finance, donations of time and money, public funding and sponsorship. It would also affirm the right of type designers to proper remuneration for their work, and foster recognition of type’s importance to the Web.

    I’m deliberately publishing this idea to elicit your feedback and comments. The way forward is not clear, and I do not claim to have the answers, but I believe that between all the interested parties—whether individuals, companies or organisations—we have the ability to give everyone a better typographic experience.

    Share

  17. An Ode to Old-style Numerals

    Most of my bread-and-butter fonts are broken. So is my keyboard. I can still use them but they’re broken because they don’t work as they should, or as I want them to.

    Between the two of them they’re breaking my user interface and interfering with my ability to communicate. Here’s why:

    Modern (lining), old-style & small caps numerals

    All of the core Web fonts apart from Georgia have modern numerals. They are all equal width, and the same height as capital letters. They are great for tabular data because they line up vertically in tables which is probably their raison d’etre. They work perfectly with capitals, too. After that they start to fail. Miserably.

    For my purposes, I’ve use two of the core Web fonts—both excellent in their own way—that were designed by Matthew Carter as examples.

    These are the modern numerals of Verdana:

    Verdana 123456789

    Old-style numerals have variable widths, just like regular letters. The numbers are mostly the same height as the lowercase letters with descenders and ascenders that fall and rise from that beat. They are perfect for use within text, or anywhere outside of the two examples used for modern numerals. They are beautiful, harmonious, easier to read and I want to use them, all the time.

    This is Georgia:

    Georgia 1234567

    Small caps numerals are equally beautiful and, as the name suggests, relate to the size of the small capital. Also, small caps are not just shrunken uppercase letters, and may not fit to the lowercase x-height so numerals can be drawn separately.

    There’s more detailed comparisons and great examples in John D Berry’s Creative Pro article.

    The only problem I’ve come across with old-style numbers is telling the difference between a zero and a letter "o". This hit me when creating the business cards for Grow. My answer was to commit sacrilege and draw an asymmetric line through the zero in the knowledge that letterpress techniques would deboss the faux small caps heavily almost to the weight of a proper small caps font, and the line would clearly differentiate the zero from the "o".

    Every typeface with upper and lowercase letters should have modern and old-face numerals.

    The ClearType fonts include lining and old-style numerals by default.

    They are both needed. However, I mostly type two kinds of text: prose and code. If you ignore the code for a second, I would guess that almost all of the people using an alphabet where old-style is useful are typing prose more often than not. In prose, depending on the type (technical, academic, business etc) there are rules about the use of numbers. Thirty dollars will get you access to chapter 13 of The Chicago Manual of Style or you can also see the Connecticut Community College guide to numbers and lists, and Jack Lynch’s Guide to Grammar and Style.

    Whatever the house style we lean towards, old-style numerals should be available to use. Typographers and designers, please include them in every possible face. I realise that would be pointless unless everyone could use them easily with common software. Therefore, operating system and user interface designers, please give us access to them via a keystroke or two. There’s no easy way to access them right now, even if they exist (unless you edit the typeface itself to swap lining for old-style permanently.) This I can say with complete confidence:

    My keyboard is busted

    The number row on this shiny new Mac keyboard lists all modern numbers with symbols above them, just like yours.

    Mac number keys

    It’s busted in two ways:

    1. If a typeface has modern and old-style numerals I can’t type them both easily. It should be as easy as typing in uppercase or lowercase, which is exactly what it is.
    2. When writing code I use certain symbols a lot and therefore use shift a lot. In fact, with Mac keyboard the most common symbol I type after angle brackets is the hash (or pound in the States): “#”. This is accessed via pressing Alt+3. There is no hint on the key itself. When I switched to a Mac for the first time, I once spent a good amount of time on a train cursing before working it out.

    An answer

    I freely confess I’m opening a can of worms here, and could go into great detail about the various use-cases and modes our keyboards should have. However, that will be for another day. For now I’m offering this simple way operating systems can enable everyone to use old-style numbers without re-mapping the keys:

    1. Give my keyboard access to old-style numerals by default using the existing keystrokes. If they are not available, default to whatever numerals are available.
    2. If modern or lining numbers are also available, give me access to them in the same way that I have access to other capitals: via shift.
    3. Provide access to symbols with a different key. You decide, I don’t mind, but Alt seems obvious. Seriously, who uses ^ on a daily basis? The even less-used symbols should be moved to a double or triple action key configuration.

    If this is all too much of an ask, then at least allow everyone to access old-style numerals with an obvious set of keystrokes that won’t interupt writing flow too much.

    Does this solution make sense to anyone else? There may be problems I haven’t foreseen with the technical or interface aspects, and there’s much I’d like to add about code mode. However, right now I’d just love easy access to old-style numerals, both for the sake of my eyes when I’m reading and my heart when I’m writing.

    Share

  18. Complex Type: CSS Fix, ClearType Miss

    When an elusive penny drops, it’s always a good moment. Earlier today, I was thinking about the complex type rendering problem of a few days back. Skim that post, before you carry on and things will make much more sense.

    Suddenly, I realised what the solution was, and fixed the IE7 CSS problem in 5 minutes: After giving every element some padding and an invisible border—effectively forcing IE to recognise the element dimensions—it now renders the glyphs properly and doesn’t cut off loops or terminals that are outside the conventional em. Tinkering afterwards took another two hours but now the homepage has a new type experiment type folly for the masthead!

    So that’s the CSS sorted. I bumped into a IE7 problem with Eric Meyer’s unitless line heights along the way too, but that needs more research.

    Unfortunately, the ClearType anti-aliasing problem is out of my control. We simply can’t tell Windows to not use it, or to do it better. That’s up to users themselves, or Microsoft. So, for anyone looking at this site using Vista with ClearType enabled, here’s what you're missing:

    Safari screenshot

    Fig 1. OS X/Safari 2 screenshot of the masthead.

    For those of you lucky enough to be viewing using a Mac, or Safari on Windows, here’s what you're not missing:

    IE7 screenshot

    Fig 2. Parallels/Vista/IE7 screenshot of the masthead.

    The difference is stark. Even Windows standard rendering smooths large-sized text better than this. Update: See for yourself:

    Screenshot in IE7 using standard font rendering

    Fig 3. Parallels/Vista/IE7 with ClearType switched for standard rendering.

    ClearType seems to get worse as the font size increases. It sounds impossible that ClearType could be so bad, but my copy of Vista is a virgin Vista Ultimate, running on Parallels. No settings have been changed at all, and the only software installed apart from standard applications are browsers and anti-virus.

    So, there we have it, I predicted my own pedantry wouldn’t allow me to leave it be. With character predilections, as with rendering engines, knowing is only half the battle.

    Let me know what you think of the masthead type. You might even see it completely differently to me with a similar configuration. I’d be very interested in seeing a screenshot. I've not tested it in IE6, so bear with me while I get around to that. Is it worth keeping, even with the absence of decent smoothing in IE7/Vista?

    Share

  19. Rendering Complex Type—Who’s got the Love?

    The home page for this site was always temporary. After losing a year in distractions, work and prevarication I finally caved and whipped it together in a day so I could launch.

    Earlier this week I needed a timeout between sprints of development on our latest project, so I started to play with an idea for the masthead: A celebration of Web font letterforms with a complex <h1>.

    17/11/07: Updated in Complex Type: CSS Fix, ClearType Miss.

    This is where I paused just before I started testing in other browsers:

    Fig 1: Screenshot from Firefox 2 / Mac OS X 10.4.10.

    Jontangerine rendered with complex CSS in Firefox2

    I thought it was fun. I hadn’t yet locked all the distances to the pixel grid, and there was still more to do, but it seemed pretty close in Safari 2 as well.

    Fig 2: Safari 2 / Mac OS X.

    Jontangerine rendered with complex CSS in Safari 2

    Opera 9 also had it right. It also happens to be my favourite browser that I don’t use. If it had a stripped–down version with Chris Pederick’s Web Developer Toolbar you’d have to pay me not to set it as default, it’s core really is that good.

    Fig 3: Opera 9 / Mac OS X. Opera 9 is the only browser in the group to pass the Acid2 test.

    Jontangerine rendered with complex CSS in Opera 9

    Then I fired up IE7 on Vista, running it in Parallels and viewing it on an Apple Cinema Screen. Big Mistake.

    Fig 4: IE7 / Windows Vista Ultimate.

    Jontangerine rendered with complex CSS in IE7

    I can’t even begin to analyse the multiple problems with the rendering of my (albeit complex) type sample in IE7. From Vista’s ClearType jaggies to IE7’s CSS issues it’s simply carnage and a veritable type–crime; a smörgåsbord of bad rendering served with a mallet and a scowl.

    OK, I confess, I despaired for a second, hence the wry rant. I guess I’m asking too much of the browser. Maybe. However, surely we should step out of the cosy confines of tried and trusted methods, and let the creative beastie loose in the privacy of our own websites? Hell, under the hood this is just POSH with a few superfluous <span>s thrown in and a bit of CSS.

    Thinking With Type by Ellen Lupton

    In the very first line of the introduction to her fantastic book, Thinking With Type, Ellen Lupton writes:

    The organisation of letters on a blank page—or screen—are the designer’s most basic challenge.

    Perhaps that should apply to browsers too?

    Some of you may have more insight into these problems, and approach them as an intellectual challenge. I’d be interested in seeing any evidence or suggestions you have.

    In a previous article on core Web font rendering I’ve delved into the platform and agent differences, but this is more an emotional reaction. My heart says, “bollocks!” I know I’ll be drawn back to trying to find a way around the problems though, much in the same way as I was with the current logotype on the homepage. Until then, I leave you with the test page so you can hurt yourself with IE7 too, should you have the urge.

    Share

  20. Letterpress Print Design

    Grow Collective business card with debossed glyphs.

    The new Grow Collective business card is in circulation. It appeared a while ago, and I’ve been meaning to post about it. Today seemed like a good day. In a calm interlude, I snapped open the lens cover, hit the macro key and, after grappling with my poor photographic technique, here you go.

    It was printed using letterpress onto 740gsm two–ply (natural white with Baghdad brown) Colourplan card by the venerable, and expert printers, Piccolo Press of Nairn in Scotland. They are one of the few remaining commercial letterpress printers in the UK who, ironically, do a large portion of their printing for clients in the States. Wherever you are, you could do much worse than a conversation with Tim Honor, or the designer, Paul. Their advice is invaluable.

    Quick Tips

    1. Letterpress is an analogue format so go to the highest resolution your machine and software can handle when producing the artwork. (I spend chunks of time waiting for changes to be applied at 1600dpi, but it was worth it.)
    2. Letterpress will saturate the card with ink, so your colours will be richer than printing on the office inkjet.
    3. You pay for the block, the card and the print run. It’s not cheap but then, it’s not lithographic quality, this is letterpress!
    4. Trust the advice of the printer (especially if you use Piccolo) on the choice of card. They can provide samples, but a good rule is, the thicker the card, the better the deboss at print. Standard weight is around 540gsm — almost twice that of litho printers.

    There’s a high resolution photo on Flickr if you want a closer peek. I’d love to hear how you get on if you go down this route. It’s more than worth it just to run your fingers over the debossing when they’re delivered.

    Share

  21. Smoothing out the Creases in Web Fonts

    Stickman smoothing out the contour in a ligature.

    Designers often choose one of the core Web fonts for body text because they are widely available, but like all typefaces, they render differently on different operating systems.

    Apple OSX and Microsoft Windows have different ways of rasterising fonts and different text rendering engines. Apple’s text rendering engine is Apple Type Services for Unicode Imaging (ATSUI .) Microsoft’s text rendering engine is Uniscribe .

    Font Rendering Methods in OSX & Windows

    OSX tries to respect the anatomy of the type as far as it can using floating–point positioning — a combination of anti–aliasing techniques and sub–pixel rendering that does not lock glyphs to the pixel grid.

    Windows uses two methods depending on the version of the operating system, (Standard and ClearType.) Standard uses a combination of hinting (grid fixing) and anti–aliasing. ClearType also uses sub–pixel rendering — using LCD display technology to achieve better anti–aliasing. With both of them, it prefers to lock the letters to the pixel grid.

    Comparing fonts at 14px and 800% maginifcation in OSX and Vista.

    Fig. 1: Firefox 2 on OSX (left) and IE7 on Vista (right) font rendering at 800% magnification.

    ClearType is enabled by default in Windows Vista. In 2001, Windows XP had ClearType included but enabled Standard mode by default. Changing to ClearType requires navigating through the Control Panel to find the Appearance settings, then finding a button marked “Effects” to access the options. It’s the Windows equivalent of trying to change the accessibility options in browsers: Even if you know they exists, they’re a pain to find.

    The legibility of each technique is subjective, and also depends on factors like ambient light, resolution, viewing distance, visual impairment, screen type and colour contrast.

    Dave Shea prefers Windows’ ClearType method, as does Jeff Atwood and much of his commentators. For judiciously sized body text I mostly prefer the Apple method, yet previously in brand work I’ve also locked the letters to the pixel grid to get them as sharp as I’d like. Again, it’s subjective: How I see the individual font appear at a particular size and colour is the deciding factor.

    Core Web Fonts

    In August, 2007 Apple and Microsoft renewed the license for the core Web fonts. It was anticipated, but still, there was a collective sigh of relief that the fonts would still be common to all major operating systems. Matthew Carter, the designer of Georgia and Verdana said:

    “By agreeing to make these fonts available cross–platform Microsoft and Apple will support their customers, and confirm their respect for the standards of type–design.”

    Using the default Standard mode in XP, text is rendered with minimal (practically non–existant) anti–aliasing up to a certain size. The size at which text starts to become smoothly anti–aliased seems arbitrary. Good smoothing occurs at various sizes for each variant of each typeface. XP is still the most common platform used by our audience today, and this is how it displays Georgia in IE6:

    IE6 on windwos XP font rendering

    Fig. 2: Screenshot of Georgia displayed in IE6 on Windows XP clearly showing smooth anti–alias starting at 17px.

    For your bookmarks: The Web fonts test suite displays text from all the fonts in a range from 11px to 21px so you can compare and contrast yourself.

    Smooth Header Font Size for Windows XP

    The Web Fonts test suite was used to produce the following table that compares the core Web fonts, and the size in pixels at which good anti–alias starts to occur in XP by default. (Every browser except Safari.) Only whole pixel font sizes were used.

    Typeface Pixel size for smooth anti–aliasing
    Regular Bold Italic Bold Italic Small Caps
    Andale Mono* 18 11 18 18 21
    Arial 18 11 18 12 21
    Arial Black 17 17 17 17 20
    Comic Sans MS 16 11 16 11 18
    Courier New - 16 - 17 -
    Georgia 17 17 17 17 20
    Impact - - - - -
    Times New Roman 18 14 21 18 21
    Trebuchet MS 17 12 17 12 20
    Verdana 17 17 17 17 20

    * Andale Mono does not ship with Windows Vista.

    Noticeably, Impact is never smoothly anti–aliased, and Courier New only when embolded (perish the thought.) The font being rendered with smooth anti–aliasing at the lowest size is Comic Sans; a fact that might produce a wry smile from its creator, Vincent Connare, who never intended Comic Sans to be used outside of the speech bubbles in Microsoft Bob.

    Designers can choose to ignore the smooth anti–aliasing point in XP Standard mode altogether. My view is that headers look better when smoothed as much as possible, so a careful choice of weight for the font is important. Now there’s an added complication. ClearType in Vista seems worse in some circumstances to me than the Standard method, but that is a post for another day.

    Future Font

    Apple’s patent application for a system and method for displaying text—invented by Mark Zimmer—from June 14th, 2007 may make interesting reading for some. It includes references to grid fitting / hinting, specifically a method that, “increases contrast of tops of lowercase characters of the font family and preserves thickness at tops of stems of lowercase characters.”

    In the future, the debate around platform specific font rendering may all be moot, as displays move to ever higher numbers of dots per inch and pixels per inch (160 as per the iPhone.) For now, how a given fonts behaves on different platforms is still crucial to user experience. I’ll still be keeping an eye on XP for a while yet, and I have a funny feeling I’ll be getting good use out of the table for a while, too.

    1. Resources and further reading:
      1. Web fonts test suite
      2. Apple Type Services for Unicode Imaging (ATSUI)
      3. Microsoft Uniscribe
      4. Apple TrueType Reference Manual
      5. Microsoft TrueType Reference Manual
      6. Wikipedia: Font Rasterization
      7. Wikipedia: Anti–aliasing
      8. Wikipedia: Font hinting / grid fitting
      9. Wikipedia: Sub–pixel rending
      10. Microsoft ClearType
      11. ClearType tuner for XP

    Share

  22. The Incredible Em & Elastic Layouts with CSS

    Elastigirl saying “I’m an em” and Mr Incredible saying “and I’m a PX”

    Almost a year ago, Ty Gossman over at Stylegala asked me to write an article about elastic layouts. The best I could do was a quick email between work. I always meant to come good on that. Thanks for asking; sorry it took so long.

    Also available in:

    1. Italiano
    2. Deutsch
    3. Español
    4. Russian

    This article will walk you through creating a basic elastic layout; what exactly an “em” is and how to calculate them, how to use ems to create an elastic layer for content with scalable text and images, including basic vertical rhythm.

    What is an Elastic Layout?

    An elastic layout scales with users’ text size.

    More accurately, an elastic interface scales with browser text size—commonly a default of 16px—which users can change if they wish. Some people make a permanent change for accessibility reasons, others use the UI controls to increase text size if they need to.

    Elastic design uses em values for all elements. Ems are a relative size, written like this: 1em, 0.5em, 1.5em etc. Ems can be specified to three decimal places like so: 1.063em. “Relative” means:

    1. They are calculated based on the font size of the parent element. E.g. If a <div> has a computed font size of 16px then any element inside that layer —a child— inherits the same font size unless it is changed. If the child font size is changed to 0.75em then the computed size would be 0.75 × 16px = 12px.
    2. If the user increases (or decreases) text size in their browser, the whole interface stretches (or shrinks.)

    See the elastic layout example. Adjust text size to see it scale. It contains all the CSS and HTML used in this tutorial.

    For other live elastic examples, visit Dan Cederholm’s beautiful and elastic SimpleBits, or resize text on this site.

    Elastic interfaces are flexible and accessible for users, and can be almost as precise as pixels for designers. Layouts can be created accurately and quickly using CSS once we grasp the basic relationship between font size, pixels and ems.

    Introducing Em, the Elastigirl of CSS

    The em is as powerful and flexible as Elastigirl, she doesn’t mind what the font size is, whether 12px, 16 or 60, she will always be exactly equal to it.

    The em is a unit of measurement in typography. What is it and how did it get its name? Here’s a little history:

    An em was originally equal to the size of the metal block used to cut a single letter of type for a specific font. It was roughly equivalent to the width of a capital letter “M”.

    Those with designers’ eyes amongst you might be saying, “hold up a second, letters don’t take up equal space.” You’d be right: Computers use kerning to adjust the horizontal space each letter occupies on the screen, making them equidistant and balanced. Originally, the metal block was trimmed or “kerned” to make the horizontal padding around each letter the same.

    So, in CSS, an em is actually a vertical measurement. One em equals the vertical space needed for any given letter in a font, regardless of the horizontal space it occupies. Therefore:

    If the font size is 16px, then 1em = 16px.

    Getting Started

    Before we start throwing ems around a stylesheet, we need to know what the default font size is in the browser. Luckily, we do:

    All popular browsers have a default font size of 16px. Therefore, at the default browser setting, 1em = 16px.

    In Firefox, you can check default font size via Tools > Options > Content.

    So, before a single CSS selector is written, the browser has a 16px deafult font size. The <body> inherits it unless styled otherwise using CSS. Therefore 1em = 16px, 0.5em = 8px, 10em = 160px and so on. We can now specify any element size we need to using ems!

    Setting Body Font Size

    Some erudite folks suggest setting the <body> font size to either the required font size for body text, or the equivalent of 10px (0.625em or 62.5%) to make calculating child lengths easier. Both have merit, but it seems more logical to me to leave it at the browser default and change it for child elements if necessary.

    So, we know that the body font size will be 16px by default. We also know that if a person has changed their settings, our elastic interface will not break, but adjust. Perfect, so we can set:

    body{ font-size:1em; }
    

    However, (gasp) IE has a problem with ems. Resizing text from medium (default) to large in IE5/6 would lead to a huge increase in font size rather than the gradual one expected. So another selector is needed to get IE to behave:

    html{ font-size:100%; }
    

    As Patrick H. Lauke previously pointed out, it’s an IE correction, not a hack—it doesn’t rely on a browser bug to work.

    IE will now behave and resize text gracefully, rather than in mighty leaps of stupefying grandeur.

    Let’s give our <body> some more style, and center everything in the viewport (this will be important later for our content wrapper.) Our initial CSS ends up like this:

    html{
    font-size: 100%;
    } 
    
    body{
    font-size: 1em;
    font-family: georgia, serif;
    text-align: center;
    color: #444;
    background: #e6e6e6;
    padding: 0;
    margin: 0;
    }
    

    Formula to Convert Pixels to ems

    When first creating elastic pages, you will find yourself doing calculations a lot. Keep a calculator handy.

    Tip: Find font size for any element with Chris Pederick’s brilliant Web developer toolbar using: Information > Display element information.

    I am no maths wizard, so I needed a simple formula to remember. As a designer, I know pixels intimately, so that’s where I start. I calculate what 1px is in ems and multiple by the pixel size I need. That gives me the equivalent em value. We know that 1em is always equal to the font size of the parent element, therefore:

    1 ÷ parent font-size × required pixel value = em value

    For your bookmarks: Pixel to ems conversion table for font sizes.

    Don’t let my talk of forumla put you off. Elastic interfaces are a joy to build so let’s get practical and create some page elements.

    Building an Elastic Container: The Supersuit

    To create the centred content layer in the example, we need a little HTML. Let’s be really imaginative and give it an ID of “wrap”:

    <div id="wrap">
    …
    </div>
    

    We want it to be 740px wide to comfortably fit an 800×600px viewport like the example. What is 740px in ems? Let’s find out:

    1. Set a 740px width in ems for our layer:

      We know that the parent element (<body>) has a font size of 16px. Our child layer (<div id="wrap">) will inherit it. So we can calculate what 1px is in ems:

      1em = 16px. Therefore, 1px = 1 ÷ 16 = 0.0625em.

      Ems allow only three decimal places. More is fine in calculations but before writing CSS, round it up to three.

      Then multiply by 740 to get ems:

      0.0625em × 740 = 46.25em

      Or do the whole calculation in one go with the formula:

      1 ÷ 16 × 740 = 46.25em

      (1 ÷ parent font-size × required pixel value = em value)

      You can use the same formula to calculate ems for any width or height you need. Find 1px is in ems for that element. Multiple that by the pixel value you require to get the em equivalent.

    2. Create CSS:

      Apply the width in ems, center the layer in the viewport using the auto left and right margins, give it a 1px gray border with a white background and align the text left:

      #wrap{
      width: 46.25em;
      margin: 1.5em auto;
      border: 0.063em solid #ccc;
      background: #fff;
      text-align: left;
      }
      

    Now we have an elastic wrapper for our content!

    Styling Text with ems

    Let’s insert a <h1> and a <p> to our wrapper like so:

    <div id="wrap">
    
    <h1> … <h1>
    <p> … <p>
    
    </div>
    

    Essential reading:

    The Elements of Typographic Style applied to the Web created by Richard Rutter based on the masterwork by Robert Bringhurst.

    While we're here, we might as well add some typographic goodness by selecting a basic leading and adding some vertical rhythm, with everything expressed in ems. Here’s a little more history:

    Leading (pronounced “led–ing”) was traditionally the insertion of lines of lead underneath rows of text. It is expressed in CSS as line-height but instead of adding space below, it increases the space above and below each line of text.

    In the example, I’ve used the same font sizes as Richard Rutter did in his outstanding chapter on vertical motion to make your reading as consistent as possible. The heading font size will be 18px. The paragraph font size will be 12px with an 18px line height. 18px will be our basic leading—the most important value for our interface. Everything else will be proportional to that.

    A note on CSS inheritance: Our content wrapper, <div id="wrap">, has no font size set so it has inherited the 1em (16px) font size from its parent, the <body>. Any elements within our wrapper will also inherit that font size, unless we tell the browser otherwise, as we’re about to do.

    1. Set a 12px font size with 18px line height and margin for paragraphs:

      We know that our paragraphs have inherited a 1em (16px) font size from its parent, <div id="wrap">. From our previous calculation, we already know that 1px is 0.0625em. We simply multiple that by 12 to get the em value for 12px:

      0.0625 × 12 = 0.750em

      Or do the whole calculation in one go with the formula:

      1 ÷ 16 × 12 = 0.750em

      (1 ÷ parent font-size × required pixel value = em value)

      Then apply that to the CSS:

      p{
      font-size: 0.750em;
      }
      

      Margin, line height, padding etc. in ems are all relative to the font size of the element they belong to.

      To calculate the desired line height and margin of 18px for our basic leading we do the following:

      18 ÷ 12 = 1.5em

      Dividing the desired line height (18px) by the element font size (12px) gives us the em value for line height. In this example, the line height is 1 and a half times the font size: 1.5em.

      Add line height and margin properties to the CSS:

      p{
      font-size: 0.750em;
      line-height: 1.5em;
      margin: 1.5em;
      }
      

      Now the browser will say to itself, “Oh, line height and margin is set to 1.5em, so that should be 1.5 times the font size. What’s the font size, again? 12px? OK, cool, make line height and margin 1.5 times that, so 18px.” It will do all that faster than Dash too, and render it. Wow.

    2. Set 18px font size for the <h1>:

      The <h1> has inherited a 1em (16px) font size from it’s parent, <div id="wrap">. So, we already know what 1px is from before: 0.0625em. We simply multiple that by 18 to get the em value for 18px:

      0.0625 × 18 = 1.125em

      Or do the whole calculation in one go with the formula:

      1 ÷ 16 × 18 = 1.125em

      (1 ÷ parent font-size × required pixel value = em value)

      Then apply that to the CSS:

      h1{
      font-size: 1.125em;
      }
      

      To retain our vertical rhythm we want to set an 18px line height and margin. Easy: If the font size is 18px then 18px in ems is 1em! Let’s add the properties to the CSS (and make the font weight light:)

      h1{
      font-size: 1.125em;
      line-height: 1em;
      margin: 1em;
      font-weight: 300;
      }
      

    We now have vertical rhythm! Let’s move on to images.

    Sizing Images in ems

    To retain the rhythm of the the example page, the size of an image should be a multiple of the basic leading.

    Our image has a width and height of 90px (18px × 5.) It has right and bottom margins of 18px and is floated left in the paragraph text. This is the HTML:

    <p>
    <img src="90.jpg" alt="Clevedon Pier" /> Lorem…
    </p>
    

    The image is a child of the paragraph—it’s parent—so we know that the image has inherited a font size of 12px. Therefore, to calculate the image width and height we do the following using the formula:

    1 ÷ 12 × 90 = 7.5em

    (1 ÷ parent font-size × required pixel value = em value)

    Then apply that to the CSS:

    p img{
    width: 7.5em;
    height: 7.5em;
    }
    

    We already know what 18px is in ems for the parent paragraph, so let’s add the margin property (and the float) to the CSS:

    p img{
    width: 7.5em;
    height: 7.5em;
    margin: 0 1.5em 1.5em 0;
    float: left;
    }
    

    N.B. The image does not need to be within a paragraph to give it semantic meaning. The was used in this instance as an example of how to take inheritance into account whilst calculating ems.

    Now we have a supersuit elastic container with some elastic content and vertical rhythm like the example. With a bit of a luck, you have a better insight into creating elastic layouts, and designing with ems in particular. We’re done, you’re the Edna Mode of designers! The elastic example page has all the HTML and CSS you need. View source to grab it.

    Using Elastic Design

    Some of the benefits of elastic design for designers are precision, control and accessibility. However, some people have expressed concerns that allowing the content to expand past the edge of the viewport at larger text sizes could be problematic. Also, text will sometimes wrap and flow within the framework when the text size is changed; a minor issue, but worth noting.

    Concerns have also been expressed over the loss of image fidelity at increased text size. However, if a person changes their text size, the chances are they will also benefit from larger images, and browsers get better at resizing images as they increase in size. Hopefully browsers will get even better at resizing, or maybe we’ll soon have SVG and scalable background images to use.

    Implementing elastic design can deliver a deep understanding of ems in CSS. It definitely has a place in every designer or developer’s toolkit, whether in combination with other techniques in hybrid layouts or on its own.

    And finally…

    Any omissions or errors in this article are my own, so please let me know if I’ve missed something. If you know of other good and relevant resources elsewhere, please add them to the comments or email me and I’ll include them.

    I also take full responsibility for all refences to The Incredibles—my 2 sons gave kind permission for me to use their figures for the title image—and I hope Elastigirl doesn’t mind being compared to the em unit.

    References and Further Reading

    1. Resources:
      1. Elastic layout example (from the article)
      2. Reference table of common pixel font sizes and em equivalents
    2. Further reading:
      1. The amazing em unit
      2. Em discussion on Typophile
      3. The Elements of Typographic Style applied to the Web — Richard Rutter
      4. CSS2: Font size
      5. CSS2: Assigning property values, Cascading, and Inheritance
      6. CSS Layouts: The Fixed. The Fluid. The Elastic. — Mike Cherim
      7. Fixed or fluid width? Elastic! — Roger Johansson
      8. Elastic Design — A List Apart

    Can you Translate?

    Also, translated into Italiano by Nicola Pressi, and Deutsch by Pascal Birchler.

    If you are bilingual and would like to translate this article for non English speakers, please download my vCard via the about page and contact me. Thanks!

    Share

  23. Masonic Typography

    Typography is having a renaissance on the Web, but perhaps one day we’ll reach the level of beauty in this signature line in Bristol Cathedral from a master stonemason, carved in to marble in 1780:

    “J. Bacon fecit, London 1780” carved into marble.

    Oblique capitals for the stonemason’s initial “J”, oblique small caps for his surname “Bacon”, a lowercase italic “fecit” (meaning ‘made it’) and a regular weight lowercase for “London 1780”. Wow.

    Sharing a bottle of fruit cider with a stonemason the Friday before last, we lamented the computer–assisted carving of inscriptions. In the last decade or so, stonemasons are being replaced with machines who, for the grand sum of £2 per letter, will render any text required into stone with perfect accuracy. Not a lot of flare and soul, but a heap of inhuman precision.

    “She died, August 3rd, 1778, aged 35” carved into marble

    Could they carve the superscript “d” with the dot for the 3rd like line above, though? Maybe so, but then, for anyone who creates anything, there’s a very specific joy in the path taken to create it. It’s completely different to the pleasure in the end product. Perhaps that joy is what is sometimes missing from our pixilated workspace. Tapping a keyboard is an entirely different aesthetic experience than holding a chisel, or a pen.

    Perhaps, like many of the master crafts people working in commercial letterpress printing, master masons will slowly retire with no–one to take up the torch apart from a few enthusiasts. We might lament the loss of such skill, or there might be a revival just in time, as the beauty of the art is fashionable appreciated again.

    For my part, I’ve promised my new cider drinking partner a commission for stone signage outside any offices Grow might acquire in the next few years. It will go perfectly with the letterpress stationary we’ve just ordered. With luck, it might even be around above an old office building for folks like me to wonder at after another 230 years, like the inscriptions above.

    Share