Serco operate a vast amount of local community leisure centres around the country and have disparate online presences for each of them. We were approached to consolidate the branding of these sites and yet maintain a semi-autonomous flexibility to tailor each site to it’s individual facilities, promotions and content.

We were asked to provide a number of design options based upon tactical and hierarchical recommendations. One option was to challenge the aesthetic conventions of the competition which I undertook.

I decided to take a fun approach, trying not to portray the content too seriously. I also wanted to steer well clear of the typical activity and facility photography, which naturally lead me to a more typographic and design-led route. The combination of this and the fun approach led me to the use of bold colours. A definite point of difference in the market is to move toward a darker overall look, rather than the light, airy spa look, so… It was almost done for me!

Filed under: My Work on January 30th, 2009 | No Comments »

We almost always choose our fonts based on some aesthetic level, whether that be readability, a particular style which works with a design problem or both. When installing and using typefaces you will often come across different formats, even if you only mark this difference in the changes of suffix for the files (.ttf. otf .suit. bitmap). A question I have been asked recently is should these formats play a part in the selection process of a typeface?

My initial answer was no. I feel that the latest Windows and Macintosh operating systems have evolved to a level where most fonts can be used cross-platform and therefore makes what used to be a sticky issue almost a non-issue… At least for the most part.

The main formats do have differences however, and it is worthwhile understanding them as it can sometimes be an additional factor to a particular typeface or font choice. The subject can get quite technical, but here I will try to keep it broad and so will not be all-encompassing. I recommend further reading on the subject if you feel something has not been covered.

PostScript Type 1 & Type 3
These format were developed by Adobe, beginning with Type 1, and is considered by some as still the most reliable format for high resolution, precise printing. It is built using the same technology as PDF documents and almost all printers have the PostScript language installed. A Type 1 or Type 3 font can consist of multiple files which hold discreet information that together create the complete font. Screen render information for glyphs in one file and printer bitmap information in another is an example. This format requires separate versions for Macintosh and Windows systems.

TrueType
This format was created by Apple and is supported across both Macintosh and Windows without the need for any conversion. Complete fonts are contained within a single file which eliminates a lot of the heartache associated with large, unsorted font libraries on your computer. From a technical point of view TrueType fonts were programmed differently to PostScript which allows much more information to be held including more glyphs in the typefaces.

TrueType fonts can now be printed as reliably as PostScript fonts to almost all devices including high-end printers.

OpenType
This format is the newest of the bunch which was developed by Adobe and Microsoft and is by far the most technically advanced format. Is is based on the earlier TrueType format meaning it is also cross-platform compatible.

OpenType fonts have advanced typographic control, special layout features, and a much larger glyph capacity. 65,355 to be exact compared with the 256 in PostScript Type 1.

OpenType uses Unicode which is a character encoding system that covers most of the world’s languages. The combination of the extensive glyph capacity and a Unicode base means the OpenType format can hold multiple languages including mathematical symbols, ligatures, punctuation, oldstyle figures, ornaments and much, much more in one font file.

You can have many fonts in any of these formats installed, but a general rule-of-thumb is to avoid having the same typeface installed in different formats at once. This is where problems can arise.

In conclusion, a more considered answer to the original question would be that it depends on what you are using the typeface for. If it’s for a smaller piece that has little or limited longevity, the format is much less of a consideration.

However, for larger ongoing projects, where you can’t foresee all applications of the standards you are creating, a more robust font with a number of family variations is always a good choice. Naturally, if a font like this is available in the newer OpenType format, your work will be platform independent, potentially multi-lingual and with all of the extra typographic options available (only on certain software however) you will have greater control over how your text is set.

Filed under: Design Talk on January 16th, 2009 | No Comments »

There is quite a lot of terminology associated with the make-up of a character. There are specific names for certain arcs, joins, apexes and appendages, but for most of your career you may not need to know many of these. Indeed, some of them would only really be pertinent to a conversation between two typographers actually designing a typeface from scratch, so I won’t go into them in this article. However, there are some quite important names given to key aspects of a typeface’s make-up and its measurement system that all designers should know by heart.

X-height
The x-height is actually quite self explanatory. It refers to the height of the lower case x within a typeface. This is important as it usually typifies the height of the main portion of the entire alphabet.

Ascenders & Descenders
The ascender is the portion of the characters of the alphabet that protrude above the x-height. Examples are lower case characters like; d, l, b, h and k. The height defined by the top of the ascender is often referred to as the Cap Height. While this is reasonably close to the truth, the Cap Height is usually a little lower than the Ascender Height. Many newer typefaces however unify these heights to a single line. The term Cap Height is more commonly used in this case.

