Skip navigation
Help

fonts

warning: Creating default object from empty value in /var/www/vhosts/sayforward.com/subdomains/recorder/httpdocs/modules/taxonomy/taxonomy.pages.inc on line 33.
Original author: 
Joseph Alessio

  

In the first installment of this two-part series on type classification, we covered the basics of type classification — the various methods people have used, why they are helpful, and a brief survey of type history, classifying and identifying typefaces along the way. Unfortunately, we only got as far as Roman (traditional serif) typefaces and the early-19th century. Now we’re back for part 2!

Part 2 will primarily cover sans typefaces, with a nod to display typefaces and other less common categories, as well as address a few of the questions people have about whether type classification is helpful and necessary.

If you haven’t read part 1, now’s your chance to go over it. It lays important groundwork for this article, covers the categories of serif typefaces, and contains plenty of useful information about the development of serif type. If you already have read it, here is a quick recap to get us started before we move on to the new material.

type classification

Review

Type Classification Systems

Type has been classified in many ways over the years, both formal and informal — Thibaudeau, Vox, British Standards, etc. None of these are complete or all-encompassing, but they’re helpful as an aid to study as well as for learning to use type correctly and effectively. The material in this two-part series draws heavily from the Vox-ATypI system, which is the most “official” of the systems today, having been adopted by the Association Typographique Internationale in 1962 and still the most commonly referenced system.

Is it perfect? No, but it provides a good overview of what is out there; and when you describe typefaces using the terms you’ll learn in this series, anyone who is reasonably familiar with typography will know what you’re talking about.

Here is a quick overview of the type categories we covered in part 1.

Humanist/Venetian

Venetian Typeface Characteristics

  • Notable calligraphic influence, patterned after handwriting.
  • Strongly angled axis or stress.
  • Based on typefaces designed in Renaissance cultural hubs such as Venice.

Garalde

Oldstyle Typeface Characteristics

  • Less calligraphic influence because type began to be viewed as separate from writing.
  • Named after influential type designers Claude Garamont and Aldus Manutius.
  • Still has a tilted axis but less obvious than in Humanist type.

Transitional/Neoclassical

Transitional Characteristics

  • No calligraphic influence. Designed independently, sometimes on a grid.
  • First appeared in the late-17th century.
  • Virtually vertical axis and high contrast between heavy and thin strokes.

Didone

Didone Characteristics

  • Extreme contrast between thick and thin. Rigidly vertical axis.
  • Abrupt, or unbracketed, serifs. Very precisely designed.
  • Named after Firmin Didot and Giambattista Bodoni.

Slab Serif

Slab Serif Characteristics

  • Very heavy weight and low contrast between thick and thin.
  • Unbracketed, prominent serifs.
  • First typefaces created expressly for display purposes.

Sans Serifs

When we left off in part 1, it was circa 1815, with the first appearances of slab serifs, also called Mechanistics or Egyptiennes. By the time slab serifs were being popularized, early sans serifs had already been around for some time in a variety of forms. To follow the progression of sans serifs, we must step back in time a number of years.

History of Sans Serifs

The earliest sans-serif letterforms were, of course, not type, but inscriptions, dating back to as early as the 5th century BC, and enjoyed a resurgence in engraving and inscriptions in the 18th century.

etruscan type
Caslon’s Etruscan type, as seen in a 1766 specimen book. Larger view. (Image source: Typefoundry)

Strangely enough, the first “sans serif” type was created not for the Latin alphabet, but for use in 18th-century academic works on Etruscan culture, which preceded the Roman Empire in the geographical area of modern-day Italy. Circa 1748, the foundry of William Caslon (with whom you should be familiar) cut the first known sans-serif Etruscan type for the Oxford University Press, although there are earlier usages of sans serifs in similar applications.

Embossed Type
Haüy’s type, created to emboss pages so as to be read by touch, was oddly ornate for its purpose. Larger view. (Image source: Camille Sourget)

Another interesting typographic innovation was the work of Valentin Haüy, who founded a school for blind children in 1785. In 1784, a year of preparation during which he devoted himself to educating a single student, Haüy developed an embossing typeface with which to make tactile books. The typeface, which, along with his method, is called the Haüy System, is an early form of sans serif, but it reads more like an upright italic or a disconnected script.

It was first embossed and then often carefully inked over the top so that it could also be read visually, as in the photo above. It looks lovely, but was superseded in both practicality and readability by the system devised by Louis Braille, himself a student at the school Haüy founded.

Caslon Sans
William Caslon IV’s sans serif was categorized as “Two Lines English Egyptian,”. (Image source: typophile)

William Caslon IV — who inherited the type foundry, as well as his name, from four generations back — is credited with the first sans-serif printing type for the Latin alphabet, appearing first in the 1816 Caslon specimen book. It featured only capitals and was marketed as “Two Lines English Egyptian,” the “Two Lines” being a reference to the size of the set type. There was much confusion over this new style, being variously called Egyptian (despite early slab serifs also being marketed as Egyptians), Gothic, Grotesque and Antique, among others.

Figgins Sans Serif
A sans from an early Vincent Figgins type specimen. Larger view. (Image source: Typefoundry)

Eventually Vincent Figgins (whom you may remember as being credited with the first slab-serif type) called the new style “sans serif,” which became the widely accepted term, although you’ll see many of the old terms in use on some typefaces.

Classifying Sans Serifs

At first glance, you might think that sans serifs can’t be classified the way that serifs can, since fewer variables are apparent in the ones we see most often. However, plenty of details can aid specificity when discussing, using and pairing typefaces, even within the broader category of sans serifs or, as Maxmilien Vox termed them, “linéales.” Subcategories were implemented by the British Standards classification, a permutation of Vox’s system, and they provide excellent means of discerning characteristics. I am presenting here a slight variation of those four, with a couple of minor differences for the sake of practicality.

Grotesque

The Grotesque category covers the early sans serifs, specifically those designed in the 19th century and the first decade or two of the 20th. Many of these typefaces had only capitals or exist only in centuries-old specimen books, but a number of them are still quite commonly used. These typefaces tend to be very idiosyncratic, with awkward weight distribution around bowls of characters and irregular curves.

Monotype Grotesque
(Image source: MyFonts)

Monotype Grotesque (above, 1926), based on Berthold’s much earlier Ideal Grotesque (1832), is an excellent example of the quirks commonly evident in Grotesques. Note the awkward “a” and “g,” the squarish bowls, the odd curves and angles at the tips of strokes in the “J” and “S,” and the overall irregularity.

The capital G in a Grotesque is usually spurred, and the British Standards specifies a curled leg on the capital R, although that is not apparent in many typefaces of the period. They tend to display some variation in the thickness of strokes, but the contrast does not show calligraphic influence or a logical pattern. The style became more sophisticated over the course of the 19th century. Perhaps the finest sample of this category appeared in the Berthold Type Foundry’s 1896 release of Akzidenz-Grotesk, which, along with Schelter Grotesk (1886), served as an archetype for many Neo-Grotesques, most notably Neue Haas Grotesk and Univers.

grotesque

Interestingly enough, it has been postulated that Akzidenz-Grotesk was based on Walbaum or Didot. Despite looking extremely different at first glance, a simple comparison of the basic forms shows that the metrics are very similar.

Examples of the Grotesque category include Franklin Gothic, Monotype Grotesque and Schelter Grotesk.

Neo-Grotesque

The Neo-Grotesques, also called Transitionals or Realists, include many of the most commonly used sans. They are based on the later Grotesques and take the design of the sans-serif to a new level with their careful construction and aesthetics. They are much more refined than the Grotesques, during which period type designers were still feeling their way around the new style; thus, the Neo-Grotesques lose many of the awkward curves and idiosyncrasies that are common in earlier sans serifs. You’ll see much less variation in line weight, and most often a single-story “g.”

neo-grotesque

Created with an emphasis on neutrality and simplicity, they were extraordinarily popular among the Modernists and remain popular today. Despite many claims otherwise, simplicity does not directly translate into legibility: A tight vertical rhythm and pinched apertures keep many Neo-Grotesques (including Helvetica) from being good choices for body text. In fact, in the 2013 edition of the DIN 1450 (the German standards on legibility in typefaces, published by the Deutsches Institut für Normung), Helvetica is used as a negative standard. That’s an entirely different topic, however.

In 1957 — a big year for Neo-Grotesque sans serifs, as Frutiger’s Univers as well as Folio (originally thought to be a stronger competitor, although history has proved otherwise) were released — Haas Foundry released Max Miedinger’s Neue Haas Grotesk, which drew heavily on Schelter and Akzidenz Grotesks. In 1960, Haas, in an effort to market it more effectively, rebranded Neue Haas Grotesk to what we know as one of the most ubiquitous typefaces of all time — you guessed it — Helvetica.

helvetica specimen
Many people love Helvetica so much that they’ll hang prints of vintage Helvetica specimens as decoration. (Image source: etsy)

The quintessential members of this group are, of course, Univers and the immortal Helvetica, which has gone through quite a number of permutations over the years (as have all of these typefaces) and was recently revived by Christian Schwartz as a rerelease of Neue Haas Grotesk. A nice informational minisite was created by Indra Kupferschmid and Nick Sherman for the release. Other typefaces in this category include the DIN 1451 and its derivatives, and Bell Gothic and its successor Bell Centennial.

Humanist

If you remember the most important quality of Humanist serif type, you’ll be relieved to learn that the same quality carries over to the sans serifs! The primary characteristic of Humanist type, both serif and sans serif, is a strong calligraphic influence, basing its shapes and flow on forms that could originate from a pen or brush. This means a much higher stroke contrast, and some Humanist sans even feature some stress, whereas nearly all other sans serifs have a completely vertical axis.

Another interesting characteristic of Humanist sans serifs is that their proportions often derive largely from Roman inscriptions and early serif typefaces, rather than 19th-century sans serifs as the Neo-Grotesques did. Because of this design process involving older letterforms, the lowercase “a” and “g” are most often two-story in Humanist sans serifs. All of these characteristics combine to make most Humanists a more legible choice than other types of sans faces.

Humanist Sans (Optima)

Hermann Zapf’s Optima is one example that clearly shows the calligraphic heritage, with an unusually obvious difference between thick and thin strokes, while many others in this category have more subtle features. The Humanist sans group includes classics such as Gill Sans and Frutiger as well as more recent releases like Myriad (1991), Trebuchet (1996) and Calibri (2005).

Geometric

Geometric sans serifs are exactly what their name suggests. Instead of being derived from early Grotesques, like a Neo-Grotesque, or from calligraphic and engraved forms like the Humanist sans, they are built on geometric shapes. The characters often have optically circular bowls and are otherwise typically very rectangular, sharing many components between the various glyphs.

Erbar Grotesk
Erbar’s small x-height, among other factors, renders it difficult to read. Larger view.

Jakob Erbar, whose eponymous typeface is credited as being the first Geometric sans, reportedly based his construction on the circle. Released in the 1920s, Erbar-Grotesk was intended to be legible. Ironically, because of the awkward visual rhythm, resulting from strict adherence to geometric forms, Geometric lineals are among the least legible of sans serifs and are usually suitable only for display type. Geometric sans serifs usually show little or no stroke contrast and usually feature a single-story lowercase “a.”

Geometric Sans

Paul Renner’s Futura, Koch’s Kabel and Lubalin’s Avant Garde are typical examples of the style. H&FJ’s Gotham is also a Geometric sans, although it is less strictly geometric than some and allows for more variation in the heavier weights.

The Rest Of The Story

That’s the basic classification for sans serifs! While the two parts of this series primarily deal with serif and sans type, there are many other styles to consider. The Vox-ATypI system also provides five subcategories of “calligraphics” (i.e. type that is derived from handmade letters), but as they are largely self-explanatory, I won’t dedicate much space in this already lengthy article to them. Here is a brief summary of each category.

