Skip navigation
Help

web font

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

  

The Web is technical by nature. Different scripts and pieces of code are linked together through hyperlinks, forming an endless net of interwoven, encrypted information — data that is accessible only through technical interfaces, such as Web browsers, or applications. Yet, Web professionals have made it their calling to tame the “wild” Web and turn it into an accessible, user-friendly and, most of all, personal medium.

Personality will set your brand apart from competitors and help you connect with a passionate audience.

Aaron Walter

Designers can do plenty of things to counteract the technical appearance of the Web. One very effective way is simply to make it look less technical, by using a more human, personal style.

In this article, we will discuss different aspects of freehand drawing and writing in Web design and how they can enhance the user experience of your website.

Identity And Authenticity

Freehand drawings and other sketched elements are a great way to show personality and convey a feeling of authenticity. Imagine getting a letter or greeting card from someone you cherish. Do you expect the text to be typed or handwritten? A handwritten note is way more personal than a computer-written one, right? On the Web, it’s similar. It might be a different medium, but content that obviously comes directly from a human is more authentic and more trustworthy. Let’s look at three examples of how freehand drawings can help you create an identity and stay authentic.

Look and Feel

First of all, hand-drawn content has a unique look and feel. Compare it to handwriting. Creating a personality and unique appearance for your brand or product is important.

Balsamiq
The look and feel of Balsamiq is authentic and distinctive.

Balsamiq does a great job here. It offers a mockup and wireframing tool. While its features are quite advanced, its look and feel is basic, recalling pen and paper sketches from way back. The low fidelity helps us focus on the essential functionality while also making the product authentic and distinctive.

Recognition

Freehand drawings have character. Through the touch of human imperfection, they gain a certain tension that is hard to recreate digitally. This special touch draws attention and allows people to pause to appreciate and process the hand-drawn content, more so than they might appreciate any old perfectly illustrated image.

Notepad++
Notepad++’s logo is distinctive and easy to remember.

The source-code editor Notepad++ has a distinctive hand-drawn logo. The little chameleon not only reflects the functionality of the program (the transformation of code), but is also cute and draws attention. The sketched style reflects the creative nature of what you can do with Notepad++ and makes sure you don’t confuse it with other editing tools.

Personality

Obviously, freehand drawings carry personality. They are authentic and help users to connect with your website or app. Hand-drawn content confirms that real people are behind the content, people who have put thought and effort into the design to make it usable and trustworthy.

MathBoard
Mathboard looks personal and easy to use.

MathBoard is an iPad app that help kids practice their arithmetic skills. The app has a classic chalkboard look, freshening up the dry and precise character of arithmetic. The whole app is set up in quiz form, and kids can actually write on the board to do rough work if needed. The personal appearance of the app makes it easy and attractive to use.

Information And Content

The way you present information on your website determines whether people will see it and, even still, understand it. Draw attention to your content at the right time in the user’s visit to your website. The content should look attractive and promising enough to involve the visitor. Information must be clear, relevant and actionable in order to be effective. Below are three examples of ways in which freehand styles can make the presentation of your content more effective.

Explain Features

You can use freehand drawings to explain your product, such as its features. Creatives often use simple sketches to explain a concept or present an idea that might otherwise take ages to put into words. With your website, you encounter a similar situation. You’ll have a product, concept or idea that you want to get across to visitors. By using hand-drawn icons or simple sketches, you create an intimate atmosphere, as if you were speaking to your visitors directly.

TestFlight
Stickies conjures the idea of presentations. (Image: TestFlight)

Online service TestFlight makes use of just this effect. In addition to the many other hand-drawn elements on its website, the company points out its main features with simple sketched sticky notes, accompanied only by a few brief lines of text. This conjures the idea of presentations, drawing attention to the features one by one to make them more clear.

Visualize Workflows

Freehand style is also a great way to familiarize visitors with your workflows. No one expects you to come up with the perfect solution out of thin air. The fact that you admit that a process is involved and that this process can be rough and bumpy only makes you human and likeable. It demonstrates that you try out different directions before deciding on the right track.

Alex Faure
This hand-drawn workflow conveys creativity and a thorough working process. (Image: Alex Faure)

Designer and front-end developer Alex Faure demonstrates well how a hand-drawn visualization of a workflow can educate visitors and build trust. He seems to not only know what he is doing, but also thinks things through and involves his clients in the process.

Guide Users

Whether you are designing a website or an app, keeping your users in mind and guiding them towards the various goals they might have is always important. Hand-drawn icons can be a good way to do so. It’s no secret that icons are helpful when navigating a website or app. Why would hand-drawn icons be any different? While perfectly illustrated icons might be more detailed and clearer, they are computer-made and can easily look sterile and technical. Hand-drawn icons are personal, and we are more inclined to accept guidance from another human than from a machine.

