RSS
 

Posts Tagged ‘typography’

Design Rhythmic Motion Typography in After Effects

07 Jul

Twice a month we revisit some of our reader’s favorite posts from back in the archives of Aetuts+. Today we’ll look at an amazing post from Markus Gustafsson. This was the first tutorial Markus did for Aetuts+ published back in January 2009 talking about typography… enjoy!


In this tutorial you’ll learn how to create animated typography synchronized with musical events (lyrics). You’ll learn how to fit your typography to a rhythm, add dynamic animations and use the camera and motion blur to create a high-end final effect. This tutorial showcases a technique that is highly sought after in motion graphics today.

We love to see what you do with the techniques taught at Aetuts+. We encourage you to create your own motion typography videos in this style and post a link to your video in the comments below. Most of all, we hope you enjoy the tut!


Tutorial

Download Tutorial .mp4

File size 65 MB

 
 

Conan O’Brien Kinetic Typography

15 Mar

Inspiration + Typography. Mmm. Message plus delivery. Content plus interface.

Posted via email from danielmiessler.com | posterous

 
 

Typographic world map and water colors

14 Mar

Typographic Map and Water Colors

Typographic maps are all the rage these days. Instead of drawing well-defined boundary lines, you substitute words or names, and the landscape shows up on its own. Nancy McCabe's maps, Charteis Graphein, are the latest addition to the genre. McCabe uses area names—oceans, countries, cities—for the letterpressed maps.

You can them in two varieties. The first is clean and simple, as shown below.

The second is a custom water-colored version (like up top). You can choose the colors if you like.

Grab a print for yourself on Etsy for $150 and $175, respectively.

[Design Ahoy]

 
 

Typography Deconstructed Poster

28 Feb

Ready to pump up your type vocab and sound smart next time you bump into Matthew Carter? Well then, this beauty of a poster designed by Drew Binkley at 38pages is just for you. They have a nifty site called typographydeconstructed.com with great typographic anatomy content. This poster is for sale there too – ready to release the inner type freak in all of us.  Get yours with promo code SOFMARCH2011 for good for $10 off all of March.

We letterpress printed this poster on our Heidelberg 21 x 28 cylinder. You can see in the photo details, the polymer plate is positioned in the press on a custom made full size 21 x 28 inch Boxcar Base. The poster is printed with extra tight register (no trapping) on 100% cotton Crane Lettra Fluorescent White 110lbC and trimmed to a final size of 16 x 24 inches.

_0000_Typography_poster_letterpress_drew_binkley _0001_Typography_poster_letterpress_title_detail _0002_Typography_poster_letterpress_comprehensive_guide _0003_Typography_poster_letterpress_anatomy_of_type _0004_Typography_poster_letterpress_detail4 _0005_Typography_poster_letterpress_detail3 _0006_Typography_poster_letterpress_detail2 _0007_Typography_poster_letterpress_detail1 _0008_Typography_poster_letterpress_credits _0009_Typography_poster_letterpress_boxcar_base_21x28 _0010_Typography_poster_letterpress_heidelberg_feed_pile _0011_Typography_poster_letterpress_heidelberg_delivery

del.icio.us StumbleUpon Technorati TwitThis Digg Tumblr Facebook

 
 

25 New Free High-Quality Fonts

17 Dec

Advertisement in 25 New Free High-Quality Fonts
 in 25 New Free High-Quality Fonts  in 25 New Free High-Quality Fonts  in 25 New Free High-Quality Fonts

Every now and then we look around, select fresh free high-quality fonts and present them to you in a brief overview. The choice is enormous, so the time you need to find them is usually time you should be investing in your projects. We search for them and find them so that you don’t have to.

In this selection, we’re pleased to present Pompadour Numeral Set, Lato, Crimson Text, Espinosa Nova, Musa Ornata, Spatha Sans, ColorLines, Roke1984, Neuton, Avro, Baurete and other fonts. Please note that some are for personal use only and are clearly marked as such. Please read the license agreements carefully before using the fonts; they may change from time to time.

New High-Quality Free Fonts

Pompadour Numeral Set (.eps, released under Creative Commons)
A beautiful numeral font released by Andy Mangold under a Creative Commons license. The font can be useful in various settings, for instance for packaging design or logo deign. The .EPS file is available for free download. The font is free to use as long as the credit is given.

Andy1 in 25 New Free High-Quality Fonts

Andy2 in 25 New Free High-Quality Fonts

Lato (open-source sans serif)
Lato is a san-serif typeface family. The semi-rounded details of the letters give Lato a warm feel, while the strong structure provides stability and seriousness. Lato consists of five weights (plus corresponding italics), including a beautiful hairline style. The first release includes only the Western character set. Designed by Lukasz Dziedzic.

Lato in 25 New Free High-Quality Fonts

Crimson Text
“Crimson Text is a font family for book production in the tradition of beautiful old-style typefaces. There are a lot of great free fonts around, but one kind is missing: those Garamond-inspired types with all the little niceties such as old-style figures, small caps, fleurons, math characters and the like. In fact, a lot of time is spent developing free knock-offs of ugly ‘standards’ like Times and Helvetica. Crimson Text is inspired by the fantastic work of people like Jan Tschichold, Robert Slimbach and Jonathan Hoefler. We hope that the free type community will one day be able to enjoy Crimson Text as a beautiful workhorse.”

