1. Helvetica vs. Arial

Can you tell the difference between Helvetica and Arial? This game puts you to the test.

Click here to view this gallery.

We have a treat for font fans with itchy thumbs in this super selection of five fabulous iPhone games that share a typographical theme.

Can you easily identify typefaces? Can you tell Helvetica and Arial apart? Can you spot the serif in a sea of characters? These games will test you on these skills — and more. Best of all, the apps we’re highlighting are all tried, tested and free, so you can give them a go without spending a single cent.

SEE ALSO: Top 10 Accessories for Typography Nuts [PICS]
Take a look through the gallery for our selections. Shout out in the comments below with any other typographical games you enjoy on your iPhone.

More About: apple, dev and design, features, fonts, Gaming, iphone, iphone apps, iPhone games, typography

For more Dev & Design coverage:

The Leaders in Design Series is supported by Volvo.

Font designer Steve Matteson, 46, is behind some of the most recognizable typefaces on consumer products today. From the Droid series of fonts in Android’s mobile phone platform to Xbox, Xbox 360 and the suite of fonts that comes with Microsoft products, such as Windows 7 and Microsoft Office, Matteson’s work is everywhere.

While attending the School of Printing at Rochester Institute of Technology, he became enchanted with the text printed on the pages of books. He studied calligraphy, design and typography, and set out to turn this passion into a full-time career. He now works at Monotype Imaging, which specializes in typesetting and typeface design. It’s the company that has brought us various popular fonts including Helvetica, Times New Roman and ITC Franklin Gothic.

Mashable spoke with Matteson about his love for design and what drives him to keep pushing the creative envelope.

Q&A with Steve Matteson, Font Designer

How would you describe your design style?

I approach design from a problem-solving perspective. Most of my work over the past 25 years has been focused on creating custom typefaces for specific environments, such as mobile-device screens or corporate branding. This gives me a set of rules to work within and depending on the project, it can either restrain me or free me up to embrace self-expression.

Are you particular about font styles?

Type gives a voice to the author’s message, and it’s bothersome when there is a disconnect between the two. The only time I’m very particular about typeface styles is when they’re used inappropriately or without imagination. It’s how a musician feels when a certain composition is played in a style that’s out of place. For example, Comic Sans is perfect for comic books but awful in formal settings. G.F. Handel’s Messiah would be bad in a hip-hop mix.

What’s your font of choice?

“Type gives a voice to the author’s message, and it’s bothersome when there is a disconnect between the two.”

The typefaces I use every day are dictated by what I’m producing. I’m a big fan of book typefaces and those with some character. I tend to use designs with an organic, non-mechanical appearance. My favorite design is the Font Bureau‘s version of Californian, originally designed by Frederic Goudy for University of California at Berkeley.

How does one become a font designer?

People have come to type design from many different backgrounds. Thanks to type-design computer software and a few college degree programs that now allow students to study design type from an early age, more are attracted to the field. It seems like a narrow discipline, but it requires a wide variety of influence. Some of the best text-type designs came from book designers such as Bruce Rogers, Fred Goudy or Jan Tschichold. Lettering artists and calligraphers have made huge contributions to expressive type designs. Again, type design is similar to music. You have a framework within which to work: key signatures, tempo, rhythm, genre and so on. Successful composers are drawn to this framework and work within the limitations. Designers see a similar framework to work within in type. They are either smitten by it or never come back.


Droid Sans, the font


What design or project of yours are you most proud of?

My proudest achievement is probably the designs I did for Google’s Android mobile platform. Droid Sans, Droid Serif and now OpenSans — based on Droid Sans — have become very popular. I really like these because while they are highly utilitarian, they also have a lot of me in them. They weren’t made so neutral as to prevent me from expressing myself. It’s also rewarding to see my work used by huge numbers of consumers every day.

What’s the biggest challenge you’ve faced with design so far?

The typeface family I designed for the hardware of XBox 360 was the biggest challenge. The company wanted a new typeface family to reflect the redesign of the device, but I couldn’t see any of the hardware designs in progress or how the typefaces would be rendered on the XBox screens. I had to take the designer’s word for it that I was headed in the right direction throughout the six-month project. When I saw the final product with my typefaces, it was a relief that it successfully provided a unified brand voice.

How is design for companies different now than it was a few years ago?

The adoption of web fonts technology by browser manufacturers has created a rebirth in typographic expression on the web. Companies are seeing a huge shift towards recreating their collateral for the web and mobile. Even in the last 2 years, we saw a lot of ‘web safe’ system fonts conveying corporate messages — such as IKEA’s switch to Verdana — now you see the corporate brand voice in the proper corporate typeface. It’s like the desktop publishing revolution all over again.