Spamped
We are more inclined to accept guidance from humans. (Image: Spamped)

The iPhone app Spamped uses very nice, meaningful icons to guide users. The app enables you to stamp and share your favorite things, such as places, books and movies. The hand-drawn style perfectly matches the personal nature of the app, encouraging users to keep stamping.

Team Presentation

The importance of team pages increases continually. While we used to accept a certain level of anonymity on the Web, we are now eager to know who is behind a website, service or product. Also, having the hypothetical option to contact someone is not enough; we want to know exactly who we would be contacting. The more personal your team presentation, the more likely your visitors will trust you. Here are some suggestions on how to enhance your team presentation with hand-drawn elements.

Be Likeable

Being perceived as likeable is important. Even if you offer a ton of information on yourself, if people think you are arrogant or too extravagant, it will do no good. We are much more willing to trust someone we like than someone whose character we cannot asses. Hand-drawn elements can make you more likeable by making you look creative, spontaneous and easy-going.

Knock Knock Factory
We are more willing to trust people we like. (Image: Knock Knock Factory)

The Knock Knock Factory welcomes its visitors with a personal and likeable presentation of its team. The pictograms sketched on the chalkboard in the background say a lot about Keith, the “fearless leader.” The company obviously considers it important to give visitors a clear picture of who they are about to deal with. It’s catchy and gives visitors a positive feeling, before they have even looked around the rest of the website. It creates an immediate personal connection and makes the visitor feel welcome to the website.

Be Trustworthy

Besides likability, trustworthiness is also important. At the end of the day, anyone can hide behind a website, pretending to be someone they are not. Showing authenticity is a great way to make sure visitors take you for who you are. Only if people trust you will they open up to what you have to say or engage in your desired actions, such as buying the product. Hand-drawn elements are usually not the easiest content to produce for a design; they require skills such as creativity and passion — skills we associate with honest and trustworthy people.

Polecat
We feel more comfortable around people we trust. (Image: Polecat)

The software agency Polecat has found a trustworthy way to introduce itself. Instead of realistic photographs, it has put thought and passion in its team presentation, using abstract yet creative illustrations. The illustrations have a rough and sketchy look to them, making them even more human. And only first names are disclosed, giving an easy-going, familiar feeling.

Be Real

An important aspect of trustworthiness is authenticity. Your visitors must not doubt that you really exist and that you exist in the way that you present yourself on your website. The Web can be a scary place, especially considering that users will probably never meet the people behind websites in person. Anyone can use a Web font, but handwriting and hand-drawn elements reveal something about your person, making you look more real.

Grove
The authenticity of a team is important. (Image: Grove)

The people at Grove found the perfect balance between creative, carefree and authentic for their team presentation. Snapshots of all team members are neatly arranged as Polaroids, with the names looking handwritten. It looks as if someone walked through their work space, taking Polaroids of everyone, including the team’s dog. Does it get more real than that?

Storytelling

Freehand drawings are a great way to tell stories. Storytelling is extremely personal, an ancient means of communication, mediated at most (back then) by a cave wall. This basic method of exchanging information transcends all technical advances and gives us a comforting, human feeling. Sketches help us ignore the impersonal nature of the Web and put a face to the humans behind it.

Entertain

Entertainment entails emotional involvement — something that is much easier to achieve when humans are involved, rather than mindless machines. On the Web, hand drawings are a great way to establish a familiar and human experience, one that helps visitors to relax and enjoy themselves.

Axure
Drawings create a familiar and human experience. (Image: Axure)

The prototyping tool Axure welcomes visitors to its home page with an amusing yet informative story about UX Man, who is “accused of having superhuman powers.” The freehand style of the drawing is eye-catching. There is no reason to doubt that a lot of thought has gone into this fun and inviting landing page.

Explain

Hand-drawn stories grab our attention because we like to recognize human elements on the Web. Whereas a too-clean Photoshopped image might not gain our trust, hand drawings appeal directly to our emotions, making us more attentive and receptive to information.

SignNow
Hand drawings appeal directly to our emotions. (Image: SignNow)

The app SignNow uses hand-drawn images to explain its main benefits right on the home page. The way it lines up the benefits, connected by the “flying” documents, creates a narrative. You can almost hear someone explaining the images as you read the descriptions below. The story draws visitors in, making it easy to follow.

Engage