Fonts-01 in 25 New Free High-Quality Fonts

Espinosa Nova: Regular (registration is required)
Espinosa Nova is a revival of the types used by Antonio de Espinosa, the most important Mexican printer of the 16th century and quite probably the first punch cutter anywhere on the American continent (1551). All of the fonts intended for setting text include small caps, five sets of figures (old-style and lining, both proportional and tabular, plus tabular small caps), many “f” and long “s” ligatures and a capital sharp “S” (U+1E9E). Designed by Cristóbal Henestrosa.

Espinosa in 25 New Free High-Quality Fonts

Letter-a in 25 New Free High-Quality Fonts

Color Lines
This decorative font can be used for a variety of products, such as posters, packaging and label design. Original and unique. Designed by Anton Gridz, and available in AI format.

Love in 25 New Free High-Quality Fonts

Love2 in 25 New Free High-Quality Fonts

Love3 in 25 New Free High-Quality Fonts

Baurete (free download)
A playful, intriguing typeface that could work for designs without rigid alignment or symmetrically positioned elements. Baurete is free to use for personal and commercial projects. If you want to use it, please contact the designers at [we {at} welab {dot} info]. You can download it for free.

Baurete1 in 25 New Free High-Quality Fonts

Baurete2 in 25 New Free High-Quality Fonts

Neuton Font
Neuton is a clean Times-Roman–like typeface by Brian Zick. In structure, it is a transitional type with Dutch inspiration. The x-height is high and the color dark, and it is economical in ascenders, descenders and width. Also available in the Google Font Directory.

Neutr1 in 25 New Free High-Quality Fonts

Neutr2 in 25 New Free High-Quality Fonts

Melbourne (personal use only)
Melbourne is a sans-serif with a strong modern presence. The designer’s intention was to create a calm space-saving typeface. The glyphs have rounded corners and relatively large tracking, which makes it a good fit for dictionaries, indexes, catalogues and so on. When used at a large size, Melbourne can be used as a display or headline font. The typeface is released as a draft, and suggestions for improvements are appreciated. Designed by Marco Müller.

Melbourne in 25 New Free High-Quality Fonts

Melb2 in 25 New Free High-Quality Fonts

ROKE1984
A free display font based on geometric forms and mathematical symbols, this one includes accents and numerals. An interesting option for technical designs that call for a distinctive yet slightly challenging appearance. Designed by Wete. Available in OpenType format.

Font in 25 New Free High-Quality Fonts

Geom1 in 25 New Free High-Quality Fonts

Geom2 in 25 New Free High-Quality Fonts

Classic Round: medium and italic (registration required)
This typeface was designed for text and display use. In small text sizes, the typeface looks clean, inviting and legible. When used in big display sizes, it looks playful and interesting. Designed by Ben Blom.

Fonts-a0 in 25 New Free High-Quality Fonts

Free Font FR Hopper: regular and italic (registration required)
FR Hopper is a sans based on geometric forms but still retaining a friendly personality. It is intended for mid-length texts, captions, titles and almost any other occasional use: posters, flyers and even websites. The typeface comes with 7 weights, 12 styles with 836 glyphs, and many advanced OT features such as small caps, discretionary ligatures, alternate characters, fractions, arrows and ornaments.

Hopper in 25 New Free High-Quality Fonts

Darth Vador Free Font
An original geometric font for the Darth Vador theme, designed by Juart Little from France.

Darth in 25 New Free High-Quality Fonts

Vador in 25 New Free High-Quality Fonts

League Script #1
“League Script #1 is a modern coquettish script font that sits somewhere between your high-school girlfriend’s love notes and handwritten letters from the ’20s. It includes ligatures and will serve as the framework for future script designs.” Designed by Haley Fiege and available in OpenType format.

League in 25 New Free High-Quality Fonts

Four Free Type
Free original and playful OpenType fonts available in two font weights, regular and italic. Supported languages are English and Russian only. Designed by Alexey Frolov.

Russian0 in 25 New Free High-Quality Fonts

Russian in 25 New Free High-Quality Fonts

Musa Ornata
This typeface, with its cheerful characters, could be a good fit for event announcements, grocery stores and public transport signage. To activate the alternative case, check the “Character Palette” in the OpenType options toolbar in your application. The download link is available at the bottom of the release post (above link). Designed by Carvente Dice.

Musa in 25 New Free High-Quality Fonts

Skyhook Mono: regular
This family is a carefully handcrafted monospaced typeface family that is modern, sturdy and minimalist, yet distinctive enough for refined and classy uses. The regular weight is available as a free download. The free weight may not be used in political or religious works.

Mono in 25 New Free High-Quality Fonts

Phoenica Std (personal use only, registration is required)
Phoenica offers an alternative to contemporary humanist sans serifs. It is a flexible family suitable for editorials and corporate branding. Phoenica comes in a big variety of weights, each available in both roman and italic. The regular width is available as a free download and for personal projects.

Phoenica in 25 New Free High-Quality Fonts

Indento: bold (registration required)
“Indento is a multi-purpose modern geometric slab serif for headlines, posters and branding, but legible enough to be used for longer text. The straight and rounded corners, combined with the deep cuts and asymmetric serifs, give it a distinctive look while still keeping its legibility.” The bold weight is available as a free download in OpenType format. Designed by Mugur Mihai.