What advice would you give to inspiring and up-and-coming designers?

Don’t be discouraged by the overnight success of peers. This can lead to impatience and bad-decision making. I’ve seen a few designers flame out as they try to keep up with self-promoters with large web-based followings. Hard work is definitely the only way to succeed, but balance is also important. I turn to cycling on the roads and trails of Colorado. I also play trumpet in two ensembles and carve letters into stone. The creative energy has to come from somewhere, and if it’s constantly depleted, it’s not going to recharge.

Image courtesy of iStockphoto, esolla

Series supported by Volvo


The Leaders in Design Series is supported by Volvo. Experience the newest Volvo for yourself. Step inside the 325hp 2011 Volvo S60 T6 R-Design at volvocars.us.

More About: android, designers, features, fonts, Leaders in Design Series, mashable, microsoft, Xbox 360

For more Dev & Design coverage:

1. Tumblr

The Tumblr logo itself is re-imagined with the Comic Sans treatment.

Click here to view this gallery.

Some fonts get no respect. This is true of Comic Sans, the ’90s-era Microsoft typeface that sought to emulate comic book text and failed miserably, by most accounts.

The font’s childish, unsophisticated scrawl and overuse by armchair designers has rendered it taboo in most artistic circles, and the sophisticated web at large enforces a moratorium on its use. Some have even campaigned to rid the web of it forever.

But despite the haters, French designers Thomas Blanc and Florian Amoneau have sought to spark a movement. Their new Tumblr, entitled the Comic Sans Project, tries to re-imagine the much-maligned font by posing a simple aesthetic question: What if the world’s most recognizable logos used Comic Sans?

“We have been inspired by all the jokes about Comic Sans we heard and read on the Internet every day,” says Blanc. “We wanted to create our own personal joke with those ironic logos. At the same time, we actually tried to defend Comic Sans [by] posting only logos which look good enough to us. Some of them work pretty well!”

SEE ALSO: A History of Western Typefaces [INFOGRAPHIC]

You can see the results above. With their six-day-old, half-ironic Tumblr, Blanc and Amoneau seem to have awoken a latent and widespread appreciation of the font — as if the world had been waiting for someone to say: It’s OK to love Comic Sans again.

“We received a lot of cheering emails and a lot of submissions from all over the world,” says Blanc, who intends to open the site to user-generated content soon.

What’s next for the Comic Sans Project? There are 20 more logos in the works, including NASA and M&M’s, says Blanc. “We also plan to use the benefits of this little fame to find a job in Paris. We will redesign logos of French advertising agencies and send it to them.”

Take note, kids. This is content marketing at its finest.

Images used with permission.

More About: comic sans, design, features, fonts, typography

For more Dev & Design coverage:

The Fontography Series is supported by join.me, the easiest way to have an online meeting. join.me lets you instantly share your screen with anyone, for free. Use it to collaborate, demo, show off — the possibilities are endless. Try it today.

You see approximately 490,000 words every day — and that’s just on the web. If the designers behind those websites are any good, they put a lot of thought into the typefaces they use on each page.

Fonts don’t just display letters as words and sentences. They convey emotion, attitude and tone. They call out what information is most important and help you navigate through a site.

Hate Comic Sans? You’re not alone. There are plenty of reasons for despising the font, according to many fontographers and font enthusiasts. Love Helvetica? You’re not alone — many designers love its clean and simple aesthetic.

The infographic below presents a history of typefaces, incorporating fun tidbits from tech, pop culture and the web. Do you know what font the Google logo is? What about Facebook? Take a peek below to learn these and more.

Infographic design by Nick Sigler

Series supported by join.me

The Fontography Series is supported by join.me, the easiest way to have an online meeting. Named one of Time magazine’s best websites of 2011, join.me lets you share your screen so you can instantly get together, collaborate, demo, show off and more. Plus, it’s totally free. How will you use it? Check it out today.

More About: features, Fontography Series, fonts, mashable, Mashable Infographics

For more Dev & Design coverage:

The Fontography Series is supported by join.me, the easiest way to have an online meeting. join.me lets you instantly share your screen with anyone, for free. Use it to collaborate, demo, show off – the possibilities are endless. Try it today.

The rise of web fonts has given way to a broader understanding — and respect — for typography, typefaces and the way text is displayed online.