Personalized elements such as freehand drawings also engage visitors. Along with user experience, “user engagement” has also become a hot topic. Once engaged, we are interested and willing to perceive and process the information given to us. So, a website that manages to engage us has already made a big step towards a positive user experience.

TouristEye
A website that manages to engage us has made a big step towards a positive user experience. (Image: TouristEye)

Travel app TouristEye engages effectively with a good story. The step-by-step introduction to its product is turned into a small adventure story, a treasure hunt waiting to be solved. Even without the text, the drawings are meaningful and reflect the free spirit of a trip.

Attention-Grabbers

Freehand elements, such as handwriting, are just not what we expect in a technical medium like the Web. They go against the straight lines and symmetry that we associate with the Web. Thus, a perfect opportunity to grab the visitor’s attention. Handwritten comments and instructions feel human and make us feel like we are being addressed directly.

Invite

You can use this personal method of communication for different things. First, you could easily invite visitors to perform certain actions, such as liking you on various social media platforms or sharing your content. We are more likely to respond to messages that appear to concern only us, not the general public. Even though the message is on your website for everyone to see, you can create a feeling of connectedness by addressing visitors directly.

Weezbe
We respond more likely to personal messages. (Image: Weezbe)

Weezbe use a handwritten message on its landing page, together with a happy smiley and an arrow that guides the visitor’s eye to the green button. The header is simple yet effective, drawing attention to the call-to-action button without being intrusive or annoying.

Make Curious

You can also use hand-drawn elements to make visitors curious and, in doing so, to guide their line of vision and trigger certain actions. For example, arrows are a great way to guide the attention of visitors.

Radley Yeldar
Hand-drawn elements can make visitors curious. (Image: Radley Yeldar)

The creative agency Radley Yeldar shows a minimalist drawing of a hand that appears to be tapping on the screen, along with the line “This is not just a footer.” The visitor is motivated to mimic the gesture of the hand and click on the screen, if only to find out what happens. This is a great subtle way to bring the footer to the visitor’s attention.

Point Out Details

Last but not least, hand-drawn elements can be handy for pointing out details. Again, it’s all about grabbing the visitor’s attention and drawing it to the relevant area. Just as you use arrows and other marks to highlight content in a book or other offline medium, these elements work great on your Website. After all, highlighted elements bear a certain importance that makes them worth checking out.

Orbit
Highlighted elements are expected to be important. (Image: Orbit)

Orbit uses hand-drawn arrows to point out adjustable elements of its image slider plugin. The hand-drawn quality of the arrows draws attention to the defined areas of the slider, and it also stands out, obviously not being part of the slider itself.

Don’t Overdo It

Sometimes, freehand drawing doesn’t suit the nature of a website. Make sure not to overdo it and that visitors would truly appreciate a more personal design. Don’t hesitate to ask visitors if you are not sure how far to go; for example, by conducting a live survey on your website.

While certainly many examples are out there of how not to use hand-drawings on a website, let’s look at only one. The aim of this article is to point out positive examples and offer ideas on how a freehand style can improve the user experience, but it is also important to be aware that it’s not always effective and that you should use hand-drawn elements within reason.

Joshua Keenes
The overdone hand drawings make the buttons look obtrusive and pushy. (Image: Joshua Keenes)

For example, designer Joshua Keenes uses hand-drawings to draw attention to his social media buttons. While the concept might work, the fact that he overdoes it has two side effects. First, so much is going on that your attention gets lost before even getting to the actual target, making you lose focus before taking any action. Secondly, the invitation to hit one of the buttons becomes quite obtrusive and pushy, likely scaring people away, rather than welcoming them to the social community.

Conclusion

Having a personal experience on the Web is becoming increasingly important. We no longer want to visit cold, formal and anonymous websites. Rather, we want to feel comfortable surfing the Web and to meet the people behind a website, and we need to trust them before we are willing to interact with their website.

Freehand drawings have a human quality, the perfect bridge over the gap between the technical, impersonal Web and the accessible, user-friendly and personal experience that we expect today.

(al)

© Sabina Idler for Smashing Magazine, 2012.

0
Your rating: None

You may have heard that our Web FontFonts are now supported by 98% of all desktop browsers. With a tantalising typographical treasure trove of 2240 Web FontFonts, it's sometimes tricky to decide which web font is the best fit for your online brand presence. To provide a little inspiration and help you choose, we've brought together a selection of in-use cases of our top ten most popular web fonts that have caught our eye recently.

FF Meta & FF Meta Serif

Parse by HowThe marvellous FF Meta and FF Meta Serif, Erik Spiekermann's No-Brainer, feature on this great site Parse by How. Parse is a real smörgåsbord of design content; they scour the web to bring together what they call design 'tapas for the brain'.