Scripts

Script Metal Type
A case of script metal type. (Image source:
Etsy)

Scripts are, of course, typefaces based on handwriting, particularly formal scripts. The letters often connect, but not necessarily so. They range from the very formal — Matthew Carter’s Snell Roundhand, named after the author of a 1694 booklet on penmanship, originally released in 1966 — to the very casual — Ashley Havinden’s eponymous Ashley Script, from 1955.

Glyphic

Trajan Inscription
Carol Twombly’s Trajan was based on this inscription at the base of Trajan’s Column in Rome.

Glyphic typefaces are those derived from engraved or chiseled letters. Many of these typefaces look like they could be classified as serifs but are based on the work of a chisel, rather than having gone through the traditional design process and referencing the stroke of a pen. As such, Glyphics, also called “incised” typefaces, sometimes contain only capitals, and the serifs tend to be small, as a natural detail of the chiseling process rather than as a design feature. Trajan and Friz Quadrata are excellent examples of this style.

Graphic

Graphic Wood Type
Graphic wood type from the extensive Hamilton Wood Type collection.

Graphic is essentially a sort of catch-all label for display type that doesn’t fit into any other category. It includes anything that would be drawn or designed, with a brush, pen or any sort of tool. If it’s not exactly a sans, not exactly a serif, and you’re not really sure what it is, it is most likely a Graphic typeface!

Blackletter

Gutenberg Bible
Gutenberg printed with type designed to mimic the late-medieval Fraktur style of handwriting. (Image credits: JMWK)

Blackletter type began with Gutenberg and was used in printing, even printing body text, until the early- to mid-20th century in Germany. It is based on a medieval scribal hand, written with a broad-nib pen, and differs from graphic typefaces and scripts in that it has been used at length in body text. It has a very dense type style. When the traditional style that Gutenberg had used began to give way to the more readable early serifs (the Humanist/Venetian designs of Aldus Manutius and his colleagues), printers called the new style “Whiteletter,” in reference to the negative space-to-ink ratio on the page; thus, the old type was termed Blackletter, and we still use this term today.

Gaelic

Gaelic Type
Gaelic type includes the Latin alphabet as well as some additional glyphs. Larger view. (Image source: mathewstaunton)

Gaelic type is based on the insular script found in manuscripts throughout the UK. As with Blackletter, it has been used in printing body text in Ireland, from its earliest appearances in the 16th century all the way through to the mid-20th century, but is no longer popular as a text typeface. The Vox-ATypI system was amended to include the Gaelic category in 2010 at the ATypI annual conference, appropriately held in Dublin.

Non-Latin Type

Beyond that, there is still another world of type to discover. The entirety of these two articles on the subtleties of type (and, believe me, it can get much more complicated!) have discussed only the Latin alphabet, which, while quite commonly used, is merely one of many writing systems used today. I encourage you to learn more about, and get involved in, the typography of other writing systems! Some are very widespread and used daily by hundreds of millions of people; others are used by mere thousands.

Regardless of how many people use it, each writing system needs quality typefaces. From the commonly used (check out Nadine Chahine’s interview on Arabic type) to the rarely seen (Jean-Baptiste Levée gave a fascinating talk at last year’s TypeCon on creating Air Inuit Sans, supporting Inuktitut glyphs), the typography of non-Latin writing systems promises an exciting future.

Closing Remarks

We’ve barely scratched the surface of the fascinating subject of typography and type history in this two-part series “Making Sense of Type Classification.” Hopefully, it has piqued your interest in this intriguing field. Knowing your way around the typographic resources available to today’s designers is essential, and it is helpful to understand a little behind the characteristics, history, visual character and idiosyncrasies that make each typeface unique and that define how it communicates.

At one point in the history of Web design, an extensive knowledge of type history was unnecessary because a Web or interactive designer was limited to half a dozen typefaces, and those in limited weights and variants.

Today, however, the landscape of Web design is completely different, and the typographic possibilities are endless! Also, while this material is covered in many design schools, a significant portion of designers today haven’t had a formal design education, so now is the best time to catch up!

That being said, we also must remember that, while type classification is an important aid to studying type, it is not a hard and fast system that cannot be questioned. Many typefaces combine characteristics and could easily fit into multiple categories, and no classification system can cover all of the possibilities. In the end, type classification is an excellent means of learning to recognize common patterns and distinguishing characteristics of typefaces, and we get to learn some type history along the way.

With this short series, you’re now equipped with a strong knowledge of categories of type; you’ve learned to analyze typefaces and pick out unique aspects of letterforms; you’ve seen how type has evolved with culture; and, most importantly, you have a solid foundation for further study of typography and type history! It cannot be overstated how immensely important sound knowledge of typography is for anyone in the broad field of design, and the material we’ve covered here will serve you well in navigating the world of type.

(al) (ea)

© Joseph Alessio for Smashing Magazine, 2013.

0
Your rating: None

What an amazing site. An exhaustive research on the Typographische Monatsblätter (TM) focussing on the issues from 1960 till 1990.

The Typographische Monatsblätter was one of the most important journals to successfully disseminate the phenomenon of ‘Swiss typography’ to an international audience. With more than 70 years in existence, the journal witnessed significant moments in the history of typography and graphic design. Its contributors include some of the most influential designers. Although the issues before 1960 are extremely rich in revealing the development of modernist typography, the years 1960–90 correspond to a period of transition in which many factors such as technology, socio-political contexts and aesthetic ideologies, profoundly affected and transformed the fields of typography and graphic design. From this general turbulence, new forms emerged and new models were explicitly manifested. The examination of the Typographische Monatsblätter during these specific years enables a greater understanding of the development of late 20th century typography and graphic design.

Via Aisleone.

0
Your rating: None

  

Every now and then, we look around, select fresh free high-quality fonts and present them to you in a brief overview. The choice out there 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 Signika, Plastic Type, Bariol, Alegreya, Metropolis, Typometry and other quality fonts. Please note that while most fonts are available for commercial projects, some are for personal use only and are clearly marked as such. Also, please read the licensing agreements carefully before using the fonts; they may change from time to time. Make sure to check the free quality fonts round-up from January 2011, too.

Free Quality Fonts

Signika
A remarkable sans-serif typeface with a gentle character, Signika was developed for wayfinding, signage and other media in which clarity of information is required. Developed by Anna Giedrys of Poland, the typeface has a low contrast and tall x-height to improve readability at small sizes and at far distances. The typeface has a wide character set, supporting most European languages, small caps, pictograms and arrows. All weights from light to bold have alternative negative versions, optimized to solve the effect of juxtaposed positive and negative text setting, whereby negative text tends to look thicker. Available at Google Web Fonts and for free download at Fontsquirrel.

Plastic Type
The designers of this typeface were inspired by the plastics industry, exploring how they could use the various forms and imperfections of plastic in their design. The result of their experimentation is a freely available, beautiful, playful font, released under the Creative Commons Attribution Share Alike license.

Sullivan
Sullivan is a bold display face that comes in three variations. Each variation can be used effectively on its own or layered on the others to create a modern, industrial visual effect. The typeface was designed by Jason Mark Jones and released under the name-your-price policy.

Corki
Corki is a distinctive condensed slab-serif typeface suitable for headlines. Four styles are available: Regular, Rounded, Tuscan and Rounded Tuscan. The typeface includes 134 glyphs: both Latin and Cyrillic scripts, plus two manicules and various arrows. It is available for free.

Bariol
Bariol is a friendly, rounded, slightly condensed typeface, available in four weights and designed with versatility and readability in mind. It’s nice and familiar, without being too sweet, and very readable even at small sizes. Bariol Regular is available for free (a tweet or Facebook update is requested), but each font weight can be purchased for just $1.00.

Alegreya
This beautifully designed serif typeface has a classic, olden feel. The uppercase letterforms seem to be based on Roman script, while the lowercase characters rather have the feel of a humanist book. The family consists of 12 fonts (including regular, italic, bold, black, bold italic and black italic.)

Alegreya

Metropolis
Metropolis is a distinctive, experimental typeface in the Art Deco style. The design was inspired by the industrial movement of the 1920s, when skyscrapers where born. As the designer explains, “Using a double line technique, I wanted to create my own Art Deco style font that represented this era. The result is a bold, bumptious typeface with a stolidly calm disposition.” Metropolis could be a good choice when you are looking for a retro or retro-futuristic look. Released under Fontfabric’s Free Font EULA, you may use it in your private and commercial projects for free, but if you use it with a @font-face declaration, then a credit to Fontfabric is required somewhere on your website.

Typometry
An experimental display typeface inspired by geometrical forms. An interesting choice for unique patterns or just playing arond with glyphs. Designed by Emil Kozole. An advanced version of the typeface with 2 weights, 4 styles and 220 glyphs is available as well.

Tikal Sans Medium
Tikal Sans is a family with curved terminating strokes, ending in sharp edges. With a contemporary feel, a tall x-height and OpenType contextual alternate letters, Tikal Sans offers a functional look with a friendly touch. The thin and black weights are great for display sizes, while the light, regular and medium weights are well suited to longer texts. Tikal Sans Medium and Tikal Sans Medium Italic are available for free, but registration is required.

Tikal Sans

Actor
If you are looking for a workhorse typeface, then Actor might be it. It has a tall x-height, which is why it requires fairly high line spacing. The digits of Actor are created as old-style figures. The font can be used for free via Google Web Fonts.

Veneer Extras and Veneer Extras Italic
Veneer is a versatile, handcrafted “letterpress” font that has an authentic vintage feel with a touch of grunge. The freely available extras include 70 glyphs, in both regular and italics. Registration is required for the free download.

Wayfinding Sans
This type family, designed by Ralf Herrmann, sets a new standard for legibility in signage and wayfinding. Herrmann started this project with extensive field studies, driving tens of thousands of miles to explore the legibilty of road signage typefaces in dozens of countries around the world. The results of these explorations, along with an extensive study of relevant scientific legibilty research, formed the theoretical framework for creating an “ultimate” signage typeface. Wayfinding Sans includes 400 glyphs in one style, with arrows. To get the font, a tweet or Facebook update is required.

Ranger
Here is a playful Colorado-inspired italic typeface, designed by Evan Huwa. It’s a good choice for a bold movie title or a vintage book style. This typeface is sans serif and uppercase only.

Poly
José Nicolás Silva Schwarzenberg of the University of Buenos Aires designed this free font specifically for the South American indigenous language Wayuunaiki. Fortunately, the tyepface can be used not only by the 305,000 Wayuu people, but by everyone across the world. It is a medium-contrast serif font, optimized for the Web and efficient at smaller sizes. Poly is available in the Google Web Fonts library as well.

 Poly, A Quality Serif Font

Adec
Designed by Serge Shi of Russia, Adec is an original experimental typeface. The texture of the glyphs makes the typeface a good choice for distinctive playful designs and graphic branding. The typeface has three styles: Main, Initials and Text. The download contains samples of patterns created using the typeface alone.

Frontage Outline
Frontage is a charming layered typographic system that allows you to combine fonts and colors to achieve an interesting 3-D effect. Add the shadow font or just use the capital letters of the regular and bold cut for a stark effect. Unfortunately, only the Frontage Outline one is available for free (or at least paid for with a tweet or Facebook update).

Andada
This serif typeface might be the perfect fit for the headlines and body copy of your next corporate or personal project. Designed specifically for Spanish text, this typeface is a solid fit for English as well. The free typeface was given the 2010 Desigh Award by Bienal Ibero-Americana. It includes the basic set, accented characters, signs and punctuation, numbers, ligatures and mathematical signs. Released under the SIL Open Font License.