Typography is an essential part of visual design — and as any print publisher will tell you, the way that text is arranged and displayed can have an enormous impact on how its message is presented and interpreted.

Although typography entered the digital age long ago, it’s only been in the last few years that we’ve really seen advanced typography and typesetting take off online. This is, in large part, thanks to broad browser support for CSS3 and web font standards, the rise of web font services like Typekit (which was recently acquired by Adobe) and the increasing adoption of mobile devices like smartphones, tablets and ereaders.

The one downside of the proliferation of broader web typography is that there are more opportunities for bad typography to make its way online. Text that is presented in the wrong style or weight, line spacing and kerning that is difficult to read and other mistakes can lead to legibility and readability issues online.

Understanding some of the basics in typography can make crafting web content and using web fonts a better experience for everyone.

Typeface Types

Most of us have heard the terms “serif” or “sans serif” but what do they mean?

A serif typeface (or font) has strokes and other semi-structural details on the ends of letters. Fonts like Times New Roman and Baskerville are serif fonts. This is the font that most newspapers and magazines use. Georgia, one of the most popular fonts on the web, is a serif font.

A sans serif typeface doesn’t have the semi-structural details on the ends of the letterforms. Fonts like Helvetica, Arial and Gotham are serif fonts. Sans serif fonts are often more readable on smaller devices, which is why the default font on most mobile platforms is a sans serif font. Apple uses Helvetica Neue, Microsoft uses Segoe and Google recently created its own sans serif font for Android, Roboto.

A monospaced typeface is a typeface that is non-proportional. That means that the amount of horizontal space between letters and characters is uniform. On the web, monospaced fonts are most often used when presenting computer code examples. The use of a monospaced font, especially when interspersed with standard variable-width fonts, is a visual cue that the text is a computer or code-related action. Common monospaced fonts include Menlo, Consolas and Courier.

Script typefaces have fluid stroke designs and are aesthetically similar to handwriting. Script fonts that vary in formality and calligraphy styles, like the font Zapfino, also exist. These are most commonly used on the web for large headings and tend to perform poorly for blocks of text or in small sizes.

Kerning and Leading

Beyond just a typeface, good web typography also utilizes good kerning and leading.

Kerning is the process of adjusting the space between characters in proportional fonts. In other words, it’s how closely letters are to one another. Kerning is optimized by character pairs, whereas a technique known as tracking, adjusts the space evenly between characters.

Kerning is possible in web typography thanks to various JavaScript techniques like Lettering.js and Kern.js.

Leading is the distance between the baselines of lines of type, in other words, the space between each line in a paragraph of text.

Leading can drastically impact how type is read and presented. Too much leading, and type is unwieldy. Too little, and it can be hard to read.

Using CSS, line type can be adjusted for web fonts and standard web type.

Other Resources

To learn more about typography and how it is used on the web, you can check out our earlier post on web type resources.

Two great resources are Typedia and Typophile, which both have their own wikis with definitions and examples.

Image courtesy of iStockphoto, tazytaz

Series supported by join.me

The Fontography Series is supported by join.me, the easiest way to have an online meeting. Named one of Time magazine’s best websites of 2011, join.me lets you share your screen so you can instantly get together, collaborate, demo, show off, and more. Plus, it’s totally free. How will you use it? Check it out today.

Image courtesy of Wikimedia Commons

More About: features, Fontography Series, fonts, kerning, leading, mashable, typography

For more Dev & Design coverage:

1. Skullphabet by Skull-A-Day

Simple and bold, the “Skullphabet” font celebrates with great graphic ghoulishness.

Click here to view this gallery.

Halloween is nearly upon us. If you’re anything like the Mashable crew, you’ve already designed your perfect pumpkin, stockpiled mounds of candy for trick-or-treaters, planned an awesome costume and organized an appropriately ghoulish gathering.

Whether you’re sending out Halloween party invites, creating homemade Halloween cards or designing posters for an eerie event, you need a suitably spooky font.

SEE ALSO: Show Us Your Social Media and Tech Pumpkins [CONTEST]

We’ve found 13 fearsome fonts perfect for All Hallows Eve, and what’s more, they’re all free for personal use. Take a look through the gallery for our spook-tastic selection. Please share in the comments any other great, gruesome examples you’ve come across.

More About: design, features, fonts, gallery, Halloween, trending, typography

For more Dev & Design coverage:

The Web Development Series is supported by Rackspace, the better way to do hosting. Learn more about Rackspace’s hosting solutions here.