FF DIN

FF DIN in-use

One of our bestsellers and a real classic typeface, FF DIN, features on the Budget 4 Change website. The thin horizontal strokes and fluent curves of FF DIN provide a sober and solid tone to the site which is dedicated to mapping, tracking and analyzing donor government budgets against official development assistance.

FF Unit & FF Unit Slab

Typolution

Evolution, Revolution, Solution. That is the simple philosophy behind Typolution, the 'purely' typographical website that covers the latest developments, innovations and advancements in the industry (all in German). The site uses our very own FF Unit for the body text and FF Unit Slab for the headers, offering a cool yet disciplined tone.

FF Dax

Juventus Member

FF Dax adorns the official team fan page of the football club Juventus, the site is the go-to resource for Juventus fans to join the community of supporters and buy a subscription.

FF Scala & FF Scala Sans

VRB

The website for the VRB (Vorratsgesellschaft) organization based in Germany is set in one of the bestselling and most serious text faces, the formidable FF Scala and FF Scala Sans. The VRB offers 'off the' Shelf Companies and legal advice.

FF Tisa & FF Tisa Sans

Espen Dreyer

Espen Dreyer is a Norwegian freelance photographer and his website packed full of lovely snapshots. Set in one of our most prolific Web FontFonts, FF Tisa and the recently released FF Tisa Sans.

FF Kievit

Blossom

The new start-up Blossom, offers a brand new product management tool and features Mike Abbink's FF Kievit which offers a clean and open touch to their site.

FF Clan

Red Bull Academy Radio

The website of the Red Bull Music Academy Radio really packs a punch with the use of the strong and powerful FF favorite, FF Clan which was designed by Łukasz Dziedzic.

FF Fago

Regmodharz

The mighty fine FF Fago, one of our super families designed by Ole Schäfer, provides a conscious corporate air to the online presence of the green energy project, RegModHarz.

FF Dagny

Two Arms Inc.

Two Arms Inc are a team of two, who combine illustration and design in a delightful manner. Based in Brooklyn they are famed for their passion for screenprinting. Their website employs FF Dagny, by Örjan Nordling and Göran Söderström. Great minds think alike, as we use it on our site too!

We've recently received some lovely examples of FontFonts in-use. Keep 'em coming! If you've used a FF in a recent project and you'd like to be featured on our site, please email lucy@fontfont.de.

via FontFont News Feed http://feedproxy.google.com/~r/Fontfont/~3/3CRV8NxKQ8o/top-10-webfonts

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

Abril is the web’s kind of typeface. This family encapsulates current trends and is an amalgam of traits from past periods. It brings Didone romanticism to a sea of very similar screen-safe sans serifs, and offers a lean, useful alternative to designers tired of (but spoiled by) Georgia, the preeminent screen Scotch.

The contemporary design aesthetic is full of objects with mass and humanism. Apple hardware and Audi cars, with their rounded corners, apparent density, and (visually or physically) low centers of gravity, are good examples. Abril’s “Display” styles exude a similar density (for instance, their chiseled, leaden ball terminals) and subtle humanism (the tapered stems and flexed stroke endings in the italics), while maintaining the formality of a Didone. Thin strokes, critical to the personality of a Didone, are sturdy enough to ensure the face survives on screen, yet they do not compromise its spirit – the thinnest among Abril Display’s four available weights still has plenty of contrast.

Abril’s “Text” styles draw more inspiration from Scotch Roman types than Didones. Nevertheless, there is no shortage of mass and humanism in Abril Text, and plenty of family resemblance – same chiseled ball terminals, flexed stroke endings, and stroke axis as the Display styles, but with beefy, bracketed serifs, and a toned down contrast. There are also a variety of features that make the type more readable, like a stronger sense of continuous rhythm in letterforms and spacing, as well as subdued idiosyncrasies (the lowercase ‘g’, for example).

The fact that Abril comes in separate Text and Display styles is itself a mark of distinction. Desktop publishing seems to have given us the idea that one size fits all when it comes to digital type, but that’s certainly not true. Abril is also a study in how to successfully release a font across distribution channels and media. It was simultaneously made available on TypeTogether’s own site and via web font partnerships with Typekit and Fontdeck, and its basic styles had been manually TrueType hinted prior to release. Plus, Abril’s Fatface was made freely available as an introduction to the family.

I hope Abril’s culturally relevant style and astute release strategy earn it the success it deserves. I, for one, will be using it.

Tim Brown is Type Manager for Typekit and he makes Nice Web Type.

0
Your rating: None