Log — Latest

Display:

  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 it’s 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

  4. 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 Whah” makes up my personal names and identifies 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

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

Lately in the Log

  1. Quotation Marks & Texture Mon, 22nd Sep 2008 {15}

    In the last entry, I stopped using double quotation marks and started…

  2. Review: Detail in Typography by Jost Hochuli Thu, 18th Sep 2008 {4}

    The day was only two hours old. It already felt ancient. I was writing…

  3. Early Reflections on Google Chrome Tue, 2nd Sep 2008 {13}

    The world is abuzz with the imminent release of Google Chrome today. The…

  4. Typeface != Font Fri, 22nd Aug 2008 {26}

    A typeface is not a font. A font is not a typeface. It’s been said…

Remarks from the log

  1. By Andrew Powell in The Incredible Em & Elastic Layouts with CSS:

    Great article. Just stumbled across this today. Very well written.

  2. By Anurag Sharma in Early Reflections on Google Chrome:

    I had a very bad experience with Chrome. It crashed on the second day of operation. I was not able to click on…

  3. By web man in Quotation Marks & Texture:

    “Nice Article John.” I like how some people are still using foot marks as apostrophes! Maybe you should…

  4. By Jon Gibbins in Quotation Marks & Texture:

    Oh, and fix your Unicode. @ Joe: Your wish is my command! Or as they would say in France, «Tes désirs sont…

  5. By Joe Clark in Quotation Marks & Texture:

    But, Jon, the British house style you are trying to refer to places periods and commas outside the “inverted…

People and XFN

Friends, colleagues and authors with interesting voices:

  1. Jon Gibbins (dotjay)

  2. Alan Colville

  3. Andrei Zmievski

  4. Ben Ramsey

  5. Chris Shiflett

  6. Denna Jones

  7. Ed Finkler

  8. Elizabeth Naramore

  9. Elliot Jay Stocks

  10. John D. Boardley

  11. Kester Limb

  12. Mark Bernstien

  13. Molly E. Holzschlag

  14. Nicola Pressi

  15. Peoples’ Republic of Stokes Croft

  16. Richard Rutter

  17. Terry Chay

  18. Theo Schlossnagle

  19. Thomas Pinney

Work with me via ~ Grow Collective ~ a creative consortium.