Blanch
Blanch is a distinctive display face, designed for the Fruita Blanch brand, a family-run company. The typeface is a great match for brochures and posters, but can be used for headings on the Web as well. Although it might look a bit rigid, the typeface has a modern, contemporary feel. The family consists of six weights: three condensed weights and three caps weights. Designed by the Spanish design studio Atipus, and released with a name-your-price license.

Valentina
Valentina is a classic “didone” that follows some of the principles of Bodoni from the 18th century, while incorporating many characteristics of the Spanish style of the time. The font contains 457 glyphs, with 125 alternative lowercase glyphs and 46 ligatures. Some of the glyphs can be nicely integrated in a logo or branding design and combined with Ampersand (featured above) or Zeta.

Sánchez
Sánchez is a display serif type family. Similar to Rockwell, it has rounded edges, which provide contrast and balance to the overall square forms. Regular and italic variants are available for free.

Erler Dingbats
This typeface covers the full encoding range for dingbats in Unicode (U + 2700 to U + 27BF). Erler Dingbats is the result of a collaboration between designers Johannes Erler and Henning Skibbe to create a consistent, contemporary font that could be used for everyday communication. It includes a range of popular symbols and pictograms, such as arrows, pens, phones, stars, crosses and checkmarks.

Entypo Pictograms
Entypo Pictograms is a set of more than 100 pictograms available as OpenType fonts, released under the Creative Commons license and free for commercial use. The collection consists of many navigation elements and other familiar icons. Its designers, Daniel Bruce and Andreas Blombäck, look forward to seeing usage of it.

Great Vibes
This beautiful, flowing typeface has looping ascenders and descenders, as well as elegant uppercase forms. It is a Unicode typeface that supports languages that use the Latin script and its variants.

Arvo
This typeface has strong contrast without feeling overwhelming. It can be used in headings and design campaigns. The smaller sizes (9, 12, 14 and 16 points) are hinted in TrueType format for better legibility on Windows. The font is published in the Google Font directory as a free open font (OFL).

Banda Free Regular
Banda is a semi-serif typeface with a tall x-height and rounded semi-serifs. Playful and inviting and suitable for logos, headlines and packaging designs, Banda Regular is available as a free download.

Edmondsans
Edmondsans is a free display typeface with three weights (regular, medium and bold). The typeface isn’t suited to every occasion but would be good for bold, conservative headings.

Fenix
Fenix is a serif typeface designed for display and long passages of text, with its strong serifs and rough strokes. Fenix is elegant yet legible at large sizes, probably a good fit for editorial work, books and newspapers. It is freely available for private and commercial use.

EB Garamond
Georg Duffner is recreating the classical Garamond with his open-source project EB Garamond. His goal is to revive Claude Garamont’s famous humanist typeface from the mid-16th century. Duffner’s design reproduces the original, with its letterforms taken from a scan of a specimen known as the “Berner specimen.” It’s a good, comprehensive Web font, released under the SIL Open Font License, 1.1, and also available on Google Web Fonts. The project is under ongoing development, so if you’d like to help Duffner, feel free to contribute.

Noticia Text
This slab-serif typeface was designed for long passages of texts in digital newspapers and other on-screen publications. Available for free in four styles, the typeface is currently under development, but the first version is available now.

Lusitana
Lusitana is a classic serif typeface inspired by the type found in the 1572 first edition of The Lusiads, a Portuguese epic poem by Luís Vaz de Camões. This typeface is made for long passages of text at small sizes. Designed by Ana Paula Megda.

Cardo
Cardo is a large Unicode font designed especially for academic needs. It works well for general typesetting in situations where a high-quality old-style font is appropriate. Its large character set supports many modern languages, as well as those studied by scholars. Cardo also contains ligatures, text figures (i.e. old-style numerals), true small capitals and a variety of punctuation and spacing characters.

Exo Font Family
A successful Kickstarter project made it possible for Natanael Gama of Portugal to create this typeface and release it publicly. Exo is a comprehensive geometric sans-serif font family with nine weights, in both regular and italic. Each font comes with many OpenType features such as small caps, ligatures, alternates, old-style figures, tabular figures and fractions. Both the OpenType and source files are available to download for free.

NeoDeco
This typeface was designed by Jonatan Xavier to imbue the Art Deco style with a strong modern feel. It is best for brochures and packaging designs, posters and magazines.

Bitter Regular
This slab-serif typeface was designed specifically for literary texts and for reading on screen with eInk technology. The typeface is a great fit for headings in a corporate brochure or on a website. Only one font weight is available, in TrueType and OpenType formats. A description and images are available on the designer’s website. The download link on the official website isn’t working anymore, but you can still download it from Designer In Action. Released under the SIL Open Font License.

Alegreya

Last Clicks

Type Connection
A good relationship can be characterized as two people who fit together. Aura Seltzer adopted this idea for her game Type Connection, which was her MFA thesis project. In this game, you are a procurer who helps different typefaces mate with each other. Each typeface is a lonely character searching for love, and your job is to find its perfect partner. By playing the game, you not only explore type history, but also learn typographic terms, while learning how to pair typefaces.

Type Connection

Just My Type
Picking just the right typeface can be difficult. On this page, Dan Eden presents a collection of beautiful font stacks delivered by Typekit. Some of the combinations aren’t necessarily revolutionary, but Eden delivers a nice, visually pleasing collection nevertheless. Some of the fonts are even free. Whether you’re looking for a new font to please a client or just want to play around, you won’t waste your time visiting Dan’s website. And for a more thorough article on combining typefaces, check out “Four Techniques for Combining Typefaces.”

Novel Constructions
A detailed case study on how Christoph Dunst designed the typeface Novel. Interesting and unique insights into the design process.

Showcase of Typographic Posters
This project is curated by André Felipe, a graphic designer who loves typography and its unorthodox uses. Featuring literally hundreds of posters, this project is a great resource that could serve either as a platform to show off your talent or as a reference for your next project.

Showcase Of Typographic Posters

Squared Superheroes
How well do you know your favorite superheroes? What kind of weapons do they fight with? What do their masks look like? Instead of drawing the usual fine details (facial expressions, hair, shadows, special visual effects), René Schiffer goes for a rather laconic, minimal style. He has picked out the most important characteristics of each superhero and represented them as squared forms. Placed side by side, the superheroes make for a great composition. Now, see if you recognize your childhood heroes! And no, it’s not a typeface, but… well, it could be one!

Squared Superheroes

Further Resources

  • Lost Type Co-Op
    The Lost Type Co-Op is a pay-what-you-want type foundry. Users can pay whatever they like for a font or type in “$0” for a free download. All proceeds from sales go directly to the designers of the fonts themselves.
  • The League of Moveable Type
    This open-source type movement brings high-quality tyepfaces to the Web. The creators of the project release quality fonts every now and then, so stay tuned!
  • Google Web Fonts
    This growing directory offers hundreds of free open-source fonts optimized for the Web. Google also provides ready-to-use snippets to integrate the fonts on your website.
  • Typography and free fonts on Smashing Magazine
    An overview of typography-related articles and free font round-ups on Smashing Magazine.

We sincerely appreciate the time and effort of all of the type designers featured in this post. Please keep in mind that type design is a time-consuming craft that truly deserves compensation and support. Please consider supporting the type designers who create and release these amazing typefaces for all of us to use.

(al)

© Smashing Editorial for Smashing Magazine, 2012.

0
Your rating: None

  

What is it that makes a typeface into a text font, instead of a font for larger sizes? The answer differs slightly, depending on whether one aims for print or Web-based environments.

Nevertheless, there are certain features that most good text faces have in common. Familiarity with these helps to select the right fonts for a given project. This article presents a few criteria to help the process along.

Some of today’s most successful typefaces were designed to excel in very specific areas of use: Frutiger grew out of airport signage, Georgia and Verdana were among the first mass-market fonts created for on screen reading, FF Meta was conceived as a telephone book face, and even the Stalwart Times New Roman was tailored for the pages of the London Newspaper The Times. Many typefaces are also often fine-tuned for using in certain sizes.

It should be noted that in this article, when “text” is mentioned, it is in discussion of body text, or running text (in other words, text at a similar size to what you are probably reading right now, rather than much larger sized words).

Features Of A Good Text Typeface

The features outlined in this article are those that type designers keep in mind while developing new typefaces. It’s important to realize that these aspects of typeface design are different from the text treatment a graphic designer employs while laying out a book page or website—no matter what a typeface’s inherent rhythm and niceties are, setting a text is still something that must be done with great care in respect to readability. There are problems that good fonts themselves cannot solve—whether or not a text sings on the page or screen depends on factors like the width of the column, the amount of space between each line, the contrast between the foreground/background and a number of other factors.

Different versions of the Bembo design
Above, Bembo over the years: this typeface was a favorite of many book designers throughout the 20th century. At the top of the image is a scan of the original Bembo typeface, printed with letterpress. The digital version of the typeface—Bembo, seen in the middle, is too light for ideal text in print. A newer digitization was published in 2002—Bembo Book, seen at the bottom. This font is much darker, and is a better representation of the original Bembo idea. However, the middle version is still very elegant, and may still be used well in sub-headlines.

Every typeface has its own inherent rhythm, created by the designer who made the font. With typefaces that are intended for use in body text, it is primarily this rhythm that will make the typeface readable. But there are additional factors that go into the making of a good text face: the space between the letters, the degree of contrast in the letters’ strokes, as well as the x-height and relative size of the whitespace inside of the letters. Not every typeface that works well in text will apply all of these factors in the same way, but all good ones will have many of these features in common.

1. Stroke Contrast

When it comes to typefaces, the term “monolinear” is used to describe letters that appear to be designed with a consistent stroke thickness. Monolinear typefaces are low-contrast typefaces. Stroke contrast can be a helpful feature in small text sizes, but it is not paramount that a text face appears to be monolinear. Indeed, many newspapers employ high-contrast fonts; the question that must be considered is just how thick the thin strokes in high-contrast typefaces are.

Sample Layout in the Cycles typefaces

The images in this section show different ends of the contrast spectrum: the Cycles types shown above are serifed, with a good deal of contrast. Sumner Stone’s Cycles typeface is an excellent choice for book design as its letter forms combine clarity with a rather high degree of stroke contrast and an almost timeless appearance. Five separate “versions” of Cycles are used in the above image; each block of text is set in its own optically-sized font.

Below, Avenir Next—also a great text face—is from another style of letter, and has very little contrast. I wouldn’t split good typefaces up into good contrast and bad contrast groups. Rather, some typefaces have a degree of contrast—be it too high or too low—that makes them less suitable for use in text. There is no definite rule on how much or how little contrast impacts a text face’s legibility. However, it is clear that both no contrast and excessive contrast can have adverse effects.

Text in Planeta and Avenir Next

Geometric sans serif typefaces often appear to be monolinear stokes; their letters seem not to have any stroke contrast. In order to achieve this effect to the max, type designers have always made slight optical corrections. To look monolinear, a geometric sans needs some degree of thinning. In the image above, Planeta (left) is compared with Avenir Next (right). Both typefaces are more recent additions to the geometric sans category than stalwart faces (like Futura), or classic display designs (like ITC Avant Garde Gothic). Planeta has no visible stroke contrast, which must be a conscious decision on the part of its designer. While this does give it a unique style, it makes the face less suitable for text than Avenir Next, which is actually not as monolinear as it appears at first glance.

2. Optical Sizes

Text in Garamond Premier Caption and Display Sizes

The Garamond Premier typeface family features different versions of each font. These variants are tailored for use in a certain size range. Above, the Display font (left) is compared with the Caption font (right). The Display font is optimized for texts that will appear in very large point sizes, while the Caption font has been optimized for very small text.

In her book Thinking with Type, Ellen Lupton writes:

