All entries from September 2008

Display:

Dates

  1. 2007
  2. 2008
  3. 2009
  4. 2010
  5. 2011
  6. 2012
  1. Feb
  2. Mar
  3. Apr
  4. May
  5. Jun
  6. Jul
  7. Aug
  8. Sep
  9. Oct
  10. Nov
  11. Dec
  1. 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

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

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