Over the last eighteen months, the world of web fonts and web typography has absolutely exploded. Modern browsers — on the desktop and on mobile devices — are embracing the WOFF standard, type foundries are adopting web type en masse, and libraries like Google Web Fonts are making it easier for designers and developers of all stripes to use web type in their projects.

The rise of web fonts has coincided with a greater cultural recognition of type in general. The hugely popular documentary Helvetica introduced a brand new audience to the power of type. For users who want to learn more about type and web fonts, the web is full of great resources that offer good examples of typography and explore the history and future of lettering and design.

Here are eight of our favorite sites to help you start or enhance your own education in type.

1. Fonts In Use

Fonts In Use is a beautiful site that, in its own words, aims to “catalog and examine real-world typography.”

A collaboration between Sam Berlow, Stephen Coles and Nick Sherman, the site offers insights and deep examinations of typography across various mediums.

This is a great site not just for typography fans, but also for those who want to learn more about what makes for effective typography and effective uses of type.

2. I Love Typography

First launched in 2007, I Love Typography is the brainchild of John Boardley. The blog now has a host of contributors who highlight great fonts and showcase beautiful type, while also offering the reader a basic education in typography.

Through the years ILT has remained accessible to newcomers and that’s why we like it. Be sure to check out Boardley’s next project, Codex Magazine, which launches soon.

3. Typographica

Typographica is a site that reviews typefaces and type books. It also offers commentary on fonts and various trends in typographic design.

The site isn’t updated on what we would call a “regular” basis, but the content within the site is timeless, making it a great place for type lovers to visit.

4. Typophile

Typophile is a typographic community that has been on the web for nearly a decade. The forums are a fantastic resource for great finds in the world of type, and they’re also a great way to get proper feedback from other type lovers and design professionals.

5. Typedia

Think of Typedia as the IMDb of typography — it’s a place where users can learn more about a typeface or font creator. Typedia also functions as a wiki, so anyone can join and add his own images, pages and information to the living, breathing typography tomb.

A must-subscribe-to section of the site is Type News, a weekly overview of the latest type news.

6. Webfonts.info

Webfonts.info is one of the best resources on the web for gathering information about web fonts and web font techniques.

Maintained by Ralf Hermann (whose own
blog is a must read for type lovers), the site manages to be comprehensive and up-to-date. It’s also a wiki, which means that others can add their own information and updates to the mix.

7. Nice Web Type

Tim Brown is the type manager at Typekit. He also is responsible for the fantastic font blog and resource, Nice Web Type.

The main Nice Web Type site offers a great collection of past notes and access to Brown’s blog, however, we encourage users to also visit the Nice Web Type Tumblr.

8. The FontFeed

The FontFeed is FontShop’s daily feed of typographic goodness. The site is chock-full of type recommendations, font news and great examples of digital type in the real world.

One of our favorite sections of the site is Type Tips, which highlights tips and tutorials, while also showcasing interviews with big names in the type world.

Series supported by Rackspace


The Web Development Series is supported by Rackspace, the better way to do hosting. No more worrying about web hosting uptime. No more spending your time, energy and resources trying to stay on top of things like patching, updating, monitoring, backing up data and the like. Learn why.

More Dev & Design Resources from Mashable:

Ruby on Rails: Scaling Your App for Rapid Growth
HOW TO: Transfer Your Blog From WordPress.com to WordPress.org [VIDEO]
A Beginner’s Guide to Integrated Development Environments
10 Chrome Web Apps to Check Out
10 Tools for Getting Web Design Feedback

More About: fontfeed, fonts, fonts in use, I love typography, nice web type, type, typedia, typekit, typographica, typography, typophile, web development series, web fonts, webfonts.info

For more Dev & Design coverage:

font image

Anders J. Svensson is a freelance writer, part-time adventurer, and the senior copywriter at Veer -– a provider of affordable images and fonts to creative professionals. On Twitter, find Anders at @mightyrival and Veer at @veerupdate.

It’s a text-based world. Everywhere you look, there’s a sign, an ad, or a screen relaying information. The hand-lettered signage at your mom-and-pop corner store aside, most of the messages you see are set in familiar fonts.

You’ll find plenty of tips and tricks on using type elsewhere –- and far more technical ones, at that –- but here are some select ideas and advice that will put you (and your online presence) on the path to becoming a font savant.

Know Your Fonts

If you’re wired and online, fonts first fall into three categories: The system fonts that came with your computer, the somewhat tacky fonts you can download at free sites, and the really nice fonts you might pay for if you are in the habit of paying for fonts.

