16 Pixels: For Body Copy. Anything Less Is A Costly Mistake - Smashing Magazine

A useful introduction to an advanced way to use text in menus and other website GUIs

  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 FontsPompadour 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.

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.

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.”

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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

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.

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.

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 ResourcesSoma FontFriendFontFriend 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 refreshin[…]

  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 OccasionMany 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.
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.
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
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
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
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
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

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
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 ContrastSo, 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 di[…]