Indento in 25 New Free High-Quality Fonts

Free Font Adec
This typeface was inspired by Art Deco and Constructivism. It would fit posters, magazines and logos. The distinguishing feature of this font is the combination of decorative elements, such as textures and frames. Designed by Serge Shi.

Adec-01 in 25 New Free High-Quality Fonts

Adec-02 in 25 New Free High-Quality Fonts

Jean-Luc (Godard) (via I Love Typography)
“Atelier Carvalho Bernau Design released Jean-Luc, a typeface inspired by the title cards of films like ‘Deux ou trois choses que je sais d’elle,’ to celebrate Jean-Luc Godard’s birthday. The style of lettering is so interesting to us because it is such a clear renunciation of the ‘pretty’ classical title screens that were common in that time’s more conservative films. It has a more vernacular and brutishly low-brow character; this lettering comes from the street.” To embed the font using @font-face, a copyright code must be appended as a comment in the source code.

Movies in 25 New Free High-Quality Fonts

Arvo Font Family
This slab-serif typeface was created by Anton Koovit especially for the Google Font directory. It is optimized for Web use. The typeface is “monolinear-ish” but has a touch of contrast. For Windows users, the smaller 9, 12, 14 and 16 point sizes are hinted in Truetype format.

Arvo in 25 New Free High-Quality Fonts

Thunderball
This heavy sans font with 178 characters could be useful for posters, postcards and similar designs. Released under a Creative Commons license.

Fontstruct in 25 New Free High-Quality Fonts

Spatha Sans
A sans-serif font with organic playful shapes that set a friendly tone and are easy to read. The font could be a good fit for titles and maybe short text. Designed by Carvente Dice.

Spatha-02 in 25 New Free High-Quality Fonts

Spatha Serif
As a counterpart to the above-mentioned Spatha Sans, the glyphs in Spatha Serif have classic proportions and short serifs, which retain the playful and organic design. The font can also be embedded using @font-face, but a credit link is required. Designed by Carvente Dice.

Serif in 25 New Free High-Quality Fonts

My Fair Cody
An interesting playful typeface that makes a an impression with its personality and warmth. The tone is inviting and informal, and as such might not be the best fit for a corporate context. Designed by Darim Kim, and available in OpenType format. You may use the font in your private and commercial projects; but if you embed it using @font-face, then a credit link is required.

Cody in 25 New Free High-Quality Fonts

Matchbook
Matchbook is a simple and functional set of two typefaces, designed in serif and sans-serif versions. Each set includes all accented characters and works beautifully in larger sizes.

Match1 in 25 New Free High-Quality Fonts

Match2 in 25 New Free High-Quality Fonts

Mota Pixel
Mota Pixel is a simple pixel font with simple roots. The regular weight was created as a custom design for TypeShow and is now available for free to the public. Optimized for use in 20-pixel increments, it is a larger than normal pixel design. Still, the regular is rather thin and delicate, expressing some tendencies of an upright italic.

Further Resources

  • Soma FontFriend
    FontFriend is a bookmarklet for typographically obsessed web designers. It enables rapid checking of fonts and font styles directly in the browser without editing code and refreshing pages, making it the ideal companion for creating CSS font stacks.
  • Cure for the Common Webfont: Alternatives to Georgia
    For nearly fifteen years, if you wanted to set a paragraph of web text in a serif typeface, the only truly readable option was Georgia. But now we’re starting to see some valid alternatives for the king of screen serifs. What follows is a list of serif typefaces that have been tuned for the screen.
  • How to Detect Font-Smoothing Using JavaScript
    Some fonts look bad on computer monitors without font-smoothing enabled in the operating system. The author of this article initially thought there wasn’t a way, but after seeing a promising but incomplete method of detecting font-smoothing, he spent a few days devising a way to do it.
  • When Free Fonts Aren’t Free
    To ensure that you’re using “free” fonts as their creators intended, here are four things to look for when you’re scanning a EULA.
  • iOS Fonts
    An overview of font families available on iOS devices such as iPhone and iPad.
  • Free Typography
    A blog dedicated to free fonts.
  • Caligraffiti
    A Brazilian blog that features freely available fonts.

Also, you may want to take a look at…

Last Click

Adfont Calendar 2010
Here is Fontdeck’s typographic Advent calendar. Open the current day’s door and behind it you’ll find details of a great typeface, with a Web font offer available free for that day only. To use the offer, click “Purchase font licenses” in your Fontdeck settings before the day is over. Free subscription applies to websites with < 1 million page views per month.

Tanger2 in 25 New Free High-Quality Fonts

(al)


© Vitaly Friedman for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: , ,

 
 

“What Font Should I Use?”: Five Principles for Choosing and Using Typefaces

14 Dec

Advertisement in What Font Should I Use?: Five Principles for Choosing and Using Typefaces
 in What Font Should I Use?: Five Principles for Choosing and Using Typefaces  in What Font Should I Use?: Five Principles for Choosing and Using Typefaces  in What Font Should I Use?: Five Principles for Choosing and Using Typefaces

For many beginners, the task of picking fonts is a mystifying process. There seem to be endless choices — from normal, conventional-looking fonts to novelty candy cane fonts and bunny fonts — with no way of understanding the options, only never-ending lists of categories and recommendations. Selecting the right typeface is a mixture of firm rules and loose intuition, and takes years of experience to develop a feeling for. Here are five guidelines for picking and using fonts that I’ve developed in the course of using and teaching typography.

1. Dress For The Occasion

Many of my beginning students go about picking a font as though they were searching for new music to listen to: they assess the personality of each face and look for something unique and distinctive that expresses their particular aesthetic taste, perspective and personal history. This approach is problematic, because it places too much importance on individuality.

3000679399 6167208211 in What Font Should I Use?: Five Principles for Choosing and Using Typefaces
The most appropriate analogy for picking type. (Photo credit: Samuuraijohnny. Used under Creative Commons license.)

For better or for worse, picking a typeface is more like getting dressed in the morning. Just as with clothing, there’s a distinction between typefaces that are expressive and stylish versus those that are useful and appropriate to many situations, and our job is to try to find the right balance for the occasion. While appropriateness isn’t a sexy concept, it’s the acid test that should guide our choice of font.

My “favorite” piece of clothing is probably an outlandish pair of 70s flare bellbottoms that I bought at a thrift store, but the reality is that these don’t make it out of my closet very often outside of Halloween. Every designer has a few favorite fonts like this — expressive personal favorites that we hold onto and wait for the perfect festive occasion to use. More often, I find myself putting on the same old pair of Levis morning after morning. It’s not that I like these better than my cherished flares, exactly… I just seem to wind up wearing them most of the time.

Every designer has a few workhorse typefaces that are like comfortable jeans: they go with everything, they seem to adapt to their surroundings and become more relaxed or more formal as the occasion calls for, and they just seem to come out of the closet day after day. Usually, these are faces that have a number of weights (Light, Regular, Bold, etc) and/or cuts (Italic, Condensed, etc). My particular safety blankets are: Myriad, Gotham, DIN,Akzidenz Grotesk and Interstate among the sans; Mercury, Electra and Perpetua among the serif faces.

Love-hate1 in What Font Should I Use?: Five Principles for Choosing and Using Typefaces
A large type family like Helvetica Neue can be used to express a range of voices and emotions. Versatile and comfortable to work with, these faces are like a favorite pair of jeans for designers.

2. Know Your Families: Grouping Fonts

Type-mash2 in What Font Should I Use?: Five Principles for Choosing and Using Typefaces

The clothing analogy gives us a good idea of what kind of closet we need to put together. The next challenge is to develop some kind of structure by which we can mentally categorize the different typefaces we run across.

Typefaces can be divided and subdivided into dozens of categories (Scotch Modern, anybody?), but we only really need to keep track of five groups to establish a working understanding of the majority of type being used in the present-day landscape.

The following list is not meant as a comprehensive classification of each and every category of type (there are plenty of great sites on the web that already tackle this, such as Typedia’s type classifications) but rather as a manageable shorthand overview of key groups. Let’s look at two major groups without serifs (serifs being the little feet at the ends of the letterforms), two with serifs, and one outlier (with big, boxey feet).

1. Geometric Sans

Geometric1 in What Font Should I Use?: Five Principles for Choosing and Using Typefaces

I’m actually combining three different groups here (Geometric, Realist and Grotesk), but there is enough in common between these groups that we can think of them as one entity for now. Geometric Sans-Serifs are those faces that are based on strict geometric forms. The individual letter forms of a Geometric Sans often have strokes that are all the same width and frequently evidence a kind of “less is more” minimalism in their design.

At their best, Geometric Sans are clear, objective, modern, universal; at their worst, cold, impersonal, boring. A classic Geometric Sans is like a beautifully designed airport: it’s impressive, modern and useful, but we have to think twice about whether or not we’d like to live there.

Examples of Geometric/Realist/Grotesk Sans: Helvetica, Univers, Futura, Avant Garde, Akzidenz Grotesk, Franklin Gothic, Gotham.

2. Humanist Sans

Humanist1 in What Font Should I Use?: Five Principles for Choosing and Using Typefaces

These are Sans faces that are derived from handwriting — as clean and modern as some of them may look, they still retain something inescapably human at their root. Compare the ‘t’ in the image above to the ‘t’ in ‘Geometric’ and note how much more detail and idiosyncrasy the Humanist ‘t’ has.

This is the essence of the Humanist Sans: whereas Geometric Sans are typically designed to be as simple as possible, the letter forms of a Humanist font generally have more detail, less consistency, and frequently involve thinner and thicker stoke weights — after all they come from our handwriting, which is something individuated. At their best, Humanist Sans manage to have it both ways: modern yet human, clear yet empathetic. At their worst, they seem wishy-washy and fake, the hand servants of corporate insincerity.

Examples of Humanist Sans: Gill Sans, Frutiger, Myriad, Optima, Verdana.

3. Old Style

Old-style1 in What Font Should I Use?: Five Principles for Choosing and Using Typefaces

Also referred to as ‘Venetian’, these are our oldest typefaces, the result of centuries of incremental development of our calligraphic forms. Old Style faces are marked by little contrast between thick and thin (as the technical restrictions of the time didn’t allow for it), and the curved letter forms tend to tilt to the left (just as calligraphy tilts). Old Style faces at their best are classic, traditional, readable and at their worst are… well, classic and traditional.

Examples of Old Style: Jenson, Bembo, Palatino, and — especially — Garamond, which was considered so perfect at the time of its creation that no one really tried much to improve on it for a century and a half.

4. Transitional and Modern

Trans1 in What Font Should I Use?: Five Principles for Choosing and Using Typefaces

Modern1 in What Font Should I Use?: Five Principles for Choosing and Using Typefaces

An outgrowth of Enlightenment thinking, Transitional (mid 18th Century) and Modern (late 18th century, not to be confused with mid 20th century modernism) typefaces emerged as type designers experimented with making their letterforms more geometric, sharp and virtuosic than the unassuming faces of the Old Style period. Transitional faces marked a modest advancement in this direction — although Baskerville, a quintessential Transitional typeface, appeared so sharp to onlookers that people believed it could hurt one’s vision to look at it.

In carving Modernist punches, type designers indulged in a kind of virtuosic demonstration of contrasting thick and thin strokes — much of the development was spurred by a competition between two rival designers who cut similar faces, Bodoni and Didot. At their best, transitional and modern faces seem strong, stylish, dynamic. At their worst, they seem neither here nor there — too conspicuous and baroque to be classic, too stodgy to be truly modern.

Examples of transitional typefaces: Times New Roman, Baskerville.
Examples of Modern serifs: Bodoni, Didot.

5. Slab Serifs

Slab1 in What Font Should I Use?: Five Principles for Choosing and Using Typefaces

Also known as ‘Egyptian’ (don’t ask), the Slab Serif is a wild card that has come strongly back into vogue in recent years. Slab Serifs usually have strokes like those of sans faces (that is, simple forms with relatively little contrast between thick and thin) but with solid, rectangular shoes stuck on the end. Slab Serifs are an outlier in the sense that they convey very specific — and yet often quite contradictory — associations: sometimes the thinker, sometimes the tough guy; sometimes the bully, sometimes the nerd; sometimes the urban sophisticate, sometimes the cowboy.

They can convey a sense of authority, in the case of heavy versions like Rockwell, but they can also be quite friendly, as in the recent favorite Archer. Many slab serifs seem to express an urban character (such as Rockwell, Courier and Lubalin), but when applied in a different context (especially Clarendon) they strongly recall the American Frontier and the kind of rural, vernacular signage that appears in photos from this period. Slab Serifs are hard to generalize about as a group, but their distinctive blocky serifs function something like a pair of horn-rimmed glasses: they add a distinctive wrinkle to anything, but can easily become overly conspicuous in the wrong surroundings.

Examples of Slab Serifs: Clarendon, Rockwell, Courier, Lubalin Graph, Archer.

3. Don’t Be a Wimp: The Principle of Decisive Contrast

So, now that we know our families and some classic examples of each, we need to decide how to mix and match and — most importantly — whether to mix and match at all. Most of the time, one typeface will do, especially if it’s one of our workhorses with many different weights that work together. If we reach a point where we want to add a second face to the mix, it’s always good to observe this simple rule: keep it exactly the same, or change it a lot — avoid wimpy, incremental variations.

This is a general principle of design, and its official name is correspondence and contrast. The best way to view this rule in action is to take all the random coins you collected in your last trip through Europe and dump them out on a table together. If you put two identical coins next to each other, they look good together because they match (correspondence). On the other hand, if we put a dime next to one of those big copper coins we picked up somewhere in Central Europe, this also looks interesting because of the contrast between the two — they look sufficiently different.

What doesn’t work so well is when put our dime next to a coin from another country that’s almost the same size and color but slightly different. This creates an uneasy visual relationship because it poses a question, even if we barely register it in on a conscious level — our mind asks the question of whether these two are the same or not, and that process of asking and wondering distracts us from simply viewing.

When we combine multiple typefaces on a design, we want them to coexist comfortably — we don’t want to distract the viewer with the question, are these the same or not? We can start by avoiding two different faces from within one of the five categories that we listed above all together — two geometric sans, say Franklin and Helvetica. While not exactly alike, these two are also not sufficiently different and therefore put our layout in that dreaded neither-here-nor-there place.

Wimpy3 in What Font Should I Use?: Five Principles for Choosing and Using Typefaces

If we are going to throw another font into the pot along with Helvetica, much better if we use something like Bembo, a classic Old Style face. Centuries apart in age and light years apart in terms of inspiration, Helvetica and Bembo have enough contrast to comfortably share a page:

Bump9 in What Font Should I Use?: Five Principles for Choosing and Using Typefaces

Unfortunately, it’s not as simple as just picking fonts that are very, very different — placing our candy cane font next to, say, Garamond or Caslon does not guarantee us typographic harmony. Often, as in the above example of Helvetica and Bembo, there’s no real explanation for why two faces complement each other — they just do.

But if we want some principle to guide our selection, it should be this: often, two typefaces work well together if they have one thing in common but are otherwise greatly different. This shared common aspect can be visual (similar x-height or stroke weight) or it can be chronological. Typefaces from the same period of time have a greater likelihood of working well together… and if they are by the same designer, all the better.

Gill2 in What Font Should I Use?: Five Principles for Choosing and Using Typefaces

4. A Little Can Go a Long Way