Within each of those categories, fonts can be grouped on more aesthetic grounds. And though it won’t impress many crowds if you’re able to slip phrases like “French Ronde” or “Caslon-esque” into conversation, knowing fonts by their practical applications can help you choose the right ones for your projects.

  • Display fonts are big, beautiful and a bit unwieldy. Like a claymore sword, they look great hanging on the wall. Display fonts are destined for splashy ad headlines, website mastheads and anything requiring just a few words. If you set an entire document in a display font that has an old West, wood-cut, wanted poster aesthetic, your readers would probably gang up on you pretty fast.
  • Text fonts are your go-to fonts. Ones like Arial, Lucida, Georgia and pop culture darling Helvetica are all very readable at any size. This makes them ideal for setting long passages, articles, books and newspapers, where the design calls for multiple levels of headings and content.
  • Pixel fonts appear to be straight out of your favorite 8-bit arcade game. Their letters consist of tiny blocks or dots, making them ultra-readable at small sizes and low resolutions, which is perfect for mobile applications and tiny screens. They can also offer the convenience of being both readable and machine readable. Take that, bar codes!

Beyond the practical, fonts can be further classified by styles (script, stencil, weathered, etc.), decade, country, and even artistic movement (like Art Deco or Bauhaus). Of course, it isn’t all about good looks. Fonts fall into technical categories too.

Understand OpenType

letters image

If regular fonts are cars, OpenType fonts are time traveling DeLoreans. Car on the outside, remarkable effort and technology on the inside. So how do you take an OpenType font up to 88 mph? First, get up to speed on alternates.

Alternates are stylistic variations of characters that can be substituted for the default alphabet. While many fonts only offer a limited character set (26 letters, 10 numbers, and basic punctuation.), an OpenType font is more likely to have dozens, hundreds or even thousands of characters. Plus, advanced features that make automatic substitutions.

If you’re working with a script font, you might want to swap in characters that are ornamental or have repeated letters –- like a double-S –- replaced by a ligature (a character of two or more joined letters) that was specially made and therefore better looking. If you have enough variations of ‘I’ and ‘S’ for example, you could write a word like “Mississippi” with so many different characters, it would resemble custom hand-lettering.

As a general improvement over .ttf (TrueType format) files, OpenType fonts are a universal format; you can install an .otf file on both a Mac or PC, no problem. But just because you can install an OpenType font doesn’t mean you can make use of everything it offers. That depends largely on what design software you’re using the font in.

Imagine having the power to levitate chairs with your mind, but never using it. That’s akin to what you may be doing if you use an OpenType font in MS Word. Instead of the beautiful script you bought, you may see a mess of disjointed letters, because MS Word doesn’t support OpenType’s advanced features. In contrast, if you were using Adobe InDesign, the features would kick in and do some of the work for you.

Plus, you can always turn off autopilot and take control by picking and choosing alternates, ligatures and swashes yourself.

Discover the Glyph Palette

If you’re getting serious about working with fonts, discovering Adobe’s glyph palette is like finding a magical portal to Narnia in your wardrobe. Instead of talking fauns, you’ll find a useful, scrollable grid of every character in the font, which sometimes number in the thousands.

Overwhelming? No problem. A drop-down menu lets you filter the selection and view just ligatures, swash capitals, ornaments or number sets –- whatever the typeface designer has created and organized for you.

You can also select a letter or letters, and filter the glyph palette to display alternates for your selection. If the designer has included a half dozen different “E” variants, you can swap them in manually. Same goes for finding custom ligatures to replace “OO,” “LL,” “TH,” and the like. Some designers will go as far as including entire custom words designed as single glyphs.

Once you’ve spent some time exploring the glyph palette, you’ll know what to expect from future fonts.

Keep Learning, Keep Kerning

Typography is a lot like architecture. The surface aesthetics that everyone can enjoy are a result of an incredibly technical effort by its creators.

Though not all of us are cut out to hunker down and create a great font from scratch, using and power-using fonts is a very accessible creative arena, even for non-designers. You’ll know you’ve delved too deep when you interrupt dinner conversation to point out the ball terminals on the menu’s Bodoni-style serif.

More Design Resources from Mashable:

Top 5 Web Font Design Trends to Follow
The Future of Web Fonts
10 Beautiful Free Hand-Drawn Icon Sets
9 Free Resources for Learning Photoshop
20 Free Social Media Icon Sets For a More Shareable Website

More About: design, font, fonts, how to, opentype, typography, web fonts

For more Dev & Design coverage: