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:


1. Tramp – Lowell Fulson

Beautifully paced, and with some great graphic elements, our only complaint with this video is that it’s not longer.

Click here to view this gallery.

If you’re a music lover and a font fan, then a kinetic typography video beats the more traditional genres hands-down. While you’ve no doubt seen a few famous examples, we’ve gathered up some lesser-watched creations for your viewing pleasure.

Although varied in style, these videos all use kinetic typography, or “moving text,” to illustrate the lyrics of a song. We’ve been impressed with how creative people can get with such a simple concept.

SEE ALSO: 10 Stories Beautifully Told with Animated Typography

Take a look through our selection in the slide show. We know there are dozens more great examples in existence, so link us in the comments to any of your favorites we’ve not included.

More About: animation, dev and design, kinetic typography, music videos, typography, videos, YouTube

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.

Creating a font is no small undertaking. In fact, it is possibly one of the most complex design tasks out there. Careful attention must be paid to detail and consistency at all times and often hundreds, even thousands of characters (glyphs) must be created. While there are a variety of tools out there to manage and simplify this process, there’s no doubt that font design is a serious business.

But what happens when you want to use that font on the web?

Typography for the web has come a long way in recent years. Not so long ago, displaying a custom font on your webpage meant using an image, a Flash component like sIFR, or simply crossing your fingers and hoping that the user would have the font installed on his system. However, with all modern browsers now supporting the @font-face CSS property and JavaScript tools such as kerning.js (giving designers greater flexibility for displaying type), the days of limited typography on the web are quickly being relegated to the history books.

SEE ALSO: 7 Free Tools for Creating Your Own Fonts

Tools such as Font Squirrel’s @font-face Generator give you limited, but often serviceable automated conversion of user-supplied fonts. Font foundries are making more and more typefaces available for the web all the time, through services like Type Kit, Fonts.com, or their own retail solutions.

However, for those fontographers looking to build their own web fonts, or who want more refinement than automated converters offer, a more detailed approach may be in order. We’ve outlined a few important considerations for web fonts below.


Font Formats


For starters, to achieve as much browser compatibility as possible, you’ll need to convert your font to at least four formats; the original TrueType (or OpenType) format, the Embedded Open Type format, the Open Web Font Format and a Scalable Vector Graphic format.

Many font creation tools support these formats natively, or allow you to export to them, but if yours doesn’t, you can still use online conversion tools like the @font-face generator, and then open each format individually and clean it up as needed. While this can present its own set of problems, it does allow for some additional control over the look of the finished product.


Unicode Character Support


The web often creates completely different use cases than print, so you may need to extend your font’s glyph library in order to support more unicode characters. If you’re designing your font for general purpose use and widespread distribution, this can sometimes mean adding hundreds or even thousands of new glyphs.


Your Kerning Data Will be Lost



Any data your font contains with regard to character kerning will be lost (or ignored by the browser) once your font is converted to web formats. This means all those hours you spent carefully calculating many of your font metrics will no longer be of use. To compensate, you may have to modify existing glyphs to ensure proper scaling and spacing, and you may need to create or remove ligature glyphs.


Font Outlining


If you’ve created your font with PostScript outlines (which many fonts use), you may find that you need to convert your font outlines to TrueType, in order to achieve more precise and clean font rendering, particularly at smaller sizes. Since fonts are created in a vector format, converting those vectors from PostScript to TrueType may mean adding additional nodes to a glyph’s outline, or that some control data is lost. Many times, this may mean that your font requires a round of manual clean-up to remove superfluous nodes on your glyph, or to refine the outlines, as they may have changed subtly during conversion. Poor outline conversion can mean jagged fonts and larger file size.


Keep It Small


Since you’ll be serving up a number of font formats over sometimes-slow internet connections, you should do everything in your power to keep the font’s file size down to a respectable value. There are a number of ways you can optimize your font for a small footprint. For example, take the time to manually delete font metrics that don’t convert from the original TrueType (or OpenType) format, keep font outlines as simple and efficiently drawn as possible, use TrueType components to build accented characters from non-accented glyphs and try to keep meta data to a minimum.

These are just some of the many considerations to take into account when converting a font for wide-spread use on the web. However, as you can see, while many auto-conversion utilities and generators can simplify the process for specific use-cases, optimizing a font for full web support is no small task. Fortunately, many font foundries are now jumping on the bandwagon.


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: contributor, features, Fontography Series, mashable, text generators, typography, web fonts

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.

Only in the past few years has typography for the web really come into its own. Many web designers lack the specific training and years of focus on typography as in other disciplines, like print publishing. But, that doesn’t mean that an attractive, web-safe font is out of reach.

Here, we outline four tips for choosing the typography that will best convey your message in an easy-to-read manner on your website.


1. Readability


The first and foremost aspect to keep in mind when choosing the perfect font should be readability. Aesthetics are completely useless if the content is illegible. Many designers balk at the idea of using browser defaults when it comes to font rendering — and this is certainly understandable — but there’s one important takeaway from those defaults: They’re easy to read.