Conversely, descenders are the portion of a character that hangs below the ‘baseline’ or the invisible line that text rests on. Examples are lower case characters like; p, y and g.

The point size of a typeface is calculated by measuring the height from the bottom of the descender to the top of the ascender.

Serifs
The terms serif and sans-serif refer to the portion of some styles of typeface which adhere to old aesthetic conventions. The serif of a letterform is the pronounced protrusion at the top and bottom or more generally the end of a straight line within a character. This is the oldest style of typography, referred to as Old Style or less commonly Humanist, and dates back to the 1400s. For further reading I have written a small article specifically on the chronological styles of typography.

Points & Picas
The measurement system for typography is in Points and Picas. These measurements are absolute measurements. This is because they relate to the physical units of inches. The units break up as follows: One inch is equal to 72 points or 6 picas. This means there are 12 points in a pica. It is worthwhile noting that in web design, when working at 72dpi, 1 point is equal to 1 pixel, so web designers can use these terms interchangeably.

Another way of measuring type in a relative way is by using ‘em’ and ‘en’ units. The em square is supposed to be the square that is created by drawing a box around a lower case m for any given typeface.

This measurement is always the point size of the typeface and is also equal to an ‘em dash’. Half an em square or em dash is an en square or an en dash. All these measurements are relative to the typeface and size you are using and have no direct link to a physical size.
This makes the use of the em as the unit of typographic and relational measurement on the internet a perfect solution. If the user decides to resize a page of text that has been designed and built using em units as its measurement and layout system, the entire page should reflow maintaining all relative positions, leading and kerning etc.

Filed under: Design Talk on January 13th, 2009 | No Comments »

ghd’s brand platform for last few years has been the ‘Thou shalt…” device. This year this has been re-visited and the line “See The Light” in reference to the moment of realization or ‘Eureka’ moment when someone first uses ghd and realizes that they ARE that good, and how did they ever manage without one?

I was tasked to, with the help of the team, bring the concept to life online. It was an open creative brief to which we delivered many creative ideas.

The main thrust is focused on content harvested around the TV shoot. The fashion, accessories, style, models, hair, techniques. This was a natural progression as the TV features four empowered women having had their ‘ghd moment’ and how it has impacted their life.

The content was wrapped up in an immersive, explorative Flash section of the main ghd website. Plainly speaking, the user chooses a girl, then explores an interactive scene that she was featured in in one of the TV ads. The live areas of the scene lead to edited ‘behind the scenes’ video content focusing on an aspect of the content like the clothes. This video then had pins in the timeline that the user could then jump into to get even more detail about what they are watching.

All of this content, both editorial, imagery and video would then be available in blog-style content form within a re-structured section on the main website. The strategy behind this involve automatic seeding of this content across the various brand presences on social networks for brand exposure, halo content and creating and fueling conversation.

Filed under: My Work on January 9th, 2009 | No Comments »

An important aspect of typography is discerning a typeface by style. In extremely broad terms typeface styles can be divided into four overarching chronological categories; Old Style, Transitional, Modern and digital.

Old style fonts are the oldest, always serifed and resemble the calligraphy style of old. Lines have different weights within the character. Imagine an ‘A’ with one diagonal line much thicker than the other. There is a slanted axis to the serifs and this can also be seen sometimes in the ‘o’s as the shape seems to slant also. Quills, chisels and other tools used to render text all had a wider flat edge which is why this slant is visible.

Transitional typefaces are still quite old but have less, if any, variation in the thickness of strokes. They are still serifed for the most part but begin to become slightly more geometrical with the axis of letters and the straight angles of the serifs.

Modern style follows the movements of all visual arts of the period, including Graphic Design, where the emphasis was on the minimal and loss of what might be seen as unnecessary ornateness. Simplification of typefaces, including the removal of serifs, uniform strokes and geometry typify this category.

Digital. Well this really isn’t a style but serves to put a marker in the sand as to when computers put the creation of typefaces from the hands of a skilled few into the hands of the masses. As expected a veritable explosion of typefaces in a cornucopia of styles began to appear. While some still pay homage to the past others blur the lines of the role of a typeface moving the shapes into the realms of fine art than simply a form of communication.

It is the abundance of typefaces that now makes a formal set of style classifications almost impossible. A good starting point when filing your fonts and faces would be to have a few folders named; Classic Serif, Modern Serif, Nouveau, Deco, Calligraphic, Decorative, Script, Geometric Sans Serif, Symbolic and maybe something like Quirky to hold those typefaces that you only ever use once.

If any of the terms used here have you saying something ‘What is Sans Serif’? don’t worry, I’ll cover this in an article of it’s own.

To fulfill a request by a friend here’s some facts relating to Lorem Ipsum. This is a body of text that is used as a placeholder for text yet to be inserted into a layout with the purpose of evaluating its aesthetic quality. This is called ‘Greeking’.

The text is Latin and is derived from a work called De Finibus Bonorum et Malorum or ‘On the Ends of Goods and Evils’ by a man called Cicero. It plays an excellent role for this purpose as it typifies an average distribution of word length and spaces in English text.

Filed under: Design Talk on January 9th, 2009 | 1 Comment »

This one causes a lot of debate between classically trained typesetters, designers and the layperson.

Hanging punctuation is the practice of setting certain types of punctuation marks like; single quotes, double quotes or bullet points outside of the measure and into the gutter of a column of text.

Before computer desktop publishing all type that was set with a flush left was done so to avoid breaking the flow of reading. This meant that if a quotation mark began a line of text it would be set outside of the block keeping the left of the text flush. Some people would call this outdenting. The same was done with bullet points which is where a lot of debate rests on this matter.

As soon as computers tried to handle typesetting the possibility that glyphs might be rendered outside of the box became a problem. The solution, it seemed, was to completely ignore this typesetting standard that had been used for centuries and just put everything inside of the box… Job done. These days software has become much more sophisticated and many packages can render hanging punctuation in the classic manner but the the legacy of this original sin has had huge impacts on how the majority of people set text by choice.

I believe that there are situations where properly hanging bullets can be better than the ubiquitous indented usage, but this really is now in the realms of taste and subjectivity. Quotation marks on the other hand should really be properly hanged outside of the measure as this is far more readable.

The example above shows, in very basic form, the difference between classically hanged punctuation and the more common (lazier?) usage.

While we are on the subject of quotation marks I just wanted to bring up the difference between single and double quotes. Using double quotes as standard is really an Americanism. English usage begins a quoted portion of text with single quotes and uses double quotes in the event that you need to nest a quotation within another quotation. Any quotation that spans a paragraph or more should be set as a block quotation and therefore does not need quotation marks. Another use for quotation marks is to add and ironic context to a word within a sentence.

Filed under: Design Talk on January 9th, 2009 | No Comments »

Ligatures seem to be a dying art. You will find huge numbers of graphic designers that give you a funny, questioning look if you mention them in casual typographic conversation. As with all the subjects I cover in typography however, understanding and using ligatures can add that little extra sophistication to your design.

Ligatures are pairs or combinations of characters that are set as a single character within a typeface. “Why?” you might ask. Well, sometimes, more often, but not limited to, older serif faces certain characters can have elements which will naturally interfere with parts of the next character in a word. The most prevalent example would be the characters ‘f’ and ‘i’ when set in lower case. The over-hanging tip of the ‘f’ will naturally touch or overlap the dot on the ‘i’. The overlapping of these character pairs are referred to as ‘kerns’

You could get round this by manually kerning the letters but you may find that this creates a precedent of a certain amount of space which means you have to kern the rest of the word so that the spacing appears even again. The other option is to use an ‘fi’ ligature. This ligature is the letter pair of ‘f’ and ‘i’ created by the designer of the font specifically for this purpose.

Common ligatures include character sequences that are seen most often in the latin alphabet which cause kerns such as; ‘fi’, ‘fl’, ‘ffl’ and ‘ff’.

Not all typefaces contain all or any ligatures however, so the avid typographer will get a little excited by a font that does. These will often be one of the established, classic typefaces and a few of the most reputable contemporary font vendors will endeavor to be this thorough when designing their fonts and faces. Many software packages can replace character pairs for the corresponding ligatures automatically as you type. You will have to explore the relevant settings to find out how.

It is worthwhile noting that ligatures can be used in dynamic text rendering like HTML by using ‘unicode’ references or HTML entities. As I have already mentioned though, all typefaces do not contain ligatures, so I do not use them in this instance… Just to be sure. Any text that is to be rendered as an image however is fair game.

The example above shows some kerns occurring and also the ligatures which not only relieve the visual tension of the overlaps, but demonstrate the aesthetic quality of the shapes themselves.

As a final note the correct name for any character in a typeface, be that a roman letter, ligature, number or a punctuation mark is called a ‘glyph’.

Filed under: Design Talk on January 9th, 2009 | 1 Comment »

The ghd Brand campaign ‘See The Light’ has had the typical ‘ghd treatment’ and as such I was asked to develop the typography into a complete typeface to be used across all comm’s. The development covered a good portion of multi-lingual characters and some lovely curves and negative space.

Filed under: My Work on January 8th, 2009 | No Comments »

This should have been a relatively straight forward one, but the desktop publishing age messed our terminology quite a bit it seems.

A typeface is a stylized alphabet (in full or part) usually containing punctuation, multi-lingual and accented letters, symbols and ligatures packaged up under a specific name. This name is derived by the creator but usually is descriptive of the style and the variation or weight.

During my education it was made clear to me that a font is a collection or family of typefaces under one name and style. These variations usually taking the form of ‘weights’. For example, the font Univers being made up of many weights to make up, what I was taught was, the family or font. These range from thin, light, medium, demi, bold and black which increase in the thickness or boldness of the lines. Each one of these weights is a typeface with a name like ‘Univers – Light’.

Later in my career (only a year or so ago) this was bested and I learned from more knowledgeable sources that, in fact, each of these variations is definitely a typeface in it’s own right. Every cut or weight of a typeface is known as a typeface and a related collection of typefaces with a common style is known as a typeface-family.

While there is still healthy debate, it would be fair to call a font in the instance of the present day a digital representation of a typeface, a means of reproducing the letters in its style. However, historically a font was a complete set of lead cut characters of a typeface in a specific weight and size. An example being Garamond – Italic 12pt.

The example above shows some typefaces from the Universe family. Incidentally, the phrase ‘The quick brown fox jumps over the lazy dog’ used is called a ‘pangram’ which is a phrase that uses every letter of the alphabet. And while we’re at it, the name alphabet is ultimately derived from the first two letters of the Greek alphabet; Alpha and Beta.

Filed under: Design Talk on January 8th, 2009 | 1 Comment »

Text alignment is relatively straight-forward a principle. After all the playing around with the alignment buttons in your favourite desktop publishing program however, there are some things that we should be informed on before we make a final choice on how to align a paragraph of text.

There are generally five options when aligning text; flush left, flush right, centred, justified and freeform. All of which I will elaborate on.

‘Flush left’ is also known as ‘ranged left’ or ‘ragged right’. This refers to the shape the paragraph of text makes when set in this alignment so the left of the paragraph will appear to have a hard line and a ragged right edge. As suspected, the `flush/ranged right’ or ‘ragged left’ is the exact opposite.

In by far the most of situations, we will generally set body copy to flush left as this is almost ubiquitous and very easy to read. Flush right is, or should be, used sparingly and only due to necessity.

The most obvious usage of flush right is when setting a small amount of text that is meant to sit close to the right edge of a page or screen. Our language is based on latin and is read from left to right, which means when we learn to read we subconsciously use the left edge as a visual anchor. When we set larger blocks of copy to have a ragged left we begin to realise that this will make it much harder to keep tabs on where we are at any point while reading.

Next is centred text. This can be a bone of contention in some situations. Especially as when we centre text it creates an appealing and interesting shape on an aesthetic level. An obvious statement you may think, but people often judge a piece of design without actually reading the content. If you believe that design is fundamentally about communication then you can see how this would be problematic.

The truth is similar to how we explained the cons of setting text with a ragged left earlier. It creates a barrier to comfortable reading. However, smaller paragraphs, headings, larger text and discreet pieces of information that fall out of the flow of a layout can be successfully set as centred. As always though, this is based upon the specific layout and other factors like typeface, and leading. The main reason for setting centred text is almost always aesthetic and not semantic.

Justified text can be seen most prevalently these days in newspapers. Justified text sets the paragraph with a flush left and a flush right. It does this by dynamically adjusting the space between words within every line of the paragraph making sure that the first and last word of every line are as flush as possible to both edges.

Justified text is the easiest alignment of all in terms of readability. It also has the most formal feel. You might find in some situations, when setting justified text, that in a line with a particularly small amount of words, like the the end of a paragraph, the space between the words becomes uncomfortably large. There is nothing that can be done about this in terms of settings (some programs do however have additional justification settings relating to how the last line is set). Newspapers have people called sub-editors who alleviate this problem by actually slightly rewriting the paragraph so that a few extra words close the gap. This is not always possible for pieces that we work on, but is an option to bear in mind.

The last is freeform. This is slightly misleading in that you will not find a button that will align text for you in a freeform fashion. Rather than it refers to the act of setting individual lines of copy at your own discretion which creates a pleasing aesthetic flow but does not adhere to any formal rules like having flush edges. This is obviously only meant to be used in situations where the information to be digested is extremely minimal and impact is the primary goal.

Filed under: Design Talk on January 8th, 2009 | 1 Comment »