fonts.com blog
Archive for February, 2012

by Allan Haley

The four issues of U&lc, Volume Seventeen, were published in 1990; a year that presented graphic designers with unanswered questions about the future of typographic communication – and one that marked ITC’s twentieth anniversary. Among a great crop of articles on everything from Japanese kites to the Vigeland Sculpture Park, two new typeface families were announced in Volume Seventeen and the lives of a pair typographers that changed the course of British typographic history were explored.

In Volume Seventeen, Number Three, U&lc approached a wide range of creative specialist with  the question, “Can fine typography exist in the 90’s?” The introduction to the article sets the stage for their answers. “The question is not so easily answered. From different perspectives the response can be a resounding “yes,” or a qualified “no.” Electronic typesetting and type designed for a computer and on a compute have made type lovers anxious. Yet other fastidious and committed type users have found working with type in this electronic age a compelling challenge.” The answers may surprise you.

ITC celebrated its twentieth anniversary in U&lc Volume Seventeen, Number Four. However, rather than provide a history of the company or its accomplishments, the six-page “tribute” featured the reflections of 20 luminary designers (from Art Chantry to Hermann Zapf) on images which influenced or inspired them over the previous two decades.

The ITC Quay Sans™ design was announced in the pages of Volume Seventeen – as was the ITC Officina™ family. Even thought the goal for the latter was to “create a small family of type ideally suited to the tasks of office correspondence and business documentation,” ITC Officina went on to become a stable for all manner of graphic communication.

The QuarkXPress™ 3.0 software for IBM computers running Microsoft Windows® 3.0 or OS/2® was also announced in the pages of Volume Seventeen – as was the availability of the now ubiquitous PowerPoint® application.

Click the PDFs below to find out what else was in U&lc Volume Seventeen.

Low Resolution:

Volume 17–1 (Low Res).pdf (12.2 MB)

Volume 17–2 (Low Res).pdf (11.0 MB)

Volume 17–3 (Low Res).pdf (12.2 MB)

Volume 17–4 (Low Res).pdf (11.2 MB)

High Resolution:

Volume 17–1.pdf (61.2 MB)

Volume 17–2.pdf (54.0 MB)

Volume 17–3.pdf (63.3 MB)

Volume 17–4.pdf (57.2 MB)

Allan Haley
Allan Haley is Director of Words & Letters at Monotype Imaging. Here he is responsible for strategic planning and creative implementation of just about everything related to typeface designs.

 


by Chris Roberts

Here’s a ranked listing of Fonts.com Web Fonts’ top 100 most used Web fonts for January 2012:

Futura® Bold
Neue Helvetica® 45 Light
Neue Helvetica® 35 Thin
Neue Helvetica® 55 Roman
Neue Helvetica® 75 Bold
Univers® 57 Condensed
Garamond 3 Regular
Bauer Bodoni® Black Italic
Garamond 3 Italic
Avenir® 85 Heavy
Neue Helvetica® 46 Light Italic
Avenir® 35 Light
Helvetica® Condensed Bold
DIN 1451 Engschrift
Futura® Bold Condensed Oblique
Sackers™ Gothic Heavy
Sackers™ Gothic Medium
Futura® Medium
Neue Helvetica® 25 Ultra Light
Linotype Didot® Bold
Linotype Didot® Italic
Avenir® 65 Medium
Linotype Didot® Roman
Avenir® 95 Black
Trade Gothic® Bold
Trade Gothic® Condensed Bold #20
Avenir® 55 Roman
DIN Next™ Condensed Bold
Neue Helvetica® 77 Condensed Bold
Laurentian™ Semi Bold Italic
Linotype Univers® 620 Condensed Bold
Trade Gothic® Roman
Neue Helvetica® 65 Medium
Futura® Book
Neue Helvetica® 47 Condensed Light
Linotype Univers® 420 Condensed
Futura® Heavy
Avenir® 45 Book
ITC Avant Garde Gothic® Book
DIN Next™ Bold
Trade Gothic® Bold #2
Linotype Univers® 320 Condensed Light, Extended
PMN Caecilia® 75 Bold
Univers® 47 Condensed Light Oblique, Extended
Neue Helvetica® 77 Condensed Bold, Extended
PMN Caecilia® 85 Heavy
PMN Caecilia® 76 Bold Italic
Trade Gothic® Condensed #18
Futura® Bold Condensed
Futura® Medium Condensed
VAG Rounded™ Bold
DIN Next™ Regular
Monotype Grotesque® Condensed
Neue Helvetica® 37 Condensed Thin
Neue Helvetica® 45 Light, Extended
Neuzeit® Office Bold
Neuzeit® Office Regular, Extended
ITC Avant Garde Gothic® Medium
DIN Next™ Condensed Regular, Extended
Neue Helvetica® 63 Extended Medium
Neue Helvetica® 65 Medium, Extended
Neue Frutiger® Light
Neue Frutiger® Book
Helvetica® Bold
ITC Avant Garde Gothic® Bold
Neue Frutiger® Bold
Trade Gothic® Condensed Bold #20, Extended
Soho® Regular
Trade Gothic® Bold, Extended
Neue Helvetica® 55 Roman, Extended
Neue Helvetica® 67 Condensed Medium
Univers® 67 Condensed Bold Oblique
Soho® Bold Italic
VAG Rounded™ Light
Helvetica® Bold, Extended
Gill Sans® Book
Neue Helvetica® 53 Extended, Extended
Neue Helvetica® 57 Condensed
Neue Helvetica® 73 Extended Bold, Extended
Baskerville Italic
Frutiger® 65 Bold
Helvetica® Condensed Light, Extended
Neue Helvetica® 67 Condensed Medium, Extended
Helvetica® Rounded Bold
Trade Gothic® Condensed #18, Extended
Neue Helvetica® 87 Condensed Heavy
Rockwell® Bold
Avenir® 55 Roman, Extended
Nazanin® Bold
ITC Avant Garde Gothic® Demi
Cachet™ Medium
Clearface Gothic™ 55 Roman
Clearface Gothic™ 45 Light
Helvetica® Light, Extended
DIN Next™ Medium
VAG Rounded™ Black
Trade Gothic® Next Regular
Neo® Sans Arabic Regular
Cachet™ Bold
Nazanin® Light


by Allan Haley

Linotype Typesetting Machine

I saw a delightful film last night. It was insightful, humorous, poignant – and downright entertaining. The film was about a machine that revolutionized graphic communication, changed society in profound ways, and ushered in new heights in literacy.

Linotype: The Film” is a feature-length documentary centered around the Linotype type casting machine. This seven-foot tall, two-ton, package of thousands of moving parts, called the “Eighth Wonder of the World” by Thomas Edison, revolutionized printing and culture. The film tells the surprisingly emotional story of the people connected to the Linotype and how it impacted our world – and theirs.

The movie, is a “must-see” for anyone involved in the graphic arts, anyone who is fascinated by technology, or anyone who just likes a good story. It features as cast of characters (pun intended) and cameo interviews with type designers like Nadine Chahine of Monotype imaging and Matthew Carter. The real stars of the film, however, are the Linotype machine and the remarkable people who were Linotype operators, repairmen, shop foremen and historians, who tell the Linotype story. Screenings have been in New York and Providence, Rhode Island; and more are scheduled for Boston, San Francisco, Seattle and Baltimore. There will also be a DVD available by early summer.

Type designer Matthew Carter shows a sign salvaged from his days working at Linotype

Type designer Nadine Chahine talking about the impact of the Linotype

Ray DesChamps at the Linotype in the Museum of Printing, North Andover, Massachusetts

Allan Haley
Allan Haley is Director of Words & Letters at Monotype Imaging. Here he is responsible for strategic planning and creative implementation of just about everything related to typeface designs.



by Matt Brinkerhoff

If your lover gets more excited by contextual alternates than flowers and chocolate, take a look at these design-oriented gifts this Valentine’s Day. Guaranteed to tighten the kerning between you and your mate.

LOVE Print by Robert IndianaLOVE Print by Robert Indiana
Robert Indiana’s iconic “LOVE” image has appeared all over, most notably in Philadelphia’s JFK Plaza. The image, featuring hand-drawn letters inspired by Linotype’s Clarendon Bold has become ubiquitous with the word ‘Love’ throughout the world.
Shop Robert Indiana’s LOVE Print from MOMA

 

Typographic Rugs from Linus DeanTypographic Rugs by Linus Dean
While conventional wisdom states that giving a rug as a Valentine’s Day gift may leave you in the doghouse, give these Typographic Rugs a look. Fans of vintage typography, hand-drawn scripts and strong sans serif fonts are about to discover they can do much better than the bear skin rug.
Shop Typographic Rugs from Linus Dean

 

Designer Temporary Tattoos from Tatt.lyTatt.ly Designer Temporary Tattoos
Tatt.ly represents a collaboration between Tina Roth Eisenberg of SwissMiss Design and various designers to create temporary tattoos you’d actually consider putting on your body (no offense to the vending machines at the supermarket). Tatt.ly’s Love and Hug let you wear your heart on your sleeve. Perfect for those afraid of commitment!
Shop Designer Temporary Tattoos from Tatt.ly

 

Typocolate by DynamoTypocolate
I know, I know. Chocolate on Valentine’s Day is as cliché as it gets. That said, Dynamo’s typographic chocolate straddles the line between gourmet candy and art. With two designs available, these 240g bars of dark or milk chocolate are sure to please even the most jaded Valentine’s Day veterans.
Shop Typocolate from Dynamo

 

Hardwood Typography by the LetterHardwood Typography by the Letter
This wouldn’t be a post for designers without the chance to create your own Valentine’s Day gift. Craftcuts offers hardwood typography by the letter, in your choice of woods & typefaces. With some careful typographic consideration, a designer can create a thoughtful, one-of-a-kind gift. And hey, you can use them to keep the fireplace going if they aren’t well received.
Shop Hardwood Typography from CraftCuts

Matt Brinkerhoff
Matt Brinkerhoff holds a bachelor’s degree in E-Business from Champlain College and has experience in user experience, multivariate testing, design and Web development. Through his work as a freelance designer, Matt developed an affinity for typography years before joining the team.



by Jason Cranford Teague

Last year, 2011, was the year that Web typography finally came of age as Web fonts have grown in popularity. The history of Web design has been full of inspiration and innovation, but little of that has been around typography, in large part due to the lack of font choices available. To be sure, typography is about far more than just the font, but when you only have five fonts to choose from for most of your work, imagine a culinary world where you could only choose from five ingredients.

Web designers are finally coming out of the type coma of the last 15 years and using a variety of typefaces in their compositions. With the wide adoption of the @font-face CSS rule and the rise of Web font service bureaus, there are now close to 50,000 fonts available for your designs that will work on virtually all Web browsers – yes, even the Internet Explorer® platform. IE has supported Web fonts since version 4.

We’ve entered into a renaissance of the visual appearance of pages all over the Web. Designers are now experimenting with new ways of displaying text that were previously impossible or only achievable through the use of text in images.

2011 was a period of intense experimentation – some more successful than others – but there are some clear trends emerging in how Web typography will evolve and how it will differentiate itself from print typography.

1. Typographic Voice Diversity

Kitchen Sink Studios website using Web fonts

Kitchen Sink Studios uses five different typefaces in their home page, but it works to create a unique voice, showing off their services.

 

Type is to text what voice is to speech. The fonts you choose have a dramatic impact on the tone and emotion of the message you are presenting. As the famed book designer Richard Bringhurst put it, “When the type is poorly chosen, what the words say linguistically and what the letters imply visually are dishonest, disharmonious, out of tune.” Now that we are no longer limited to the “Fatal Five” families – the Arial®, Georgia®, Trebuchet® MS, Times®, and Verdana® faces – we are free to explore, mix and match a wider variety of typographic voices.

Some worry that this will lead to an explosion of fonts in designs, with inexperienced designers mixing a smorgasbord of typefaces, creating a cacophony of voices rather than a chorus. Time will tell, but at least the era of monotone typographic voices is finally at an end.

2. Larger Font Sizes

Information Architects website

Information Architects website, informationarchitects.jp speaks softly, but carries a big font.