‘Enough with all these conventional-looking fonts and rules!’ you say. ‘I need something for my rave flyer! And my Thai restaurant menu! And my Christmas cards!’ What you’re pointing out here is that all the faces I’ve discussed so far are ‘body typefaces’, meaning you could conceivably set a whole menu or newspaper with any of them; in the clothing analogy presented in part one, these are our everyday Levis. What of our Halloween flares?

Periodically, there’s a need for a font that oozes with personality, whether that personality is warehouse party, Pad Thai or Santa Claus. And this need brings us into the vast wilderness of Display typefaces, which includes everything from Comic Sans to our candy-cane and bunny fonts. ‘Display’ is just another way of saying ‘do not exceed recommended dosage‘: applied sparingly to headlines, a display font can add a well-needed dash of flavor to a design, but it can quickly wear out its welcome if used too widely.

Time for another clothing analogy:

Gurtel in What Font Should I Use?: Five Principles for Choosing and Using Typefaces
(Photo credit: Betsssssy. Used under Creative Commons license.)

Betsey’s outfit works because the pink belts acts as an accent and is offset by the down-to-earthiness of blue jeans. But if we get carried away and slather Betsey entirely in pink, she might wind up looking something like this:

2241062332 6feb6c62b6-300x199 in What Font Should I Use?: Five Principles for Choosing and Using Typefaces
(Photo credit: Phillip Leroyer). Used under Creative Commons license.)

Let’s call this the Pink Belt Principle of Type: display faces with lots of personality are best used in small doses. If we apply our cool display type to every bit of text in our design, the aesthetic appeal of the type is quickly spent and — worse yet — our design becomes very hard to read. Let’s say we’re designing a menu for our favorite corner Thai place. Our client might want us to use a ‘typically’ Asian display face, like Sho:

Menu-0 in What Font Should I Use?: Five Principles for Choosing and Using Typefaces

So far, so good. But look what happens when we apply our prized font choice to the entire menu:

Menu-v1 in What Font Should I Use?: Five Principles for Choosing and Using Typefaces

Enough already. Let’s try replacing some of the rank-and-file text copy with something more neutral:

Menu-v21 in What Font Should I Use?: Five Principles for Choosing and Using Typefaces

That’s better. Now that we’ve reined in the usage of our star typeface, we’ve allowed it to shine again.

5. Rule Number Five Is ‘There Are No Rules’

Really. Look hard enough and you will find a dazzling-looking menu set entirely in a hard-to-read display font. Or of two different Geometric Sans faces living happily together on a page (in fact, just this week I wound up trying this on a project and was surprised to find that it hit the spot). There are only conventions, no ironclad rules about how to use type, just as there are no rules about how we should dress in the morning. It’s worth trying everything just to see what happens — even wearing your Halloween flares to your court date.

In Conclusion

Hopefully, these five principles will have given you some guidelines for how to select, apply and mix type — and, indeed, whether to mix it at all. In the end, picking typefaces requires a combination of understanding and intuition, and — as with any skill — demands practice. With all the different fonts we have access to nowadays, it’s easy to forget that there’s nothing like a classic typeface used well by somebody who knows how to use it.

Some of the best type advice I ever received came early on from my first typography teacher: pick one typeface you like and use it over and over for months to the exclusion of all others. While this kind of exercise can feel constraining at times, it can also serve as a useful reminder that the quantity of available choices in the internet age is no substitute for quality.

Other Resources

You may be interested in the following articles and related resources:

(ik) (vf)


© Dan Mayer for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: ,

 
 

Font Discovery Services for Designers

13 Dec

As web and graphic designers, fonts play an increasingly bigger role in our work. Sometimes, a client gives us a logo that’s really just a 200 pixel wide jpeg image rather than a true vector based logo. The task of figuring out what font is used in that logo used to be tricky, if not impossible.

Thankfully, the surge of web based design tools benefits this situation, and there are a few font discovery services available online that can save hours of work looking for a specific font.

First, let’s talk about how these sites work. Usually a file of with your font is uploaded (or linked via a url) to the site, then scanned to find glyphs that match a font. This only works with letters with spacing, so sometimes a bit of Photoshop work needs to be done to separate letters that have been kerned and tracked very closely together.

Once your image is uploaded, a list of the closest fonts is given, usually with links to either download or purchase the font.

For the What the Font service from MyFonts, the first step is to upload or link an image. Then comes the character selection screen, where your image shows up split into as many characters as the site can see, with a text box beneath.

If it’s an easy one, What the Font will have these character boxes filled in with the correct letters, although the user is supposed to make sure the text box is the character highlighted in the image before going to the last step.

Character boxes are supposed to be left blank if no valid character is highlighted from your font, so that the system doesn’t pick up the wrong font. Testing a few logos on here, What the Font did a good job of finding the correct font, but only with separation.

In my experience the system works about half the time, of course this is totally dependent on your file, but What the Font did miss some widely used (and well spaced) fonts from some of the samples I tried. What the Font does have an iPhone app available, where users can bring font discovery with them on the road.

The WhatFontIs service is very similar to What the Font in the way it works, but they’ve added one little touch that seems to help a lot: the ability to select if an image is on a dark background where the image is inverted prior to processing.

This lets darker images and logos be used. One of the best things about WhatFontIs is that on the results page the font matches are shown with the characters selected, creating the word you were looking for in a list of possible font matches. This is very similar to the way well known free font directory DaFont allows most fonts to be previews with a word or phrase.

The service itself seemed to perform at the same level as What the Font, but interestingly enough the results on some of my test images returned a completely different lists of font matches. There’s also a selection to look for just free fonts, commercial fonts, or both.

These two font discovery tools are very useful for web and graphic designers that need to quickly and efficiently find a specific font for a project. What has your experience been with font discovery services?

 
 

Design Inspiration: Text Art Showcase

02 Dec

Typography is a major aspect of web and graphic design. With text art, typography and text effects can be used in unique, creative ways to design. In this post we’ll showcase some beautiful examples of text art. If you see something you like, click on the image and you will be led to the source.

Australia Post Ad

Australia Post Ad

Jimi Hendrix

Jimi Hendrix

Cover Girl

Cover Girl

Typographic World Map

Typographic World Map

Freedom

Freedom

Valdez

Valdez

Am I Your Type

Am I Your Type

Coca Cola

Coca Cola

Self Portrait

Self Portrait

Tribute to the Dalai Lama

Tribute to the Dalai Lama

Kurt Cobain

Kurt Cobain

A Man of His Word

A Man of His Word

B.A.

B.A.

Burdened

Burdened

Amnesty International Ad

Amnesty International Ad

McDonald’s

McDonald's

Lil Wayne

Lil Wayne

Typographic Self Portrait

Typographic Self Portrait

John Lennon

John Lennon

With Great Humility

With Great Humility

Safety

Safety

Muhammad Ali

Muhammad Ali

Working Class Hero

Working Class Hero

Type Face

Type Face

Emotional

Emotional

For more design inspiration please see:

 
 

A Look into Experimental Typography

15 Nov

To succeed as a graphic designer, you must be willing to take risks. This is a cutthroat industry where only the most creative survive. As such, the sooner you begin experimenting with your design elements and following your creative instincts, the more likely you will be to build up a solid client base.
One of the best ways to improve your work is by experimenting with your typography usage. In fact, in most design work, typography is the main attention grabber with the other design elements supporting that typography. The following are four ways you can begin experimenting with typography usage to improve your designs.

1. Go BIG or go Home

454606506_56e3a51a93_o4708477715_c1aabbfb9d_z

4964431571_d329d46eed_z

If you want your message to grab your audience’s attention and slap them in the face, then big is the way to go. Big, bold and thick typography attracts attention and demands to be heard. However, when experimenting with this typography trend, you must be strategic in the use of big lettering. Sometimes, using large typography creates an unintended interpretation and can even offend audience members. Therefore, test out this experimental usage on friends and colleagues before introducing the design to the general public.

2. Play with Emotions

259149357_5a9d0332dc_z2507264617_b2c9f04dda_z4306781399_7dd413c4d4_z

Colors can stir various emotions within the human mind. As such, a great way to experiment with your typography usage is to incorporate rich, vibrant colors that speak specifically to the emotions you want to call out in your audience members. Red is punchy, loud, and can stir up feelings of anger and lust, while blue is more soothing and calm and can play to the audience’s caring side. To be most effective with your use of experimental color, use it strategically and sparingly. Few things are worse than a color explosion that sends the senses of your audience members into overload.

3. Using Textures

The word no made from jigsaw puzzle pieces4121082019_6f5e072058_z

2229551316_0be3043c77_o

People enjoy viewing designs with interactive elements. While using this interactive element in print design can sometimes be difficult, one option is to incorporate textures into your typography usage. This textural effect can either be authentic, such as by using grainy paper, or it can be simulated by using a design program to create the effect of texture.

4. Improve on the Past

113569013_faed4e79cd_z

The history of graphic design holds many examples of the risks taken by early graphic designers. By looking to the past, you may discover ways to take those old- school trends and place a modern spin on them. Sometimes a mixture of the old and new is just what is needed to start a typography revolution. At the very least, these early designs can rev up your creative side.

The more you experiment with typography usage, the increasingly interesting methods you will find to draw in audience members and portray your intended message. You have chosen a career field that requires immense creativity and the willingness to take risks. Therefore, don’t be afraid to try new things. While using experimental designs poses certain risks, it also provides the chance to set your work apart from the design crowd and become a trend setter.
Sonia Mansfield is the content editor for PsPrint and editor of PsPrint Blog. PsPrint is an online printing solutions company, which you can follow on Twitter and Facebook.

Sponsored by

Made By Tinder

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)



A Look into Experimental Typography

 
 

Useful Collection of Cheat-Sheet Desktop Wallpaper for Web Designers

07 Oct

Typical cheatsheets tend to be over-sized documents, far too large to be viewed in its entirety on a desktop and not too handy for the super-fast reference that is needed. To get the full benefit of any cheatsheat, your only real option is to print it out and keep it close at hand. Wouldn’t it be nice if there was an easier way, a quicker way. Of course there is – what good be handier than having a cheatsheet set as your desktop wallpaper? Always there for quick reference, no need to print it out and no need to scroll through an over-long document.

In this post we have rounded up a selection of cheatsheet wallpapers, in various sizes, covering various technologies, like CSS, HTML5, WordPress, Javascript and many more.

WordPress Help Sheet Wallpaper

