Ten questions.
Difference between typeface and font
Readabiltiy Vs Legibiitly
7 Colour Contrasts
Complimentarty and subjective colours
Point Size
Arrangement of type
Difference between RGB and CMYK
Playing with type
Origins of type
I have researhed the first five so far to create my double page spreads.
TYPEFACE AND FONT
What’s the difference between Typeface and Font?
The first terminology we agreed upon was in which situations we’d use font and when typeface. Mark Simonson once recapped it handsomely in this discussion on Typophile. The gist of it is that
the physical embodiment of a collection of letters, numbers, symbols, etc. (whether it’s a case of metal pieces or a computer file) is a font. When referring to the design of the collection (the way it looks) you call it a typeface.
Nick Sherman used an interesting analogy in a comment on Typographica’s Our Favorite Typefaces of 2007:
The way I relate the difference between typeface and font to my students is by comparing them to songs and MP3s, respectively (or songs and CDs, if you prefer a physical metaphor).
Stephen Coles agrees:
When you talk about how much you like a tune, you don’t say: “That’s a great MP3”. You say: “That’s a great song”. The MP3 is the delivery mechanism, not the creative work; just as in type a font is the delivery mechanism and a typeface is the creative work.
JUST MY TYPE
Fonts were once known as founts. Fonts and founts weren’t the same as typefaces, and typefaces weren’t the same as type. In Europe the transition from fount to font was essentially complete by the 1970’s, a grudging acceptance of the Americanisation of the word. The two were used interchangeably as early as the 1920’s, although some whiskered English traditionalists will still insist on ‘fount’ in an elitist way, in the hope that it will stretch their authenticity all the way back to Caxton, the great British printer of Chaucer. But most people have stopped caring. There are more important things to worry about, such as what the word actually means.
In the days when type was set by hand, a font was a complete set of letters of a typeface in one particular size and style - every different a, b and c in upper and lower case, each pound or dollar sign an puncheon mark. There would be many duplicates, the exact amount dependant on their common usage, but always more Es and Js. There is still debate as to the derivation of ‘font. Some believe the word stems from ‘fund’, the fund (amount) of the type from which the letters are selected. Others maintain that it comes from the French ‘fonte’, which translates as ‘cast’ -a letter cast in lead. These days a font refers usually to the digital, computerised form of a particular typeface. Each typeface may have a family of several fonts (fonts, italic, condensed, semi-bold italic etc), each weight and style on the page a little different. But in common parlance we use font and typeface interchangeably and there are worse sins.
Definitions should not cloud our appreciation of type, but some classifications can be useful in understanding the subject’s history and usage. Just as it is entirely possible to have a pleasant afternoon in a gallery with no knowledge of art theory or an artists place in the firmament, one can wander around the streets admiring typefaces on signs and shoos with not a care for their history. But is may increase our love of them if we know who made them, and what they were admiring for. And for this we need to define a few words in the typographic language.
READABILITY VS LEGIBILITY
Legibility
When choosing a typeface, it all depends on how you plan to use it. Ask yourself some basic questions: What size will the text be used at? Will it appear as body copy or a headline? Does it need to be a workhorse or will it be used more as eye candy? Will it be paired with another font? Does the appearance of the typeface complement the subject matter?
It’s also important to keep in mind that different typefaces were designed for different uses. For example, the original Garamond was designed to be highly legible when printed in a large body of text. Some also say it was the most eco-friendly font of its time, conserving ink usage.
In short, it helps to know the intended context of the typeface you are considering using. Some fonts are indeed quite flexible, include several weights and they can be used in several ways. Others are more constrained, designed to be used very specifically.
Serif vs. Sans Serif
So which is more legible: serif or sans-serif typefaces? History tells us that serif faces have always been regarded as more legible, as they were almost always used in print for large passages of text. The serif faces allow the eye to flow more easily over the text, improving reading speed and decreasing eye fatigue.
That said, there are many readable sans-serif faces. Online it seems sans-serif faces are being used more for body text than ever. I think there are several reasons for this. The simpler letterforms seem to work better with current design trends and can feel more modern. Also, we typically don’t read large passages of text on a website, so sans-serif fonts do just fine in shorter chunks of copy.
x-height
Another characteristic to note is x-height. This typically applies to using type at body text sizes. The x-height is, well, the measurement of the height of the lowercase “x” in a given font. It doesn't take into account the height of the ascenders or descenders. You may be surprised to know how much difference there is in x-height from one face to another. When used small, typefaces with larger x-heights are typically more readable.
Readability
Readability is about arranging words and groups of words in a way that allows the readers eye to access the content easily and in a way that makes sense. It’s really an art form that is honed over time as successful combinations are found.
In my experience this tends to be one of the hardest concepts to grasp for beginning developers and designers alike. Even seasoned designers sometimes struggle with how to best arrange typography in a layout. Now that those two designations are starting to merge when it comes to web design, it’s important to begin to grasp the concept of readability.
JUST MY TYPE
In the 1940's the most popular test for a font’s legibility was the ‘blink test’. Blinking relieves tired yes in the same way as putting down heavy shopping relives pressure on our palms; our eyes blink more when tired or under strain, and a familiar typeface will cause less fatigue. Under laboratory conditions - where light and type size are regulated, and the the ‘patient’ (reader) is presented with the same text in many faces (the optician’s sight chart yielding to the pursuit of both art and universal clarity) - the number of involuntary blinks were monitored on a handheld clicker.
According to a series of lectures given by John Biggs at the London College of Printing, the types that fared best in the blink test were those that had surveyed for centuries and were always being revived and slightly modified; Bembo, Bodoni, Garamond. It might have been easier to ask the patient which text they comprehend better or which gave them less eyestrain, but such methods would have been subjective and unscientific.
Fortunately we also have more recent investigations. Many of these occurred in the 1970s at the Royal College of Art’s Readability of Print Research Unit (in the computer age it became the slightly less ungainly Graphic Information Research Unit). among its conclusions: people found type with strong distinctive strokes easier to read than flattened styles; and a greater distinction between letters led to a cleaner (and faster) digest of information. The reattach confirmed that the key areas that make a letter most distinctive are its top half and right side, the eye using these flag posts to confirm what is anticipates may be there.
Other surveys suggested that most readers prefer bold faces over regular ones, although their legibility is about the same. Serif and sans serif face are also equally legible, so long as the serifs aren’t too heavy and thick. Typefaces with larger counters - the very opposite of Cooper Black - are also regarded as more legible, especially at a smaller sizes where these counters.
In a wood, somewhere in England, rifles in hand, you have been watching
Arthur Lowe (proud, pompous walk)
John Le Mesurier (leafy camouflaged helmet, looking nervous)
Clive Dunn (brave gaze, cold steel)
John Laurie (anxious, doomed)
James Beck (crafty draw on cheeky fag)
Arnold Ridley (may need to be excused)
Ian Lavender (blue scarf, mum’s insistence)
This is the closing sequence to Dad’s Army, Britain's much-loved TV comedy about the Second World War, produced in the late 1960’s early 1970’s and repeated ever since. The actor’s credits are in Cooper Black, which sells not only things we now consider to be retro and classic, such as Kickers and Spacehoppers, but also anything intended to be warm, fuzzy, homely, reliable and reassuring like easyJet.
The lettering on the side of planes had rarely implied fun before easyJet tried it, and so strong it this typographic branding that no one has successfully imitated it.
Coper Black as a good fin. ti is rare for a new company to select a pre-digital unmodernised classic face from the shelf and not receive or tweak it in some way, but here was an exception. Like so many fonts that have stuck, it was designed in the 1920’s and became instantly popular. Oswald Bruce Cooper, a former Chicago advertising man, was commissioned by the foundry Barnhart Brother & Spindler to make something that they could sell to advertisers. Cooper had achieved something spectacular, a serif face that looked like a sans serif. Cooper Black is the sort of font the oils in a lava lamp would form if smashed on the floor. For a font with such a thickset look, it retains a remarkably unthreatening demeanour. Partly this is due to its stout and puddly descenders its large lower-case letters in relation to its capitals and the limited white peering through the counters fof the a,b,c,d,e and g.
This is one difference between legibly and readability; at small sizes, copper black is legible but not readable. But some type is meant to be seen rather than read.
COLOUR CONTRASTS
THE CONTRAST OF SATURATION
Contrast of saturation The contrast is formed by the juxtaposition of light and dark values and their relative saturation.
THE CONTRAST OF LIGHT AND DARK
Contrast of light and dark The contrast is formed by the juxtaposition of light and dark values. This could be a monochromatic composition.
THE CONTRAST OF EXTENSION
Contrast of Extension Also known as the Contrast of Proportion. The contrast is formed by assigning proportional field sizes in relation to the visual weight of a color.
THE CONTRAST OF COMPLEMENTS
Contrast of complements The contrast is formed by the juxtaposition of color wheel or perceptual opposites.
SIMULTANEOUS CONTRAST
Simultaneous contrast The contrast is formed when the boundaries between colors perceptually vibrate. Some interesting illusions are accomplished with this contrast.
THE CONTRAST OF HUE
Contrast of hue The contrast is formed by the juxtaposition of different hues. The greater the distance between hues on a color wheel, the greater the contrast.
THE CONTRAST OF HUE - PRIMARIES
itten 's contrast of hue - primaries The contrast is formed by the juxtaposition of primary hues.
THE CONTRAST OF WARM AND COOL
Contrast of warm and cool The contrast is formed by the juxtaposition of hues considered 'warm' or 'cool.'Continue tutorial, view: Proportion & Intensity
DESIGNER'S COLOUR MANUAL
The primaries are not the only colours that can be mixed of course. We can use prisms or coloured filters to produce any wavelength of light and combine it with any other to give a particular colour. Equally, we can mix paint colours and see the results. The reason for using the primaries is that if the proportions are right, we can accurately produce any colour within the visible spectrum. Start with a different set of colours and this not guaranteed.
In mixing paints, or pigments, we are manipulating light indirectly. When light stokes the pigmented surface, some wavelengths are absorbed and others reflected. The reflected wavelengths determine the colour we see. So what we call red paint is paint that absorbs green and blue light, while green paint absorbs red and blue, Now, we know from trichromatic theory that mixing red and green should produce yellow. It is not going to to work that way with our pigments. Each absorbs more light than it reflects, so mixing two together can only make a darker colour: the combination of red and green in fact produces a muddy brown. Mixing paint in all three primaries, rather than making white, as with light, will make something close to black.
The solution is subtractive mixing. Instead of pigments that absorb all but a certain primary, we use pigments that only absorbs a lll but a certain primary, we use pigments that only absorb a certain primary. Starting from white (the assumed colour of our canvas), we can reverse the additive process by applying more pigment, subtracting more of each primary, until we finally reach black. The colours that absorb the primaries are their complements. Cyan (a blue-green colour) absorbs reed;magenta (a pinkish colour) absorbs green; and yellow absorbs blue.
In mechanical colour printing, cyan, magenta, yellow and black - CMYK - are now used as primaries to generate a reasonably broad spectrum of colours.
POINT SIZE
Meet the Units
“Ems” (em): The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature.
Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution). Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of their site as it is rendered in the browser. One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.
Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.
Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.
So, What’s the Difference?
It’s easy to understand the difference between font-size units when you see them in action. Generally, 1em = 12pt = 16px = 100%. When using these font-sizes, let’s see what happens when you increase the base font size (using the body CSS selector) from 100% to 120%.
Font-sizes as they increase from 100% to 120%.
As you can see, both the em and percent units get larger as the base font-size increases, but pixels and points do not. It can be easy to set an absolute size for your text, but it’s much easier on your visitors to use scalable text that can display on any device or any machine. For this reason, the em and percent units are preferred for web document text.
JUST MY TYPE
The point size can be used both as a unit of measuring type and the space between it. For regular newspaper and book text, 8pt to 12pt usually satisfies. There are 72pts to an inch. 1pt is 0.013833 inches. Typographers group them together in picas: 12pt to a pica and 6 picas to an inch. There have been many historical and national variations, and metal and digital measures differ slightly, but today we almost have an international standard: in the US, 1pt=0.351mm; in Europe 1pt = 0.376mm.
But the maths, geography and vocabulary of type should never obscure the most basic fact of all: regular or italics, light or bold, upper or lower case - the fonts that work best are the ones that allow us to read without running our eyes.
References
http://webdesign.tutsplus.com/articles/typographic-readability-and-legibility--webdesign-12211
http://www.worqx.com/color/itten.htm
No comments:
Post a Comment