“A type family with optical sizes has different styles for different sizes of output. The graphic designer selects a style based on context. Optical sizes designed for headlines or display tend to have delicate, lyrical forms, while styles created for text and captions are built with heavier strokes.”

The intended size of a text should be considered when selecting the typeface: is the typeface you want to use appropriate for the size in which you need to set it? Does the family include optical sizes (that is, different versions of the typeface that are tailored specifically for use at different sizes)? As with each of the factors mentioned in this article, the size at which a font is set can make or break your text.

In many ways, it is easiest to see the qualities necessary for good text faces by comparing potential selections with “display” faces. Like the term “text,” “display” refers to the size at which a specific font may best be used. In print media, as well as in many screen and mobile-based applications, the term “display” is often analogous with “headlines.” If a typeface that you are considering looks more like something that you might like to use for a headline, it won’t be the best choice for body text.

In the comparison image below, the Garamond Premier Display font has a tighter rhythm than the Caption font—not as much space is necessary between letters when they are set in large point sizes. Why should one consider type families with optical sizes, anyway? Well, as users bump up the point size of digital fonts, the space between letters increases in equal proportion. This inter-letter space slowly becomes too large, and makes a text feel like it is breaking apart. When a proper text font is set large, it may require some tighter tracking. Typeface families that offer optically-sized variants of their styles play a helpful role here.

Text in Garamond Premier Caption and Display Sizes

In the image above, the first line of text—“Stanley Morison”—is set in the Garamond Premier Display font, while the lines of text underneath it are set in Garamond Premier Caption. Each font is balanced for its size, and they also harmonize well with one another. In another image (below), these fonts have been switched: the headline is now set in the Garamond Premier Caption font, and the text in the Garamond Premier Display. The letters in the Caption face look too clumsy when they are set so large, while the Display fonts’ letters appear uncomfortably thin in a “text” setting.

Text in Garamond Premier Caption and Display Sizes

The amount of stroke contrast visible in caption-sized fonts is much lower than in display-sized fonts. If the Garamond Premier Display font (from the above image) was rendered in a smaller point size, its thin strokes would begin to break apart, making the text unreadable. But this would not occur with the Caption version.

Garamond Premier Caption can robustly set real text, even in poor printing conditions. How well a font will render in small sizes on screen depends on the operating system and applications in question. Font formats themselves also play a role; in certain environments, TrueType fonts with “hinting” information may vastly improve on screen display (see the “Hinting” section at the end of this article).

3. x-Height

Text in Garamond Premier Caption and Display Sizes

Garamond Premier’s Display face (above left) is shown next to the Caption face (above right). Both fonts are set at the same point size. The Caption face features a much higher x-height than the Display font.

Many successful text faces feature high x-heights; this means that the ratio of the central vertical area of lowercase letters—the height of the letter x, for instance—is large when compared to the length of the ascenders and descenders. Depending on its design, a text face may have a low x-height and still be quite legible. But the benefit of incorporating a large x-height in a design is that it maximizes the area of primary activity.

A high x-height may also prevent some letters, like the a or the s, from appearing to become too dark; these two letters have three horizontal strokes inside the x-height space, which is a very small area in text sizes. In order for letters to maintain clarity and understandability, they must have a consistent rhythm, as well as include large, open forms.

4. The Spaces Inside of Letters

The images below illustrate just a few of the intra-letter spacing elements that should be understood and considered when choosing which typeface to choose for your body text. In order for the white spaces inside of letters to remain visible in small sizes, it is necessary for their counterforms to have a certain minimum mass, proportionally.

Counters
ITC Bodoni Six and ITC Bodoni Seventytwo

The image above shows text set in two members of the ITC Bodoni family: ITC Bodoni Seventytwo and ITC Bodoni Six typefaces. In the first line, “Randgloves” is set in a size mastered for 72pt display (ITC Bodoni Seventytwo), while “and jam” is in the Caption size (ITC Bodoni Six). These words are reversed in the second line. Note how the enclosed white space in the top portion of the e changes between the display and text optical sizes.

Apertures
Apertures in FF Meta

“Apertures” are the gateways that whitespaces use to move in and out of the counterforms of a typeface’s letter. The above image highlights the wide apertures in four letters from Erik Spiekermann’s FF Meta typeface. These allow for the typeface’s letterforms to feel more open. In certain sizes and settings, wide apertures—and the large counterforms that are their result—will make a text more readable.

Apertures in Frutiger and Helvetica

The top line of the image above is set in Helvetica, and the bottom line in Frutiger. While the counterforms inside the letters of these two typefaces are similar in size, Helvetica’s apertures are much smaller. Because of this, white spaces inside of Helvetica’s letters and between Helvetica’s letters are much more closed off from each other than in a typeface with more open counters—like Frutiger.

Other counterforms and problematic letters worth remembering include the c; if the apertures of a, e, s are very open, the c should follow this same route. Then there are lowercase letters like a, e, g, s that often have rather complex shapes—specifically, they each feature several horizontal strokes inside a small amount of vertical space. How do their forms relate to one another? How large is the typeface’s x-height? Do the ascenders and descenders have enough room, particularly f and g? Do the counterforms inside of roundish letters (e.g., b, d, p, q, o) have the same optical size and color as those inside of straight-sided letters like, h, n, m, and u? How different from one another are the forms of the capital I, the lowercase i and l, and the figure 1? Can the 3 and the 8 be quickly differentiated from each other? How about the 5 and the 6?

5. Kerning

Sample text in Carter Sans, with and without kerning

In the sample above, kerning has been deactivated for the second line. The gaps between the letters T y and V o are too large when compared with the amount of space between the other letters in the text. The typeface used in the image is Carter Sans.

Despite the popular misuse of the term in graphic design circles, “kerning” does not refer to the spacing values to the left and right of the letters in a font. Rather, fonts contain a list of kerning pairs to improve the spacing between the most troubling lettering combinations. The importance of kerning in a font is the role it may play in maintaining an optimal rhythm. Just as kerning describes something much more specific than a typeface’s overall spacing—or the tracking that a graphic designer might apply to a text—kerning is not the rhythm of a typeface itself, but an element that may strengthen a typeface’s already existing rhythm. Not every typeface design requires kerning, and there are typefaces on the market that indeed may have too many kerning pairs—a sign that the basic letter spacing in the font could have been too faulty in the beginning.

6. Consistent Rhythm Along the Line

Simple Text Sample in Frutiger and Helvetica

In the image above, compare the spaces between the letters of the Helvetica typeface (first row) with Frutiger’s (second row). Frutiger is a more humanist design, featuring a slight diagonal axis in its letters; many of them look similar to Helvetica’s, at least at face value. However, the space between Helvetica’s letters is much tighter.

While most of the images in this article feature typeface families that include Optical Size variants, many commonly used typefaces on the market today do not offer these options. This is why it is helpful to be able to identify text typefaces based on their features, rather than just on their names in the font menu. As mentioned earlier, it is primarily the typeface’s rhythm that dictates the readability of a block of text.

Take Frutiger and Helvetica, which are both commonly used in text, especially for corporate communication—Neue Helvetica is even the UI typeface in iOS and MacOS X 10.7. Yet, despite its popularity, Helvetica is not very effective as a text typeface; its rhythm is too tight. By rhythm, I’m not referring to tracking—or any other feature that a designer can employ when typesetting—but the natural flow of space between letters, and within them as well. Frutiger is a much more open typeface—the spaces between its letters are closer in size to the white spaces inside of the letters than in the case of Helvetica. Like all good text typefaces, Frutiger has an even rhythm—space weaves in and out of the letters easily.

7. Caveat: Signage Faces

To round off my discussion on text typefaces, I’d like to briefly mention some fonts that are often shown in rather large sizes: fonts for signage. Interestingly, many signage typefaces have design features very similar to typefaces created for very small applications. The Frutiger typeface, based on letters that Adrian Frutiger originally developed for the Roissy airport in Paris (now named after Charles De Gaulle), is quite legible in small sizes precisely because it is a good signage typeface. Despite their size, signage fonts serve a rather different purpose than Display fonts.

Frutiger in an airport signage-like setting

Additional Elements To Consider

After considering the criteria mentioned above, the next question that often comes up is, “does this font have oldstyle figures, or small caps and ligatures, etc.?” A font’s letters might look really great in text, but if they do not include additional elements and features, their use is somewhat minimized. I avoid using fonts with small character and feature sets where I can, because I feel that the lack of these “extras” may break the kind of rhythm I aim to achieve.

1. OpenType Features

Once you’ve established a consistent rhythm by setting your text according to the correct size and application, it would be a pity to inadvertently break that flow. Large blocks of tall figures or capital letter combinations do just that.

Even in languages like German, where capital letters appear at the start of many words, the majority of letters in a text planned for immersive reading will be lowercase letters. Every language has its own frequency concerning the ratio of “simple” lowercase letters like a c e m n o r s u v w x z to lowercase letters with ascenders or descenders—b d f g h j k l p q y. In international communication, language support is a key consideration when choosing a font, and other character set considerations may especially play a role.

FF Meta Pro Book and two examples from its many figure styles

Traditionally, the style of figures used in running text also have ascenders and descenders. These figures—often called oldstyle figures or text figures—harmonize better with text than the “uppercase” lining figures. These so-called lining figures either align with the height of a typeface’s capital letters, or are slightly shorter. It is no surprise that, when shipping the Georgia fonts for use onscreen and online, Matthew Carter and Microsoft made the figures take the oldstyle form. Many other typefaces that have long been popular with graphic designers, like FF Meta (seen above), also use oldstyle figures as the default style. In my opinion, lining figures are best relegated to text set in all-caps.

Long all-caps acronyms—like NAFTA, NATO, or USSR—also create an uncomfortable block in the line for the reader. Setting these letter-strings in small caps helps reestablish a specific typeface’s natural rhythm in reading sizes, as may be seen in the first line of the image below (set in Erik Spiekermann’s FF Meta).

FF Meta Pro Book and its small caps

Along with common ligatures like fi ff fl, small caps and the many figure options are the most common OpenType features found in quality text fonts. Aside from having both lining and oldstyle figures, OpenType-functionality can enable a font to include both tabular and proportionally-spaced figures, numerators and denominators for fractions, as well as superior and inferior figures for academic setting. Additional OpenType features (such as contextual alternates or discretionary ligatures), are more powerfully noticed in display sizes, and in some cases can even be distracting in text.

2. Hinting

The display of text on screen, particularly on computers running a version of the Windows operating system, may be fine-tuned and improved with the help of size-specific instructions inside of the font file. These instructions are commonly referred to as “hints.” A TrueType font (or a TrueType-flavored OpenType font), is capable of including hinting. However, not every font manufacturer goes to the effort of optimizing the onscreen appearance of its fonts for Windows—even those fonts specially created for use in text sizes.

Prensa in three different rendering environments

All of the text in the above image is shown in the same font: Prensa, set at 18 pixels. The lowest row shows this at actual size in three different onscreen rendering environments. In the enlargements, the top row shows a close-up of rendering in Safari on MacOS X, which ignores the hinting data in fonts. The second row shows rendering in Internet Explorer/WindowsXP (Grayscale only, for this sample). The third row is from a ClearType environment—in this case, from Firefox on Windows7. Prensa is a typeface designed by Cyrus Highsmith at the Font Bureau; the Web font is served by the Webtype service.

Recommended Typefaces For Readability

Aside from the typefaces already mentioned in this article and its images, here is a small selection of faces that I personally enjoy at the moment. Even though lists of “favorite” typefaces are about as useful as lists of favorite songs or favorite colors, I am happy to pass my subjective recommendations along. No doubt that as new projects arise, my list of favorites is likely to change, too. I do think that these typefaces serve as great starting places. Some are also just from cool friends whose work I dig. Alongside each selection, I mention whether this choice is currently available for print only, or if there is a Web font version, as well. Don’t forget: the typefaces that you pick in the end should depend on your projects, their audience, and the content at hand.

Small sample of the Arnhem typeface

Arnhem is a no-nonsense high-contrast oldstyle-serif face. It is a contemporary classic for newspaper and book setting, designed by Fred Smeijers and distributed via OurType. Available for print and Web.

Small sample of the Benton Sans typeface

Benton Sans is a Tobias Frere-Jones performance of Morris Fuller Benton’s News Gothic genre. Designed for Font Bureau, it is not only a great typeface for small print in newspapers, but one of the best-rendering text faces for the Web as well. Available for print and Web.

Small sample of the Ibis typeface

Ibis is another Font Bureau typeface, designed by Cyrus Highsmith. This square serif family is also no stranger to cross-media text-setting. Ibis works just as well whether you use it in print or on screen. Available for print and Web.

Small sample of the Ingeborg typeface

Ingeborg is modern serif family from the Viennese type and lettering powerhouse, the Typejockeys. Like any proper family should, Ingeborg has optically-sized variants for text and display settings. The display versions of the typeface can get pretty far out, too! Designer Michael Hochleitner named this typeface after his mother. Available for print and Web.

Small sample of the Ludwig typeface

Fred Smeijer’s work in contempory type design is so significant that he gets two shout-outs in my list. His Ludwig type family takes a nod from 19th century grotesques, but he does not try to sanitize their quirky forms, as so many type designers had tried to do before him. Available for print and Web.

Small sample of the Malabar typeface

This is one of the typefaces that I’ve designed. I’m somewhat partial to Malabar. Available for print and Web.

Small sample of the FF Scala Sans typeface

Martin Majoor’s FF Scala Sans has been my top go-to typeface for almost 15 years. It mixes well with the serif FF Scala type, but it’s also really great on its own. Available for print and Web.

Small sample of the URW Grotesk typeface

Of all the typefaces designed by Hermann Zapf over his long career, URW Grotesk is clearly the best. Unfortunately, it has been a little overlooked. URW Grotesk is a geometric sans, with a humanist twist that brings much more life into the letters than this genre usually allows for. Plus, the family is super big. Available for print and Web.

Small sample of the Weiß-Antiqua Typeface

Are you a DIY-fan? Do you like to print with letter press, whether you set your own type by hand, or have polymer plates made? Then check out the typefaces of Emil Rudolf Weiß! His Weiß-Antiqua is an eternal classic. Weiß may have passed away 70 years ago, but his work is still relevant. He was German, so his last name is sort of pronounced like Vice, as in Miami Vice. Available for print and Web.

Conclusion

There are many factors that play a role in typeface selection. Aside from just browsing through the available fonts that they have, or fonts that could be newly licensed for a project, designers regularly spend considerable effort determining the right typeface to complement a project’s content, or the message at hand. Understanding some of the thoughts that go into the making of text typeface—including how a typeface’s letters are fitted to each other to determine a text’s default underlying rhythm—helps lead to better informed decisions regarding what types are indeed apt, and which faces are better suited for other sorts of jobs. After having read this article, I hope you feel more comfortable with this kind of decision making, and that you will know what to look for with a font in the future.

Other Resources

For more information about choosing the right text fonts, you may be interested in the following books and Web resources:

1. Websites

2. Books

Note: A big thank you to our fabulous Typography editor, Alexander Charchar, for preparing this article.

(jvb) (il)

© Dan Reynolds for Smashing Magazine, 2012.

0
Your rating: None

  

The Web font revolution that started around two years ago has brought up a topic that many of us had merrily ignored for many years: font rendering. The newfound freedom Web fonts are giving us brings along new challenges. Choosing and using a font is not merely a stylistic issue, and it’s worth having a look at how the technology comes into play.

While we cannot change which browser and OS our website visitors use, understanding why fonts look the way they do helps us make websites that are successful and comfortable to read in every scenario. Until recently, there were only a small handful of “Web safe” fonts we could use. While offering little variety (or means of expression), these fonts were very well-crafted and specifically adjusted—or even developed—for the screen, so there was little to worry about in terms of display quality.

Now that we have a great choice of fonts that can be used on websites, it becomes clear that the translation of a design into pixels is not something that happens naturally or consistently. OS makers apply different strategies to render how typefaces are displayed, and these have evolved greatly over time (and still continue to do so). As we now look closer at fonts on screen more than ever before, we realize that the rendering of these glyphs can differ significantly between systems and font formats. What’s more, it has become clear that even well-designed fonts may not look right on Windows if they are missing one crucial added ingredient: hinting.

This article presents the mechanisms of type rendering, how they were developed, and how and why they are applied by the various operating systems and browsers—so that when it comes time to choose a font for your next project, you know what to look out for to ensure the quality of the typography is consistently high.

Rendering Strategies

Ideal shape, black-and-white and grayscale rendering
Ideal shape, black-and-white and grayscale rendering

Rasterization

In digital type, characters are designed as abstract drawings. When a text is displayed on screen, this very precise, ideal shape needs to be expressed with a more or less coarse grid of pixels. As screens turned from mere preview devices for printing output into the actual medium we read in, more and more sophisticated rendering methods were developed in order to make type on the screen easy and pleasant to read.

Black And White Rendering

The earliest method of expressing letter shapes was using black and white pixels, sometimes referred to as bi-level rendering. Printers are still based on this principle, and thanks to their high-resolution, the result is a very good representation of the design. On screen, however, the small number of available pixels does not transport the subtleties of the drawn shapes very well. And although we might not be able to see the individual pixels, the steps found in round contours are noticeable.

Grayscale Rendering

In the mid-1990′s, operating systems started employing a very smart idea. Although screens have a rather low resolution, they can control the brightness of each pixel. This allows more information to be brought into the rasterized image.

In grayscale rendering, a pixel that is on the border of the original shape becomes gray, its brightness depending on how much it is covered by the ideal black shape. As a result, the contour appears much smoother, and design details are represented. The type on screen is no longer merely about being legible—it has its own character and style.

This principle—also called antialiasing—is the same that is used when photos are resampled to a lower resolution. Our eyes and brain interpret the information contained within the gray pixels and translate it back into sharp contours, so what we perceive is fairly close to the original shape. A similar effect is at work when a relatively coarse newspaper image that can appear nicely shaded if we hold it far enough away (or similarly, in the art of Chuck Close). Recently, Gary Andrew Clarke took this to the extremes with his “Art Remixed” Series.

Subpixel Rendering

Apparently colored pixels increase the resolution
Apparently colored pixels increase the resolution.

The third generation of rendering technology is characterized by apparently colored pixels. If we take a screenshot and the edges appear red and blue when enlarged, then we know that we are looking at subpixel rendering.

On LCD screens, the red, green and blue subpixels that control the color and brightness of the pixel are located side-by-side. Since they are so small, we don’t perceive them as individual colored dots. Having a closer look at the “red” pixel marked by the white dot reveals the strategy: all subpixels are switched on or off individually, and if the rightmost subpixel of the “whitespace” happens to be a red one, then the corresponding full pixel is technically red.

Subpixel rendering on an LCD screen
Subpixel rendering on an LCD screen.

The benefits of this technique become clear if we desaturate the image. Compared to plain grayscale rendering, the resolution has tripled in horizontal direction. The position and the weight of vertical stems can be reflected even more precisely, and the text becomes crisper.

Current Implementations

For the display of text, almost all browsers rely on system rasterizers. When looking at Web font rendering, the key distinction we have to make is the operating system. However, there are differences between the browsers in terms of the support given to kerning and ligatures, as well as the application of underline position and thickness, so we cannot expect perfectly identical rendering in all browsers (even on one platform). What’s more, on Windows, the browser can have the font rendered by either of the system technologies—GDI or DirectWrite.

Before we look at these in detail, lets first get an overview of where each one is to be used:

Rendering modes used by Windows browsers
Rendering modes used by Windows browsers.

Windows

On Windows, the font format has a significant impact on the rendering. The crucial difference is between PostScript-based and TrueType-based fonts, and not the way these are brought into the browser—JavaScript vs. pure CSS, raw fonts vs. “real” Web fonts, etc. We will see identical rendering as long as the underlying font is the same.

File formats can give us a clue as to what underlying rendering technology is being used, although it’s best that one doesn’t completely rely on the naming conventions. For example, EOT and .ttf files will always contain TrueType, whereas .otf fonts are typically PostScript-based. But then there’s the wrapped format WOFF, which can contain either “flavor” of font format. So we don’t know which one it contains (and therefore, what kind of rendering may be used), just by looking at the file name. Unless you’re using EOT or .ttf files, and can be sure it’s a TrueType, more investigation when purchasing fonts is always recommended.

TrueType and PostScript fonts differ in the mathematics used to describe curves—something that rasterizers don’t care about too much—it only makes a difference for the type designer when editing the glyph shapes. What is more relevant is the different approach to hinting. PostScript fonts only contain abstract information on the location of various elements of each letter (and rely on a smart rasterizer to make sense of this), whereas TrueType fonts include very specific low-level instructions that directly control the rendering process. Curiously, however, the effective differences in rendering are not due to these differences in concept, but rather stem from Microsoft initially deciding to apply their new rendering engine only to TrueType fonts.

Windows: TrueType Fonts

TrueType font rendering with Windows grayscale
TrueType font rendering with Windows grayscale
TrueType font rendering with Windows grayscale.

On Windows XP, text is rendered as grayscale by many browsers. Although not as crisp as the subpixel rendering used by Mac OS, the letters are nicely smoothed and look great in large sizes.

TrueType font rendering with Windows GDI ClearType
TrueType font rendering with Windows GDI ClearType
TrueType font rendering with Windows GDI ClearType.

ClearType is Microsoft’s take on subpixel rendering. It was first made available for GDI, the classic Windows API. Although available in Windows XP, it is not used by all browsers. In Windows 7 and Vista, ClearType is the default, which makes it the most widely used rendering technology (if we were to consider all internet users). However, it is important to note that this applies only to TrueType-based Web fonts—GDI-ClearType is not applied to PostScript-based fonts.

One curious property of this rendering technology is that along with adopting the advantages of subpixel rendering in horizontal direction, Microsoft gave up smoothing in vertical direction entirely. So ClearType is effectively a hybrid of subpixel and black-and-white rendering. This results in steps within the contour, which is particularly noticeable in large sizes. These jaggies at the top and bottom of the curves are unpleasant, but unavoidable—even the best hinting cannot make them disappear.

For type in large sizes, ClearType is a step backwards in rendering quality. The gains in horizontal precision are not significant, while the rough contours spoil the overall result.

TrueType font rendering with DirectWrite
TrueType font rendering with DirectWrite
TrueType font rendering with DirectWrite.

The future is bright, at least in terms of Windows font rendering. In DirectWrite (the successor of GDI), Microsoft added vertical smoothing to ClearType. This new rendering mode (so far used by Internet Explorer 9), gives us smooth and precise rendering in all sizes. The main difference to Mac OS that remains is that it still tries to align contours to full pixel heights, which leads to even better rendering given that the font is well-hinted. What’s more, DirectWrite allows for subpixel positioning, which gives the characters exactly the spacing that they have been designed with, improving the overall rhythm and evenness of the texture.

Windows: PostScript Fonts

PostScript font rendering with GDI grayscale
PostScript font rendering with GDI grayscale
PostScript font rendering with GDI grayscale.

In GDI-based browsers, PostScript-based Web fonts are displayed in grayscale. Unlike the prevalent GDI-ClearType, this gives smooth contours. And unlike TrueType hints, PostScript hinting is easier to create, even automatically.

PostScript font rendering with DirectWrite
PostScript font rendering with DirectWrite
PostScript font rendering with DirectWrite.

DirectWrite not only gives smoother outlines, it also applies subpixel rendering to PostScript fonts. Unlike TrueType rendering, however, it allows for more gray pixels in order to reflect stroke weights more realistically. That makes it well-balanced, and similar to Mac OS rendering.

At some point in the future—browser makers and users will not switch as quickly as we wish—DirectWrite will succeed the older Windows rendering methods, and we will indeed be spoilt for choice between TrueType- and PostScript-based Web fonts.

Windows: Unhinted Fonts

Unhinted font rendered with grayscale
Unhinted font rendered with grayscale
Unhinted font rendered with grayscale.

In the old Windows grayscale mode, completely unhinted fonts look surprisingly good. Since the font does not “align itself” to full pixels via hinting, and the rasterizer does not enforce this either, we have a rendering that is similar to that of iOS. Unfortunately, unhinted fonts are currently not an option, as the next example shows:

Unhinted TrueType font in GDI-ClearType rendering
Unhinted TrueType font in GDI-ClearType rendering
Unhinted TrueType font in GDI-ClearType rendering.

As noted in many discussions on Web font rendering quality, GDI-ClearType is extremely dependent on good hinting. Horizontal strokes have to be precisely defined by means of hinting, otherwise they might be rendered in an inappropriate thickness. Even in larger sizes, hinting is crucial. Unhinted fonts will show “warts” sticking out where contours are not correctly aligned to the pixel grid, like in the example above.

Unhinted font rendered with DirectWrite
Unhinted font rendered with DirectWrite
Unhinted font rendered with DirectWrite.

In DirectWrite, unhinted PostScript and TrueType-based Web fonts show virtually the same rendering. Text fonts of either flavor will still need good hinting in order to keep the strokes crisp and consistent. Display fonts may even get away with sloppy or no hinting, since this does not show much in large sizes.

Mac OS X

Font rendering in Mac OS X
Font rendering in Mac OS X
Font rendering in Mac OS X.

On Mac OS, all browsers use the Quartz rendering engine. TrueType and PostScript fonts are rendered in exactly the same way, since hinting—the biggest conceptual difference between the two formats—is ignored. The subpixel rendering on Mac OS is very robust, so this platform is typically the one we need to worry about the least. The rasterizer doesn’t try to understand the strokes and features that make up a font, as everything is represented by more or less dark pixels. Since the letter shapes are not interpreted, they cannot be misinterpreted. Quartz rendering is reliable because it doesn’t try to be smart. As a side note, Apple does seem to apply some subtle automagic to enhance the rendering, but this is entirely undocumented and beyond our control.

In some cases, however, this leads to less-than-ideal results. In the above example, the large size “T” has a fuzzy gray row of pixels on top because the theoretical height is not a full pixel value, and Mac OS does not force its alignment. Unfortunately this cannot be controlled by the font maker. However, the blurriness occurs only in certain type sizes. So typically, choosing a slightly different font size fixes the problem. With a bit of trial-and-error, one can find a type size that looks comfortable and crisp.

Another difficult-to-control phenomenon is that on the Mac, type tends to be rendered too heavy. This difference is most noticeable in text sizes, where the same font can look a bit “sticky” on Mac OS while appearing almost underweight on Windows.

iOS

Font rendering in iOS
Font rendering in iOS
Font rendering in iOS.

The rendering on iOS follows the same principles as on Mac OS—the main difference is that it currently does not employ subpixel rendering. The reason might be that when the device is rotated, the system would have to re-think and update the rendering because the subpixels are physically oriented in a different way, and the makers wanted to minimize CPU use.

Conclusions

Website visitors use a great variety of systems and browsers. Some are not up-to-date, and sometimes it’s not even the user’s fault, but rather a company’s policy to stick with a certain setup. My personal opinion is that we should try and give them the best rendering we can, instead of blaming OS makers, or demanding users to switch to better systems.

On Mac OS and iOS, we hardly have any control over the rendering, which is acceptable (since it’s generally very reliable). One problem is that fonts generally render too heavy. Maybe some day, Web font services can improve the consistency by serving slightly heavier or lighter fonts depending on the platform.

On Windows, hinting matters—especially for TrueType-based fonts (the only Web fonts Internet Explorer 6–8 will accept). Apart from that, one significant control we have over the rendering is the choice between TrueType and PostScript. Except for very well-hinted fonts in smaller sizes, the latter is equal or superior in rendering, and easier to produce. Even though DirectWrite is making Windows rendering more pleasant, it will not remove the necessity to provide well-hinted fonts.

Practical Application: Improving Display Font Rendering

Some Web font providers (such as Typekit or Just Another Foundry), have started serving display fonts in PostScript-based formats.

JAF Domus Titling Web rendered with GDI ClearType
JAF Domus Titling Web rendered with DirectWrite
JAF Domus Titling Web rendered with Windows grayscale
JAF Domus Titling Web in Mac OS X
JAF Domus Titling in different rendering environments.

While the GDI ClearType jaggies are unavoidable for IE 6–8, all other scenarios produce nice, smooth results. This also means that we will still need fonts that have decent TT-hinting—the browser share of IE6–8 is still too big to deliver fonts that don’t at least render in a clean fashion.

Bello by Underware on Typekit
Bello—by Underware on Typekit—served as PostScript-based Web fonts (right), which gives smoother rendering than TrueType (left).

Typekit has also started to implement a hybrid strategy by serving display fonts as PostScript in order to trigger smoother rendering in Windows GDI. This requires some decisions to be made on the basis of visual judgement.

“How do you define a display font?”, you may ask, and it is indeed difficult to draw the line. Some of the foundries offer high-quality, manually hinted TrueType fonts that look great in text sizes (and it would be a pity to lose this sophistication by converting them to PostScript). Some text fonts may well be used in very large sizes. So ideally, we would have to offer them in two different formats. However, increased complexity of the UI (as well as back-end handling) have so far kept us from doing this.

Future Developments

More and more type designers are becoming aware of the technical issues that arise when fonts are used on the Web, particularly TrueType hinting. As the Web font business grows, they are willing to put some effort into screen-optimizing their fonts. In the near future, we will hopefully see a number of well-crafted new releases (or at least updates to existing fonts).

With increasing display resolutions— and more importantly, improving rasterizers—we will slowly have to worry less about the technical aspects of font rendering. GDI-based browsers will certainly be the boat anchor in this respect, so we won’t be able to use TrueType fonts that aren’t carefully hinted for yet another few years. Once this portion of Web users has become small enough, the process of TrueType hinting (which is time-consuming and requires considerable technical skills), becomes less crucial. While most Web fonts currently on the market are TrueType-flavored, I am expecting that the industry will largely switch to PostScript, which is the native format nearly all type designers work in (the fonts that are easier to produce).

Other Resources

(jvb) (ac) (il)

Note: A big thank you to our fabulous Typography editor, Alexander Charchar, for preparing this article.

© Tim Ahrens for Smashing Magazine, 2012.

0
Your rating: None

  

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 Homestead, Bree Serif, Levanderia, Valencia, Nomed Font, Carton and other quality fonts. Please note that while most fonts are available for commercial projects, some are for personal use only and are clearly marked as such in their descriptions. Also, please read the licensing agreements carefully before using the fonts; they may change from time to time.

Free Fonts

Homestead
Homestead is a very distinctive Slab Serif typeface that leaves a lasting impression with its geometric forms and a modern, progressive look. The family is available in 6 weights: Regular, Inline Display, One, Two and Three. Released by the Lost Type foundry with the “name-your-price” pricing scheme. Homestead can be used freely for any personal or commercial use.

Homestead

Homestead

Bree Serif Regular
This typeface is the serif cousin of the playful, charming and versatile type family Bree which was designed by Veronika Burian and José Scaglione back in 2008. Actually, Bree is also the typeface used in the Smashing Cartoons. An italic font weight of Bree Serif should be available very soon. Released under the liberal OFL license (via Typografie.info).

Bree Serif

Lavanderia
Lavanderia is a script font based on lettering found on Laundromat windows of San Francisco’s Mission District. It features numerous OpenType features such as swashes, titling alternates, figures, stylistic alternates, ligatures. It is available in three weights, with Uppercase, Lowercase, Numerals and Punctuation sets. Designed by the talented type designer James T. Edmondson and released by the Lost Type Co-Op foundry. Free for personal and commercial use.

Lavanderia

Lavanderia

RBNo2
This new gothic sans serif font was inspired by the late 19th century industrial fonts that contained german roots regarding straightness and geometry. Combined with other sans serifs, slab serifs and serif fonts, it catches the eye when used in headlines and short copy texts. Alternate versions turn the font into a perfect partner for modern, technical and contemporary impressions as well as high-quality, luxury and timeless environments. Free to use in commercial and non-commercial projects. Designed by Rene Bieder.

RBNo2

RBNo2

RBNo2

Cassannet
Cassannet is a geometrical art deco typeface available in Regular, Bold and Outline weights, based on lettering seen on Cassandre posters. This typeface contains ligatures, capitals, numbers, small capitals and also titling alternates. You can pay a random amount of money or alternatively send out a tweet or a Facebook post to download the fonts for free.

Cassannet

Valencia
Valencia is a condensed, art-deco inspired typeface that includes five weights, ranging from hairline to black, with matching obliques for each weight. The typeface has a nice corporate vintage look which makes it a great fit for large headlines and prints as well as any collateral or stationery. Valencia’s distinctive appearance stems from its low horizontal crossbars and its full-circle curves. Released by the Lost-Type Co-Op foundry with the “name-your-price” pricing scheme and hence freely available for personal and commercial use.

Valencia

Jura
Jura is an elegant serif typeface with narrow proportions and distinguishing details. The rounded, wedge-shaped serifs offer a contemporary feel and also achieve to maintain legibility even with its range of small sizes. This typeface is available in four weights: Regular, Italic, Bold and Bold Italic and is available for free download and use.

Jura

Nomed Font
Nomed Font is a free typeface that can help you achieve a modern and sophisticated look in your designs. The triangular geometric shapes may be a bit hard to read but that’s exactly the highlight of this particular style, and it makes the typography unique and original.

Nomed Font

Nomed Font

Carton
This typeface, designed by Nick McCosker, is a strong yet sensitive slab-serif inspired by letterpress. Its sturdy appearance makes it a perfect fit for posters, headings and taglines, in both classic and contemporary contexts. Released by the Lost Type Co-Op under the “name-your-price” pricing scheme.

Carton

Carton

Novecento (Registration on MyFonts is required!)
This typeface is an uppercase-only font family with some pretty impressive geometric forms that have been inspired by historical European typographic tendencies. It was designed to be used mostly for headlines, visual identities or short sentences — both in big and small sizes. The family contains 471 glyphs and 32 font weights whereas six of the font weights of the wide-version (Light, Book, Normal, Medium, Demibold and Bold) are available for free download and use.

Novescento

Novescento

Novescento

Fjord
Fjord is serif typeface that has specifically been designed for book publications. It is intended to be used in long texts and in relatively small print size. Fjord features sturdy construction, prominent serifs, low-contrast modulation and long elegant ascenders as well as descenders relative to the ‘x’ height. Fjord performs well in sizes starting from 12px and higher; nevertheless, it can also be a distinctive font choice for larger text headlines and in corporate design. This serif typeface include Cyrillic and Greek characters and is available at Google Web Fonts. It has been released under the SIL Open Font License, 1.1. Feel free to take a look at the designer’s free font Armata as well.

Fjord

Hero
Hero is a crisp geometrical typeface applicable for any type of use: print, Web, logos, posters, booklets. This typeface contains 162 characters and is free for personal and commercial use. Available in the OpenType format for PC and Mac.

Hero

Otama e.p.
Here’s a quite confident typeface to use for expensive and fashionable designs. Strong steams and thin serifs shows similarities to the well-known traditional Didot typeface. This typeface is free for personal and commercial use.

Otama e.p.

Ribbon
This typeface is a geometric display face which includes OpenType features for an alternate alphabet. The family contains sets for Uppercase, Numerals and Punctuation. Released by the Lost Type Co-Op under the “name-your-price” pricing scheme and designed by Dan Gneiding. If you decide to buy the font for $30 or more, you will get a beautiful Ribbon Specimen Book as well.

Ribbon

Movavi
Movavi is a sans serif font that is available only in the font weights Black and Black Italic. Obviously, the typeface wouldn’t work for body copy, but it might work nicely in short headings or “groovy” art works. Available for free download and use on PC and Mac.

Download free Movavi fonts

Satellite
Satellite is a geometric sans serif font designed by Matt Yow. The typeface can be a great fit for short headlines, short body copy or slogans. Released under the SIL Open Font License.

Satellite

Open Sans
Open Sans is a very clean font family by Ascender Fonts. It includes ten styles (Light, Regular, Italic, Semibold, Bold, Bold Italic, Extrabold) and each one consists of more than 900 glyphs: Latin, Greek, Cyrillic, many of the regular diacrytic letters as well as “hanging” numbers. Also available at Google Web Fonts and released under the Apache License version 2.

Open Sans

Mosaic Leaf
The glyphs of this expressive typeface are built out of leaves of different sizes. Mosaic Leaf also contains numbers, punctuation and currency symbols. The .zip-package contains PDF, OTF and TTF files; the fonts support Western and Central European encoding, and also Baltic, Nordic and Turkish. The typeface is free to use in commercial and non-commercial projects. Designed and prepared by Lukasz Kulakowski and Zbyszek Czapnik.

Mosaic Leaf

Mosaic Leaf

Amaranth
Amaranth is a sans serif font family of four basic styles (regular, italic, bold, bold italic) with individually shaped letter forms that makes typeface more playful. Suitable for both Web and print, longer texts and headings. Available at Google Web Fonts and licensed under the SIT OpenType License. Image credit and source: dersven.

Amaranth

Siruca Pictograms
A pictogram open source font made as a part of Siruca signage system designed by Fabrizio Schiavi. The font contains many picograms related to sport, signage, home, social meetings, free time activities and business.

Siruca Pictograms

Erler Dingbats
For the first time in the entire history of Unicode standard, the full encoding range for dingbats is now covered by a complete, contemporary quality font. FF Dingbats 2.0 features more than 800 glyphs and is mainly a tool for professional designers and has been created for everyday communication purposes. It includes a wide range of popular symbols and pictograms such as arrows, pens, phones, stars, crosses and checkmarks, plus three sets of cameo figures on round backgrounds. Free of charge. (via fontblog)

Erler Dingbats

Further Free Fonts

SD Sansimillia
SD Sansimillia is a playful, yet elegant typeface suitable for many different applications. Originally cut for a local advertising brand, SD Sansimillia is inspired by the Antenna Family built by Cyrus Highsmith in 2007 as well as Erik Spiekermann’s FF Din Family cut in 1994. It is issued in regular, bold and black weights.

Mimic Roman
Mimic Roman is a modern sans serif face with evenly balanced strokes and a counter on a slight angle, giving it a 1950s retro look.

Roboto
Roboto Family is a linear sans serif font, available in 8 different styles of which each includes more than 900 glyphs — Greek and Cyrillic, too. This font was designed by Google for Andorid and is licensed under the Google Android License.

Mate
An elegant serif font designed by Eduardo Tunni. This typeface was primarily designed to be used in longer body copies in printed material. It is simple in structure and has sharp as well as generous counter-shapes which create a medium texture that calls for page color. It can also be used as display typography and is available at Google Web Fonts.

Last Click

Shape Type
If you are passionate about typography and have fun experimenting with glyphs, then you will certainly like the rather unusual type-design game created by the interaction designer Mark MacKay. The idea of this JavaScript-based letter-shaping game is simple: you get 10 modified letters from various classic typefaces, and you have to try to make them right by dragging curves along their axes. It’s an engaging way to explore what makes or breaks a glyph.

Testing your Typography Skills

Font-Bot Project
It is time for your favorite font to stand its ground. The idea is to build robots out of a type face, showcase them and hope others put together a potential opponent. Once there are two font-bots ready to compete against each other, only thing left would be to “let the battle begin!” Participating is not hard, the rules are clear: all robots must be built of type alone (letters A to Z). Let’s see if your font has what it takes to defend its corner. Fight!

The Battle of the Fonts

Further Resources

  • Lost Type Co-Op
    The Lost Type Co-Op is a Pay-What-You-Want Type foundry. Users have the opportunity to pay whatever they like for a font; you can type in ‘$0′ for a free download. 100% of all funds from these sales go directly to the designers of the fonts themselves, respectively.
  • The League of Moveable Type
    The open-source type movement for bringing high-quality tyepfaces to the Web. The creators of the project keep releasing quality fonts every now and then so be sure to stay tuned!
  • Google Web Fonts
    A growing directory of hundreds of free, open-source fonts optimized for the Web. Google also provides ready-to-use snippets for integrating the fonts to your website.
  • Typography and Free Fonts on Smashing Magazine
    An overview of typography-related articles and free font round-ups on Smashing Magazine.

We sincerely appreciate the time and effort of all type designers featured in this post. Please keep in mind that type design is a time-consuming craft which truly deserves reward and support. Please consider supporting type designers who create and release amazing typefaces for all of us to use.

(vf) (il)

© Smashing Editorial Team for Smashing Magazine, 2012.

0
Your rating: None

Rad headline font, dudeFor years web developers have bemoaned the state of typography on the web. We don’t have much control and we have to choose between a small handful of fonts. The only real guarantee is whether our text is serif or sans-serif.

A new JavaScript library solves the problem in a way similar to the long popular sIFR, but without requiring Flash. Called typeface.js, the library reproduces truetype fonts by converting glyphs to JSON. It uses canvas, SVG graphics, or VML, depending on the browser.

Like sIFR, it lets you keep your content in your HTML, but replaces the text with the appropriate shapes. That means that screen readers and search spiders can still get at your content.

The download weight appears slightly larger than sIFR, but still a reasonable size considering the information it holds. The main JavaScript file is 16K, with most fonts weighing in at about 50K.

Original sIFR creator Shaun Inman doesn’t appear all that impressed. In his link blog, Inman wrote:

“Dear type vendors, please save us from these convoluted stopgaps.”

Yes, it’s not as perfect a solution as a built-in standard. The library has three fonts available, plus a tool to convert other truetype fonts to JSON, as long as you have the right to embed the font. The tool won’t convert certain fonts it knows are restricted.

See also:


0
Your rating: None

In Web typography doesn’t have to support the overall design. It can dominate. It can be loud. It can be bold. And it can be everywhere on a web-site. In many situations it’s reasonable to give the typography the prominent position it deserves, leaving visual cues in the background or removing them at all. Doing that, you have to risk large font sizes surrounded by a generous amount of white space. What comes out of it? Elegant web sites with a unique form, style and sense of precision.

Few months ago we have already presented some sites with quite BIG typography. In this article we present further 55 examples of big, “loud” and yet elegant typography in web design; some listed designs are Flash-based, and in some cases designs are based not only upon typography, but also upon some visual elements.

Please take a look at the following posts as well:

The Showcase Of BIG Typography

Designfabrika
Görsel Işler’s porotfolio with a vibrant typography from Turkey. The design looks attractive and appealing.

Screenshot

Defining the Designer of 2015
AIGA uses only typography in its design and uses it effectively. An intiative to define the professional characteristics of the designers of 2015 so that together we can prepare designers for the skills and roles that will be expected for them.

Screenshot

Azzabee.com.au
Azzabee uses big typography in a rotating Flash-based promo. The navigation menu is perfectly integrated in the promo using PNG transparency. Very elegant and effective design solution.

Screenshot

Natl.tv
National Television is a project which uses bold, loud and sexy typography within a Flash-based design. Very playful, impressive and interesting to explore. Some content of the site may be hard to read, though.

Screenshot

Fl-2
Apparently, Fl-2, a design agency from Denver, Colorado, has a clear focus on typography. Both blog (first image) and the web-site (second image) offer literally HUGE typography. In the second example typography is integrated in the portfolio showcasing selected work produced by the agency.

Screenshot

Screenshot

Neubau Berlin
Letters, letters, letters. NeuBau is a German type-foundry which is why typography is used everywhere on the site. The typeface used is NB-Grotesk. The design isn’t intuitive at all, but that’s all about typography, right?

Screenshot

Screenshot

JLern Design
JLern Design presents the typography from a quite unusual perspective. Nice, compact and typography-heavy design solution. Flash in use.

Screenshot

Are you a virgin?
AIGA’s another concept based only on typography. The current section of the site is presented with a bold and colorful typography.

Screenshot

Hungry Man
Hungry man seems to be hungry for job as well. A really distinctive design with a little bit retro-look.

Screenshot

256tm.com
256TM is a font foundry by Thomas Huot-Marchand. Below the splash-page is presented. The navigation menu is, of course, based upon pure typography, too.

Screenshot

Elmwood
Elmwood isn’t really humble and uses typography to emphasize exactly this. Effective use of typography for promotional purposes. After all, it’s all about impressing people, right?

Screenshot

Erratic Wisdom
Not only is the typography quite bold, it is yellow too! Designed by Tom Fadial.

Screenshot

Moony.cz
Lukas Strnadel from Czech Republic places a brief description of the site in the middle of the page. Vibrant colors in use.

Screenshot

Switch Mediaworks
Switch Mediaworks is a pretty lively web-site with a pretty lively typography.

Screenshot

Shut.elmota.com

Screenshot

Mike Precious

Screenshot

Newsmap
Newsmap displays current stories and their popularity in a news map. More important messages are displayed with bold typography.

Screenshot

Fixie

Screenshot

Sean Klassen
Sean Klassen loves Helvetica and wears pants. Both his splash-page and his blog are heavy on typography.

Screenshot

Screenshot

Postmachina.com
Postmachina uses typography to deliver the message…

Screenshot

Chris Garrett Media
…so does Chris Garrett. Color transition in use…

Screenshot

Francesco Mugnai
…and so does Francesco Mugnai.

Screenshot

Freshe.st
Bill Morrison has a small web-site, but uses large and bold typography.

Screenshot

Urban Phes

Screenshot

Ourtype.be
Ourtype is a Belgian type foundry which showcases its typefaces at large scale. When you scroll the page, type seems to be a little bit shaky.

Screenshot

Kokokaka
Kokokaka sounds pretty strange, but this is how a Swedish design agency is called. Their web-site uses capital caps and very colorful links.

Screenshot

Organic Grid
Michael McDonald with dynamic Flash-based typographic design.

Screenshot

Colorcubic.com
Sometimes one can experiment with geometric shapes as well. Colorcubic uses illustrations which look like typography, but are indeed not letters.

Screenshot

Pier Madonia
Pier Madonia showcases his work using a large typography-based navigation menu. That’s an unusual approach which isn’t intuitive but still simple to understand and to use. The sub-menu is pretty large, too. And, of course, uses only typography.

Screenshot

Alex Cohaniuc
Alex Cohaniuc uses typography for his categories…

Screenshot

Ogilvy Durham
…Ogilvy Durham for his logo…

Screenshot

I Love Typography
…John Boardley for the title of his site.

Screenshot

Brunet Garcia

Screenshot

Studio Number One

Screenshot

Virtual Memories Inc.
Apparently, the creators of this site really love typography. Because they have almost nothing else.

Screenshot

300million.com
On 300million letters fly, jump and float. Created with Flash.

Screenshot

Twistori.com
Twistori is an ongoing social experiment which analyzes messages sent to Twitter and presents them in a scrolling window. With large and vibrant typography.

Screenshot

Daniel Hagglund

Screenshot

Vision 7
On Vision 7 the typography is literally squeezed insind a tiny and short layout. The letters are nevertheless huge.

Screenshot

Wind Jammer
Not really beautiful, but big and large. This company from London seems to have its own style when it comes to choice of letters.

Screenshot

Mattia Viviani

Screenshot

Paco Raphael

Screenshot

ixwa.com
Sometimes typography can be large yet remain subtle and support the content of the site…

Screenshot

Visie.com.br

Screenshot

Futonmedia

Screenshot

Babasonicos.com
Babasonicos uses bold and pretty colorful typography in the navigation. This may not be the perfect solution from the usability-perspective, but the site perfectly achieves its primary goal, namely to appear lively and colorful — just the way the band is in its pretty strange videos.

Screenshot

Topos Graphics
Topos Graphics: a start page with “mirrored” typography.

Screenshot

Popart Blog
Typography for headlines gone bold. The headline literally stands out.

Screenshot

Nu Visual Language

Screenshot

Urbanchip

Screenshot

Mike Poss

Screenshot

Marie Julien

Screenshot

Berlin.unlike.net
Bold typography supports the design. It doesn’t stand out but it is visible.

Screenshot

0
Your rating: None

Sometimes typography is all you need to communicate your ideas effectively. Graphics can support the type or type can support the graphics, but to deliver the message precisely, you need to make sure your type is expressive enough, your design is distinctive enough and the composition is strong enough. The results are sometimes crazy, sometimes artsy, sometimes beautiful, but often just different from things we’re used to. Thus designers explore new horizons and we explore new viewing perspectives which is what inspiration is all about.

This post showcases over 70 examples of sexy, bold and experimental typography. Some examples are typographic posters, some are typographic illustrations and some are just sketches with type. In any case, you will hopefully find some inspiration for your future works.

Feel free to check out our previous typography-related posts:

  • Breathtaking Typographic Posters with over 50 typographic posters designed by artists across the globe. We feature Oriental, Iranian, Hebrew, Japanese, Chinese and Russian typographic posters as well as a number of further references,
  • Typography In Motion presents some excellent examples of typography embedded into movies and videos,
  • The Showcase of BIG Typography with over 35 examples of big, “loud” and yet elegant typography in web design.

So what can be achieved out of simple letters and symbols? Please be patient, some screenshots are huge.

Sweet and Cute Type

Sweet Sixteen
Typography with a sweet taste of sugar. A nice composition, an excellent execution. Sometimes not that much is needed to make the type look tasty. The typeface used below is Cutiful.

Beauty of Typography - This Day in Type — Participate! - am besten bewertet/Horton -- July 16, 2007 -- Cutiful

Dive Deep
Hand lettering by Ray Fenwick, cutting out by Dan Mogford.

Beauty of Typography - DIVE DEEP

Scarlett
An illustration created by Nik Ainley. Notice how well every single letter (e.g. “l” and “s”) fits in the composition.

Beauty of Typography - Shinybinary v2.1 - Art and designs of Nik Ainley

Newstand Cover for Computer Arts issue 139
Alejandro Paul’s Affair typography from Argentina: typography dominates in the composition, the swirly headline is just breathtaking.

Beauty of Typography - Newstand Cover for Computer Arts issue 139

17.06.2007
Created by Michael van Laar using Freebooter Script.

Beauty of Typography - This Day in Type — Participate! - am besten bewertet/Michael van Laar — June 17, 2007 — Freebooter Script

Aphrodisiac Dessert
Dessert type for a dessert announcement.

Beauty of Typography - FFFFOUND!

FitzGerald Album (Extended Play)
Nothing can beat old-style-typography. Nothing.

Beauty of Typography - FitzGerald Album (Extended Play)

Rally
Apparently, typography can be used for a number of purposes. Typographical Motorsports: simple yet interesting.

Beauty of Typography - Rally

Tina Colada
It is worth a discussion if “overlettering” actually helps to deliver a message, but the type looks nicely. And the choice of colors is impressive.

Beauty of Typography -

More ink is coming
Impressive lettering by Ale Paul.

Beauty of Typography - more ink is coming.jpg

cim_organic
Sunny, flourish motif for a fresh typographic composition. Designed by Ryan Katrina.

Beauty of Typography - cim_organic

Empire
The attention to detail is remarkable. Designed by Theo Aartsma.

Beauty of Typography - Empire

Eichholtz

Beauty of Typography - Eichholtz

Arabic Typography

Beauty of Typography - 4039-555-638

Elegant and Sexy Type

Climate Change ‘Co2′ ideas
Simple idea which uses only the power of typography. Impressive posters do not need to be colorful.

Beauty of Typography - Climate Change 'Co2' ideas

Αnapodi Klosti Poster
Poster for a experimental performance installation. The main lettering is based on PF Beau Sans. Unusual: thin font transform into a thin thread.

Beauty of Typography - Αnapodi Klosti Poster

qp logo
In this logo “q” and “p” belong together. Nice concept, nice colors.

Beauty of Typography - qp logo

Tony Rohr
Similar idea as in the previous one, but a different execution.

Beauty of Typography - FFFFOUND!

JG3!
Slick and sexy, colorful and strong. Notice how beautifully both letters intersect in the middle of the image.

Beauty of Typography - JG3!

CMYK Lovers
Well, that’s A LOT of letters. Vibrant colors meet 3D-typography. Available as a desktop wallpaper. Designed by Guilherme Marconi.

Beauty of Typography - Wallpaper of the Week #1 | Abduzeedo - graphic design | design inspiration | design tutorials

Poster in the city of Amsterdam
Dutch graphic design at its best. Interesting typographic construction which captures attention by its structure and attracts by its vibrant colors.

Beauty of Typography - poster in the city of Amsterdam

Requiem
Strong, dirty and grungy typography is also possible. Craig Shields manages to get impressive results combining grunge and type.

Beauty of Typography - Requiem

BBB
Designed by Stefan Lucut. The loog looks very modern and powerful, however, at the first glance it is not clear what the red thread stands for. Nevertheless, very original composition.

Beauty of Typography - BBB

Strong and Bold Type

Typography
Nicolas Alexander combines typography and retro. Notice how elegant the line starting in the letter “G” goes through “R”.

Beauty of Typography - Typography

2008 Calendar
Expressing feelings via colors and type. A very clean and beautiful design by Jonathan Davies.

Beauty of Typography - FFFFOUND!

Bckyrdflw Promo
Well, this one is hard to overlook. Andrew Dyjak’s poster can be read without vocals vowels. Lovely colors, cropping and, of course, type.

Beauty of Typography - Bckyrdflw Promo

Statistics Table
Strong, bold and extremely expressive. And it is just a table!

Beauty of Typography - FFFFOUND!

The Well of the Saints A1 poster
A1 Graphic poster produced by John McDermott. Simple, strong and sexy. Sometimes two colors and a bold typeface are enough.

Beauty of Typography - The Well of the Saints A1 poster

Breaks logo
A distinctive treatmeant of letters which perfectly fits to the message a poster wants to convey. Designed by Zoltan Szalay.

Beauty of Typography - Breaks logo

Nik Ainley
Nik Ainley strikes again. Lovely typographic work where letters don’t just convey the message, but are also functional: their form suggests the second message which is transported with the artwork.

Beauty of Typography - Shiny Binary

Benno Wissing
Dutch Typography by Benno Wissing. It looks very modern, but it was created in 1963.

Beauty of Typography - Benno Wissing

Film Poster
Colorful and distinctive. Each color stands for a different movie which participated in the festival.

Beauty of Typography - FFFFOUND!

Experiments with type

A2

Beauty of Typography - A2

Crumpler - ABC

Beauty of Typography - Crumpler - ABC

American Graphic Design

Beauty of Typography - American Graphic Design

The Make Lounge

Beauty of Typography - The Make Lounge

Moctezuma: James Brown

 James Brown

Dog Type
Sometimes typography is used to deliver a message in a quite, well, unusual way.

Beauty of Typography - FFFFOUND!

Lead Us Not Into The Future

Beauty of Typography - Lead Us Not Into The Future

»R« letter sketches

Beauty of Typography -

Blik x Drez

Beauty of Typography - Blik x Drez

A Stitch Up - Corktown Tavern - Base

Beauty of Typography - A Stitch Up - Corktown Tavern - Base

Cubix Rube

Beauty of Typography - Cubix Rube

supervision

Beauty of Typography - supervision

Palawa Poster

Beauty of Typography - Palawa Poster

seis [cartel]

Beauty of Typography - seis [cartel]

Wishes
Unusual type treatment which makes the wishes quite distinctive from the “usual” crowd.

Beauty of Typography - FFFFOUND!

Rasterfeld Event Poster

Beauty of Typography - Rasterfeld Event Poster

Personal Geocode

Beauty of Typography - Personal Geocode

Cubix Rube Soft

Beauty of Typography - Cubix Rube Soft

font_code

Beauty of Typography - font_code

Experimenting with s

Beauty of Typography - s

accept | adapt | evolve

Beauty of Typography - accept | adapt | evolve

fac04_flyer_a

Beauty of Typography - fac04_flyer_a

Doblette - Taller Tipografia (uy)

Beauty of Typography - Doblette - Taller Tipografia (uy)

Bold type
These letters are really hard to read. Is it the purpose of typography? Well, it’s definitely an experiment. Cute, fat and bold type in use.

Beauty of Typography -

Extraverage x The KDU
Pattern is used to create letters.

Beauty of Typography - Extraverage x The KDU

Visual Lexicon v 2.1 Metamorphosis

Beauty of Typography - Visual Lexicon v 2.1 Metamorphosis

Type Area

Beauty of Typography - Type Area

Wim Crouwel: New Alphabet book

Beauty of Typography - Wim Crouwel – New Alphabet book

Nederlandse Postzegels 1971

Beauty of Typography - Nederlandse Postzegels 1971

Askul

 Askul

Experimental Jetset: SMCS Invitations

 SMCS Invitations

Triple O’s
Sometimes type doesn’t look like type at all.

Beauty of Typography - FFFFOUND!

TypeNeu

Beauty of Typography - FFFFOUND!

88. Geometric Type
This type is quite freaky. Dutch Graphic Design.

Beauty of Typography - FFFFOUND!

89. YOLO
A (really) striking poster designed by Martin Fewell from Manchester, UK.

Beauty of Typography - FFFFOUND!

100. Best time of my life
Disturbing yet powerful. This poster delivers the message effectively.

Beauty of Typography - FFFFOUND!

Recycle
Usually typography is used as a foundation for symbols. In this artwork it is the other way around. The yellow circle in the middle of the composition may be too striking, but it may be the designer’s intention. Designed by Satoboy.

Beauty of Typography - RECYCLE

Chaumont, festival international de l’affiche, version longue - Etienne Mineur archives

Beauty of Typography - Chaumont, festival international de l'affiche, version longue - Etienne Mineur archives

Last Click

Colours Clock
Designed with the sole intention of not over complicating the design. Designed by Richard Shed.

Beauty of Typography - Reloj Richard Shed

Holding type
These flocked magnets looks pretty sweet.

Beauty of Typography - M

Spaghetti Dinner Poster
Beautiful integration of type into a photo.

Beauty of Typography - Spaghetti Dinner Poster

Matias Ignacio en crema
Ok, now it’s time for a coffee break.

Beauty of Typography - Matias Ignacio en crema

0
Your rating: None