WordPress Help Sheet Wallpaper
The WordPress Help Sheet Wallpaper is a simple desktop wallpaper listing Basic Template Files, PHP Snippets for the Header, PHP Snippets for the Templates, Extra Stuff for WordPress, based on the WPCandy WordPress Help Sheet.
Download: 2560x1600px.

Drupal Cheat Sheet Desktop Wallpaper

Drupal Cheat Sheet Desktop Wallpaper
The Drupal Cheat Sheet Desktop Wallpaper is a desktop wallpaper that features the most popular variables of the open source content management system Drupal.
Download: 1024x768px – 1280x800px – 1440x900px – 1680x1050px – 1920x1200px.

HTML5 Canvas Cheat Sheet

HTML5 Canvas Cheat Sheet
The information on this wallpaper is pretty much just a copy of what is found in the WHATWG specs, just condensed and a little bit easier to read. There are virtually no explanations, and no examples other than some graphics for compositing values. It's basically just a listing of the attributes and methods of the canvas element and the 2d drawing context.
Download: 1388x1027px.

CSS Cheat Sheet Wallpaper in Helvetica

CSS Cheat Sheet Wallpaper in Helvetica
This is the very popular CSS cheat sheet in Helvetica from styl.eti.me. Simplistic in appearance, but very useful for quick referencing. Unfortunately we can not find a working download link for this cool wallpaper, but the good news is they do have a PSD version available. So download it and resize.
Download: CSS Cheat Sheet Wallpaper in Helvetica.

TextMate Shortcuts Wallpaper

TextMate Shortcuts Wallpaper
Here is a TextMate wallpaper that will guide you through some of its powerful features and help you get a handle on all of the keyboard shortcuts. The PSD file is also available.
Download: 1280x800px – 1920x1200px.

Yahoo! UI (YUI) Cheat Sheets as Wallpaper

Yahoo! UI (YUI) Cheat Sheets as Wallpaper
Yahoo! provides a number of cheat sheets for their YUI library widgets however these are all in PDF format and not usable as wallpaper. However, here you will find all of those cheatsheets converted to PNG images of various sizes all for your desktop.
There are wallpapers available for Animation, Calendar, Connection Manager, Dom Collection, Drag & Drop Event, Utility & Custom Event Logger, Slider and TreeView. And all are available in the following desktop sizes: 1400x1050px, 1280x960px, 1165x900px and 1024x768px.
Download: Yahoo! UI (YUI) Cheat Sheets as Wallpaper.

jQuery 1.3 Cheat Sheet Wallpaper

jQuery 1.3 Cheat Sheet Wallpaper
Download: 1440x900px – 1680x1050px – 1920x1200px.

Prototype Dissected Wallpaper

Prototype Dissected Wallpaper
If you need a little help in getting to know Prototype a little better and some help in understanding how the code works, then this is the wallpaper for you. You have a choice of either a dark or white wallpaper, and are available in these sizes: 1280x960px and 1440x900px.
Download: 1280x960px (Dark) – 1440x900px (Dark) – 1280x960px (White) – 1440x900px (White).

Git Cheat Sheet Wallpaper

Git Cheat Sheet Wallpaper
Download: 1100x850px – 3300x2550px.

A Themer's Cheatsheet Wallpaper

A Themer's Cheatsheet Wallpaper
A Themer's Cheatsheet Wallpaper is a quick refresher of web design fundamentals directly on your desktop. It is available for download in several different colors and the original SVG has been released to the Public Domain.
Download: 1280x800px (Blue) – 1280x800px (Red) – 1280x800px (Black) – 1280x800px (Green).

Font Anatomy Wallpaper

Font Anatomy Wallpaper
Download: 1920x1200px.

SEO Wallpapers

SEO Wallpapers
Think of it as a desk reference checklist that is always at your fingertips. From pre-campaign to reporting, the basics (and more) are right here for you to put directly on your desktop.
Download: 1024x768px – 1280x960px – 1280x1024px – 1440x900px.

Periodic Table of Typefaces

Periodic Table of Typefaces
Download: 1024x768px – 1280x800px – 1280x1024px – 1440x900px – 1680x1050px – 1920x1200px.

Color Theory Quick Reference Poster

Color Theory Quick Reference Poster
The Color Theory Quick Reference Poster for Designers has all of the basics of color theory contained in one place – specifically, a cool infographic-esque poster. This way, you can quickly reference things that may have slipped to the back of your mind since design school.
Download: 1280x800px – 1440x900px – 1680x1050px – 1920x1200px.

Web Designer Wallpaper

Web Designer Wallpaper
Download: 1280x1024px (White) – 1280x1024px (Dark) – 1680x10050px (Dark) – 1280x1024px (White).

You might also like…

14 Essential WordPress Development and Design Cheat Sheets »
17 Productive Photoshop Cheatsheets and Reference Cards to Download for Free »
The Best Cheat Sheets for Web Designers and Developers (From CSS, Ajax, Perl, Vbscript…) »
CSS References, Tutorials, Cheat Sheets, Conversion Tables and Short Codes »
20 CSS3 Tutorials and Techniques for Creating Buttons »
50 Useful Tools and Generators for Easy CSS Development »
50 Essential Web Typography Tutorials, Tips, Guides and Best Practices »
The Blueprint CSS Framework – Tutorials, How-to Guides and Tools »