Fonts posts

A few weeks ago, we posted a nifty quiz to test your prowess at differentiating between Helvetica and Arial. If that typography challenge succeeded in whetting your whistle for font games, a new app design is ready to take you to the next level of typographic deduction.

Designed by Copenhagen-based designer Andreas Hansen, Font Nerd is currently only a concept of an app, designed to help users gamify their font experience.

Quizzes — in the form of entertaining sentences displayed in different fonts  — prompt players to guess the correct typeface; if you’re stumped, there’s the option to view the whole...

I had created some neat icons for a website redesign I was doing, and I previewed the new site on an old iPad. The layout looked OK at normal size, but zooming in to part of the page, I suddenly saw that my icon was a blurry mess, while the text-based header was still crisp and sharp. On a newer Retina-display iPad, the icons didn’t look quite sharp, even at normal size.

The first idea I had was to create double-sized sprite images, setting them to display at half their size using CSS. While this made them look better...

If there’s one thing every designer needs in their toolkit, it’s a workhorse font. A workhorse font is the typeface you turn to again and again; it’s your first stop; your default option. Your workhorse font is deeply entrenched in your personal style, it defines your portfolio even more than your client list.

Not too long ago designers were divided into two camps: those that tended to work online, and used Helvetica as their workhorse; and those that tended to work in print, and used FF Meta as their workhorse. The truth was that Helvetica (or Arial for the less discerning) was the best web-safe font available. FF Meta, was a beautifully designed sans-serif...

Is there anything better than a font named after the Spanish word for cockroach? Maybe a font named after that combined with the word “future”?

Futuracha is just that font. It’s a beautiful display font that’s great for things like logos or posters. Because of how stylized it is, it’s not suitable for body copy.

But that doesn’t mean it isn’t incredibly fabulous. The swooshes, exaggerated serifs, and irregular x-heights...

The internet, after you get past all the coding, is littered with different approaches to typography. There are a plethora of typefaces scattered all over the internet and searching for the right font can leave your head buzzing with all the options to choose from.

Admittedly the first thing I notice on a site other than the design is the font; unconsciously I ask myself does it work, can I read it without straining my eyes and do I like it? Of course, my preference doesn’t matter because it isn’t my site or design, but having a grade “A” typeface that the majority will find attractive is important and we all know that some fonts are a lot better than others.

Other than graphics, your typographic choices are one of the most essential aspects of your design, regardless of how much or how little...

We’re all familiar with the parable of the ugly duckling; spurned by its peers for being too ugly, it is miserable throughout the winter, only to discover in the following spring that it is in fact a swan.

The moral of the story being that it’s what’s on the inside that counts; or perhaps that you shouldn’t spurn nerds because they’ll go on to make billions in social networking; or perhaps if you stare at anything long enough it...

With the right fonts, we can do anything, and create anything.

Fonts help portray a mood or emotion. Your font choice can make or break your designs, so you must careful in choosing the right one. Typography matters not just because it looks good, but because what’s being said is extremely important.

Typography in web design is becoming huge. We can now embed and show all sorts of fonts on our websites that we probably weren’t able to a few years ago. Developments in CSS have created this wonderful thing called ‘@fontface’. It basically allows you to use many decorative fonts you wouldn’t be able to use online.

For those of you tired of the typical Arial or Georgia...

Icon fonts are incredibly useful when designing a site, and have a huge number of advantages over regular icons.

Because they are delivered as a font file and embedded like a font, these icons are easily scalable, their color can be altered live, rather than having to edit images; along with that, various effects can be added via coding, such as shadows, stroke effects, or gradients, making...

Choosing fonts for design projects can be a daunting task because there’s thousands of fonts out there all over the web that you could use.

Whether you’re looking to create a big, bold logo for your business or work on a poster for an event here’s a collection of inspiring fonts that are perfect for use whatever your project may be.

The collection covers a variety...

It’s not uncommon for a designer in today’s world to pay little attention to how type is laid out, especially with the ever-so-convenient default settings of heading tags and web safe fonts found universally on the web.

If we as interactive designers we’re able to take a little more time when it came to typography, than the results would show a unique, well thought of design as oppose to a “run of the mill” creation.

There is a good chance that the majority of designers and designs you...

In this article, I’m going to examine the science behind making successful UI icons before teaching you how to make your own embeddable icon font.

From designing the individual icons to converting them for @font-face embedding, and even licensing them for distribution, we shall be using only free software and online services. How about that? You will not need to rely on any of the esoteric knowledge required to make successful alphanumeric typefaces; just an eye for designing things that may appear very, very small.

Ultimately, you should go away with a process for making design elements that extends far beyond the manufacture of simple icons.

Before we...