Text on the Web has been too small for far too long. For a variety of reasons  including the “above the fold” myth and the belief that small type looks more sophisticated, most type on the Web is set on the screen at 12px or lower. However, as a clever yet simple experiment by Information Architects has shown, 12-point printed type is visually the same size as 16-pixel screen type

I start all my projects with a base font size 100 percent, which uses the browser’s default size, generally 16px unless otherwise set by the user. I then use sizes set using the em unit to scale text larger or smaller as needed.  Smaller text – like footer text and notes – can go as low as .625em (~10px assuming the base size is 16px), but body copy should be a minimum of .875em (14px) to 1em (16px) and headers start at one em and go to two em, three em, and even four em or larger. If you need help converting to PXs or PTs, PXtoEM.com is a great resource.

The transition to larger text may seem awkward at first – I’ve actually had to convince clients that the text is not too large – but once you adjust, small text will begin to feel cramped and amateurish.

3. Slab Serifs Fonts

Slab Serif Fonts

German Website Pixelbäker uses the popular Museo Slab™ slab serif font (Exljbris).

 

One important concern for Web typography is legibility, making sure that characters are as easy as possible to discern. There are a lot of factors that go into making a legible font, but two of the most important are consistent strokes and either thick serifs or no serifs at all. Thinner serifs tend to get fuzzy at the edges, as they are blurred for anti-aliasing. For this reason – as well as general style reasons – we are seeing a  lot of slab serif fonts being used in Web designs over the last year.

EgyptianSlate

Egyptian Slate (Monotype), already popular in print, base become a popular slab serif Web font.

Slab serif fonts have serifs that are square and of generally uniform width, thus with little or no tapering at the ends. These fonts can have a strong typographic voice. Often feeling heavy and constructed, but because of this they are clear, stand out on a page and are easy to apply typographic effects to using text shadows, especially the letterpress effect.

4. Letterpress and Other Text Shadow Based Effects

Facio Design Website

British Design Firm Facio Designs Blog uses a paper texture background with a light letterpress effect.

A long time coming, text shadows are now available to Web typographers using CSS. Even better, since you can add multiple shadows to a single text block, there are a variety of new effects that are quickly becoming common on the Web, most notably the letterpress effect.

Letterpress effect

The letterpress effect up-close

The letterpress effect is achieved by placing text on a contrasting, but not 100 percent contrast background color (i.e. not 100 percent black or 100 percent white), and then offsetting a text shadow with a color lighter than the background down and to the right and a darker drop shadow up and to the left. The offset should be only slight – one to three pixels depending on the text size – to avoid having the corners show a gap. Smaller type will not need any blur, but larger type may need a slight blur added to soften the effect slightly.

Text Effects

I put together a list of some interesting text-shadow effects

 

Aside from straightforward text shadow effects, letterpress is the effect I see most frequently, but there are many others, all achieved through the judicious application of text shadows.

5. Color Contrast

Contrast Rebellion

Contrast Rebellion is a site with a cause: fight low contrast text.

There’s debate in the design community about the need for contrast in type – whether it’s acceptable for the font color to be closer to the background color. Several argue that this is bad design, harming legibly and readability. However, many designers believe in reducing contrast in text, feeling that it adds an understated sophistication to the appearance, also allowing them to better guide the viewer’s eye by mixing contrast on the page.

Recent studies support the notion that decreasing legibility can actually increase viewer focus and cognition. The logic goes something like this: if you force the viewer to take more time to read something by decreasing the legibility, then they are forced to pay more attention and retain the information longer. This argument is something of a mixed bag, however, since some of the studies have used the Comic Sans® face to prove the point.

Designers intuitively know that perfect contrast can be visually dull. Black text on white background is much like making everything bold; everything is important so nothing stands out. You need contrast to engage the viewer’s eye and help them prioritize what they are looking at, and one way to do that is with different color contrasts.

Still, there’s a point at which low contrast goes from forcing readers to focus to just becoming unreadable. Colour Text Legibility is a great resource for testing foreground and background combinations, and will alert you based on the W3C’s guidelines for color readability and Web accessibility guidelines to ensure you do not stray too far.

6. Mixing Font Weights

Aspen Ideas Festival Website

The Aspen Ideas Festival mixes different weights of the Futura® typeface (Neufville).

A lot of Web designers I meet think that “bold” is the font weight, but bold is actually a font weight. Although certainly the most common, bold is not the only weight available for fonts. There are also thin, light, medium, heavy, black and many others. For example, the Neue Helvetica® design includes weights ranging from ultra light to black.

Neue Helvetica Type System

The Neue Helvetica font family with weights ranging from ultra light to black

Additionally, many fonts use a base 100 number scale to indicate weight, with 100 being the lightest, up to the heaviest at 1000.

CSS, though, only has limited capabilities to directly access these weights. The font weight includes values for regular, bold, as well as 100, 200, 300, 400, 500, 600, 700, 800, 900, and 1000. However, if you use the @font-face rule, you can still use any of the font weights available by simply assigning each weight its own font-weight value or, alternatively, a unique font name for each weight.

7. More Space

Future of Car Sharing Website

The Future of Car Sharing site uses a lot of space and a horizontal scroll.

Along with larger font sizes, there is a trend toward more white or negative space in Web designs. This is partially in response to the realization that the above-the-fold rule was actually a myth (people do scroll and expect to, as explained in 2007 by Melissa Tarquini) as well the fact that larger monitors have become ubiquitous over the last several years.

More space in designs is a very good thing, allowing for easier scanning and cleaner, less cluttered designs. Many designers have started playing around with layouts that really only work on screens that scroll, and this trend will only continue as we begin to master the new powers that @font-face and CSS3 provide.

8. Responsive Typography

Boston Globe Website

The Boston Globe reformats its layout and typography to fit desktop screens, tablets, and smartphones.

Although desktop monitors have gotten larger, the display screens on which we expect our design to be viewed are getting smaller, as more people view the Web through tablet devices and smartphones. The good news is that rather than returning to tight designs for our Web pages, we can create designs that “respond” to the device on which they are displayed.

Responsive Design (sometimes called “Reactive Design”) is a development methodology which forgoes the one-size-fits-all philosophy of the past, and instead leverages CSS media queries and the JavaScript™ language to deliver designs that are tailored to the capabilities of the user’s device. This means not only resizing images and interface elements but also tweaking the typography of designs so they scale up or down as needed. This applies to font sizes as well as column widths, line height and even justification in some instances.

Although it might seem like a pain at first to have to consider your designs as scalable, it will soon be a necessity. It is predicted that by 2015, mobile use of the Web will surpass desktop use and desktop use will begin to decline.

In addition to mobile, there are future screen types to consider. Although the fabled WebTV seems to be always just on the horizon, there is some very real movement in that arena with Google and Apple working hard to find the right formula. It may not be too much longer until you need to consider how your designs will look in a 62″ HDTV.

9. Handwritten Fonts

Lilac Creative Website

Lilac Creative uses the Coral™ Regular handwriting font (Scholtz Fonts) to give the site a friendly appeal.

Handwriting fonts are another design type that’s becoming increasingly popular. Despite how many feel about Comic Sans – the most notorious handwriting font of them all – type that looks as if it were written by hand gives a friendly, open, and approachable feel.

Handwritten Font

JasonSpeaking01 is my own homegrown handwriting font I created using the iFontMaker™ app. Download it free and let me know what you think.

In addition to the numerous commercial and free fonts available, it’s also now relatively easy to make your own handwriting font, using the iPad® app, iFontMaker, vLetter’s custom handwriting font service or other options.

10. Dingbats Instead of Images

Although the Webdings® font is one of the Microsoft® core Web fonts preinstalled on virtually every computer in existence, using this font for icons in Web pages has never caught on. There is a simple reason for this: the font will not display in the Firefox® browser. The reason has to do with how the font is encoded, but the upshot is that you can’t use them.

Frames and Borders Font

The Frames and Borders Font (Outside the Line) contains a variety of images and symbols and is available as a Web font.

However, if you are using @font-face to embed properly encoded fonts, there is a close to 100 percent chance the font will be used. The advantage of using a font for a dingbat, in place of an image is scalability and styles. Whereas image-based icons are a fixed size, fonts can be quickly scaled up or down to any size, altered in color or have other styles changed on the fly without any loss of fidelity.

Great type makes sites stand out