When choosing a font for the copy on your site, simple is better. Keep things clean and don’t develop an over-complicated type. You can get more creative later with things like headlines and pull-quotes, but your body copy should always be clear and easy to read at around 13px. A medium-weight font that is either a simple serif or sans-serif font usually works well here.

Keep contrast high when styling the font of your choice, and don’t over-use font sizes below 13px. It’s also generally not a good idea to reduce line height below the default setting (though it can often improve readability when you increase it a little). Unless you’re after a very specific look, it’s generally considered bad form to have more than three different font families on the same page.


2. Mood and Message


Your font can say as much about your site as any image on the page. Like other page elements, fonts portray mood and emotion, just like color scheme and graphics do. Heavy fonts convey strength, lightweight fonts give an air of openness and space, decorative fonts add whimsy. Coupled with scale and color choices, these can be powerful tools when conveying feelings and attitudes to your reader.

For instance, bold headlines feel very loud and confident. When you come across a large, bold headline, it’s impossible not to avoid: It grabs you. Conversely, a headline written in a lighter font is more unobtrusive and conveys its message without getting in your face to do so. Open fonts feel more free and often convey more movement.

Along with not having too many fonts on your page, you should also avoid too many differing font weights. Pick a style that works well in conjunction with the rest of your design and stick with it, making occasional use of contrasting style to highlight specific elements that the reader should pay special attention to, like headlines or captions.


3. Font Metrics


Let’s get technical for a moment and talk about font specifics. When working in a print medium, designers have a lot flexibility with regard to font metrics. That is, they can easily control the size of specific elements, the spacing between them, and the way that letters interact with one another. When it comes to the web, that level of control simply doesn’t exist, so it’s important to choose a quality font to begin with.

This is where we have to inject a word of caution about many free fonts. Designing a font is hard, detailed work, and a lot of amateur font designers simply lack the experience to pull off great font metrics. Free fonts often suffer from poor kerning (the spacing between font glyphs), inconsistent x-heights and cap heights (the heights of the middle and top of the font glyph) and so on.

Not all free fonts are bad, of course, but when choosing a typeface, it’s important to look at the font as a whole and not base your decision on a few sample words. Create some paragraphs of text and pay close attention to the way the letters flow into one another and measure up against each other. The specifics here can get really technical and complex, but in a nutshell, you’re looking for consistency in rendering between glyphs, readable letter spacing and a comfortable line height.

If you require a little more control for your fonts, check out Kerning.JS, but keep in mind that users without JavaScript enabled or browsers that don’t support Kerning.JS’s features will see the font you’ve chosen in its unaltered state.


4. Cross-Browser and Cross-Device Issues


Finally, it’s important to remember that not everyone accesses the web in the same way. There are dozens of combinations of device hardware, operating systems and screen resolutions, and each operating system and browser will render fonts differently, even if that difference is at an extremely subtle, sub-pixel level. This is another reason — perhaps the biggest reason, in fact — why it’s important not to overcomplicate your typography.

Much like it is often impossible to achieve pixel-for-pixel rendering of other layout elements across operating systems and browsers, the same is true for text on the page. Good web typography means knowing when to be flexible. That might mean choosing a different font for 480px mobile, for instance, or adjusting font size and contrast for small screen displays. Be adaptive.


Fonts can greatly affect the aesthetics of your site and can convey a lot of meaning in their visual appearance, but remember, when it comes to a choice between looking good and being easy to read, always go for easy to read.

Do you have tips for choosing a font? What font do you use on your website?


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: contributor, features, Fontography Series, mashable, typography, web fonts

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. Beautiful Type

Curated by two web designers with a passion for the topic, as well as examples of great type, this blog offers some really interesting typography-themed videos.

Click here to view this gallery.

Tumblr is a great source of inspiration, as well as a destination for expression and entertainment. We have found 10 Tumblr blogs that showcase terrific typography which we think are are well worth font-fanciers following.

SEE ALSO: 10 Entertaining Tumblr Blogs About Your Parents | 10 Delicious Tumblr Blogs Serving Up Food Fun [PICS]

Take a look through the gallery for a sample image from each blog. Let us know in the comments which Tumblrs you follow for design inspiration.

More About: features, gallery, tumblr, 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.

When you think of web typography, CSS instantly comes to mind. And that’s great, because CSS is the primary option when dealing with the style/visual layer of your website.

However, when you hit a roadblock with CSS, take it up a level by using JavaScript (JS).

Open source JavaScript libraries can help you craft responsive web designs (a technique that optimizes webpage layouts for mobile devices), implement fun text effects and more. In this post, we will primarily focus on JavaScript libraries that use modern web typography techniques to underscore and promote current web design best practices.

1. Kerning.js

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.

Image courtesy of iStockphoto, Punkle

More About: design, dev, features, javascript, typography, web development series

For more Dev & Design coverage: