Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

September 27 2013

09:35

Dear Web Font Providers


  

When you buy something, I bet you want it to work. Heck, even if you use something for free — maybe borrowed from a friend — I bet you want it to work. No one prefers hiking boots that are too tight (or too loose), a car that shimmies when you drive faster than 40 miles an hour, or a kitchen knife that can’t cut a tomato. And Web designers don’t prefer fonts that don’t fit a project, fall apart in different browsers or can’t be used in a mock-up.

We also don’t like wading through all of the fonts that won’t work for us in order to find the ones that will. It takes precious time away from other tasks and responsibilities.

You’ve Come A Long Way, Baby!

Six years ago, A List Apart published “CSS @ Ten: The Next Big Thing,” in which Håkon Wium Lie describes the @font-face declaration and announces:

“Two things must happen before Web fonts can take web design to the next level… First, we must ensure the validity of the approach.…  Second, we must convince browser makers to add support for web fonts.”

You Helped Make It Happen: Validity and Browser Support

Today, browsers support Web fonts, and we’ve got the valid CSS to make the fonts work. Of course, as old browsers changed and new browsers (and extended font families) emerged, valid CSS became an ever-moving target.

On the DIY side, a big “Thank you!” to Paul Irish, who gave us the “Bulletproof Syntax” to fool Internet Explorer (IE) into loading the correct font file (remember using a smiley face for the local font name?); to Richard Fink, who gave us “Mo’ Bulletproofer Syntax” to fix a font-loading problem in Android; and to Ethan Dunham, who gave us the “Fontspring @font-face Syntax,” which even works in IE 9. You all thoroughly explained why your syntax works, which enabled each to pick up where the other left off. On top of that, Dunham, your @font-face generator brought valid syntax to those of us who (please, I beg of you) just want our fonts to work.

Web font hosts such as Typekit and Fontdeck deserve a shout out, too. You worked to support multiple weights and styles of a font family cross-browser. Your variation-specific font-family names (which is a shorter and sweeter way of saying, “Hey everyone, you need to use a unique font-family name for each weight and style of a family”) require longer CSS, but they are valid and allow more than four weights and styles to load in IE 7 and 8. Those of us who can’t live without light, regular, bold, extra bold, and black weights are in Web font heaven!

You Went Above and Beyond: Responding to the Needs of Type Designers

One aspect that Lie missed in his article was the need for more Web fonts — how could we take Web design to the next level if we didn’t have a lot of fonts to use? This, of course, meant that you had to gain the trust of the type design community.

You had to protect the fonts.

Remember when type designers wouldn’t design or provide Web fonts without the guarantee that their files were secure? Typekit, your article “Serving and Protecting Fonts on the Web” (2009) laid out how you set up hurdles to “discourage casual misuse” and created a reasonably secure system for serving fonts.

Thanks to everyone’s tenacity, at some point in the last four years, “reasonably secure” was enough for type designers to take a chance. And now they’re hooked. In a recent interview, Jonathan Hoefler and Tobias Frere-Jones of H&FJ said: “We’re requiring that every new project have a way to thrive not only on paper, but on desktop and mobile screens.” How freaking awesome is that?

So, in the span of only six years, you’ve come a long way, baby. Web font syntax is valid and supported by most browsers (our fonts load!); we have thousands of Web fonts to work with; we have multiple options to deliver Web fonts (DIY or through a service provider; and free, monthly, yearly or a one-time purchase); and you are constantly improving your services, so Web fonts are easier to implement and they (usually) load seamlessly!

What else could a Web designer need from you?

I am so glad you asked.

“What About Us?”: What Web Designers Need

Web designers — especially those of us who care about type and are trying to be thoughtful about the fonts we use — need more than access to thousands of Web fonts. Frankly, we need access to high-quality, appropriate Web fonts. And we need to be able to find them.

We’ve visited your websites. Some of you have thousands of fonts for us to use. But you know what? More isn’t always better. Sometimes more becomes more-stuff-to-wade-through-to-find-what-I-want. In 2010, a New York Times article, “Too Many Choices: A Problem That Can Paralyze,” reported on the debilitating effect of too many choices. Too many choices make it harder to choose. How do we know our choice is the best one? How do we know it’ll fit when we go for a hike? And if it does fit, how do we know another one won’t fit better?

Benjamin Scheibehenne, a research scientist at the University of Basel in Switzerland, suggests in the article that debilitation comes not only from too many choices, but also from a “lack of information or any prior understanding about the options.” Hmm. While we’re at it, how do we know it won’t shimmy on the highway?

You’ve given us thousands of Web fonts. Now give us useful information about the options. Help us understand them. Help us ascertain which ones will work best for us. Which ones will work for a particular project. Which ones hold up cross-browser. Which ones will integrate seamlessly in our workflow.

Show Us Your Web Fonts in Context

Most of you show us how your fonts will sort of look in context. You give us just enough to see whether a font might be appropriate to use (“Hmm, this one is a slab serif, so it might work.”), and you help us to eliminate those that definitely won’t work (“Nope, I don’t want such a round-looking font.”). OK, that’s a start. But that’s not enough.

Take a page from history. Before type went digital, printers and type designers sold their typefaces to clients by showing how they looked in context. They’d provide broadsides or books, often setting each typeface in paragraphs at various sizes. They’d show available weights and styles of each family. And because the specimen sheets and books were printed, publishers and designers could see how the typefaces held up when the ink hit the paper.

Caslon font specimen sheet
A specimen sheet by William Caslon, 1728. The typeface is shown in paragraphs of various sizes in both roman and italic. A larger digital image shows other fonts available in the family. If I were in the market for a typeface back in 1728, I’d know exactly what to expect from Caslon.

Not to name names, but Fontdeck, Fontspring, Font Squirrel and MyFonts, you guys only offer the opportunity to test-drive Web fonts in a sentence. The problem with a sentence is that it doesn’t show how the font looks in body copy. Body copy has visual texture, and texture can be pleasing (lively but not intrusive, promoting horizontal movement of the eye) or jarring (with uneven spaces or a strong vertical pull, hindering horizontal movement of the eye). Texture affects readability.

Texture also affects the look of a Web page, and Web designers need to know whether they are picking a font with the texture they need. A sentence doesn’t help us to make a good choice. If you don’t believe me, take a look at the images below. Two fonts that look really similar when set in a sentence look different when set in paragraphs of text.

Two fonts as cascading sentences
Cascading sentences from Typekit. Top: Kepler Standard by Adobe. Bottom: Utopia Standard by Adobe. Both are serif fonts with a slightly oval bowl (look at the shape of the “o”) and a high contrast between thick and thin strokes. They look pretty similar to the casual eye. Heck, they even look pretty similar to the trained eye!

Same two fonts as paragraphs
The same fonts set as text in paragraphs from Typekit. When shown in paragraph format, we can see the difference. Top: Kepler Standard by Adobe. Kepler has a rounder, “bubblier” feel and looks slightly smaller when set at body-copy sizes. Bottom: Utopia Standard by Adobe. Utopia feels more structured, less round. And, of course, it looks bigger when set at body-copy sizes. Neither of these fonts is “wrong” when set in text. But they look different in paragraphs, and each might be appropriate for different projects.

Now, for the rest of you, Google Fonts, Fonts.comWebtype and Hoefler & Frere-Jones, you show your fonts in paragraphs. Thank you. But just so you know, not all of the paragraphs are as helpful as they could be.

Google Fonts, your text has too tight a line height, so your fonts all look clunky (see the image below). Fonts.com, you don’t offer enough text sizes; if a font looks too small at 14 pixels and too big at 18 pixels, we can’t tell what it would look like at 16 pixels (just so you know, 16 pixels is a really popular type size for Web text). Webtype, you use a string of capitalized words, so there are too many capital letters, and your fonts look clunky; if you want to show us what your fonts really look like, just use plain text. Hoefler & Frere-Jones, your paragraphs are limited to three lines, with a super-long 725-pixel line length; these paragraphs aren’t delightful to read, and they undermine the quality of your fonts.

Same font, same size, two line heights
Which font would you choose? How paragraphs are set makes a difference. Top: Google Fonts paragraphs have a tight line height. Open Sans looks clunky and hard to read, making it hard to tell whether the font would look good in body copy. Bottom: Open Sans on Typekit. A looser line height helps us to see that the same font is actually a pleasure to read.

Typekit and Typotheque, of all the Web font services I’ve visited or used, you provide the best on-site examples of how your fonts look in body copy. You both provide multiple paragraphs at various sizes, with a good line length and a good line height. WebINK, your off-site solution is also pretty good. Using the FontDropper 1000 bookmarklet, I can drop any of your fonts onto an existing Web page and see how it looks in context. One problem I noticed, though: Your bookmarklet doesn’t drop in an entire font family, so we can’t see a font’s true bold and italic.

Which brings us to font families. I’m sure you’ve noticed that bold and italic versions of a font are sometimes too similar to the regular font, which undermines hierarchy. Other times, the bold is too heavy or the italic too squished, and one or both are hard to read. These are all reasons why we might not want to use a particular font. Plus, sometimes a bold or italic has letterforms that a client simply doesn’t like.

So, to really see how a font works in context, we would need to see how the entire family of weights and styles works together. Unfortunately, none of you do this yet.

Show Us What Your Fonts Look Like on Other Systems and Browsers

I’ve been talking a lot about context. Context is not just a font’s texture in a paragraph or how the font family works together. Context is also where a font “lives.”

As Web designers, we know that our designs are ephemeral, constantly changing based on operating system, browser and screen size. For example, we know that fonts behave differently cross-browser — if they aren’t hinted correctly, then letter shapes, strokes and letter spacing will change in unexpected ways.

Problems arise cross-browser
If fonts aren’t hinted well, their strokes can change significantly from browser to browser. This font looked great on my Mac (top). When I tested it cross-browser, I ran into problems (bottom). The font is too light to read easily.

More problems arise cross-browser
If fonts aren’t hinted well, then spacing (both inside and between letters) can change significantly from browser to browser. This font looked great on my Mac (top). When I tested it cross-browser, I ran into problems (bottom). The font gets narrower, and the spacing between letters is erratic.

The only way to know whether a font will work cross-browser is to test it. And let me tell you, testing Web fonts is mind-numbing and time-consuming. (I once cleaned out my garage to avoid testing fonts for a project.)

Thank you Fonts.com, MyFonts and Typekit for providing screenshots of your fonts in different browsers. You present only cascading sentences, but even that helps. Much like Caslon’s printed specimen sheet showed what his typeface looked like in print, you three give Web designers a glimpse of what your fonts look like in use. You show us which fonts to reject and which to consider for further testing.

Hoefler & Frere-Jones, you claim that your new Cloud.typography service creates multiple font files (each hinted and built for a specific browser and platform) and supplies each browser with its unique font file. If this is true, then your fonts should look great across all browsers. If this is true, I might just have to bake you some cookies. But I sure wish you’d provide screenshots to back up your claims. Some things I need to see for myself.

Let Us Use Your Fonts in Mock-Ups

Some Web designers comfortably go from a pencil-and-paper wireframe to building a partial-website-as-mock-up. Others prefer (or are required) to include an intermediate step and mock up pages with a tool such as Photoshop, Illustrator or InDesign.

I know — now it’s your turn to tell me to take a page from history.

Before type went digital, designers didn’t mock up projects using real fonts. Clients certainly couldn’t expect to see such a thing — comps were fine. But since the late 1980s, mock-ups have been expected to “look like the real thing.” And if we want (or need) to show a realistic mock-up to a client, we need access to the Web fonts.

Fonts.com, Font Squirrel, Google Fonts and WebINK, you all supplement Web fonts with free access to desktop (or “mock-up”) fonts for subscribers. Thank you.

Again, unfortunately, none of your solutions are perfect. Fonts.com, you allow access to mock-up fonts for only one day, to “kick off the design process.” I don’t know how it works in your office, but I can’t get anything done in one day. Font Squirrel and Google Fonts, you specialize in free fonts. While I (and my students) love having free fonts to use, access to good-quality body fonts is sort of limited. WebINK, your plugin for Photoshop is a great solution — unless a Web designer prefers to use Illustrator, InDesign or another tool.

Fontspring, MyFonts, Typotheque and Hoefler & Frere-Jones, I know you all offer bundles or discounts for purchasing both Web and desktop fonts, and bundling does take some of the pressure off a Web designer’s wallet. But if you’re a small company or an independent designer, like me, shelling out the extra money just to mock up an idea is hard.

The most promising approach for mock-up fonts might be just around the corner. Typekit, I know you’re working with Adobe Creative Cloud to bring us desktop font sync. I’ve tested it out, and I’m happy to report that it works like a charm. (OK, my old Mac laptop runs more like a tortoise than a hare when I’m running Creative Cloud — but, hey, I can turn it off when I’m not using it.)

I was cynical (who me?) about font synching actually working. I use CS6 out of the box and the free Creative Cloud membership level. But you promised me that it would work with a paid Typekit membership (which I have), and it did! The fonts even stay synced when I’m working offline. This has exciting possibilities.

In Conclusion

I know you guys are busy, so I’ll wrap this up.

One more thing needs to happen before Web fonts can truly take Web design to the next level, and only you can do it. You need to meet the needs of the people who actually choose and use the Web fonts (ahem, Web designers).

Sure, we can all work around these issues. Personally, I’ve got a font specimen page that I use to test the fonts I’m interested in. After I narrow down the options, I can test fonts cross-browser myself. Hours later, if one of the fonts I like actually works, I can go straight to HTML and CSS from my pencil sketch and avoid the need for mock-up fonts.

But here’s the question:

“Why should we have to work around these issues?”

(All Web designers who love to use new fonts, repeat after me, “Why should we have to work around these issues?”)

If it’s important that fonts load in every browser, why isn’t it important to identify which fonts actually look good in every browser?

If it’s important to woo font designers so that you have a lot of fonts to offer, why not show us how those fonts actually work in copy?

Look, Web fonts aren’t just font files that need to be secure and easy to implement. They affect the overall look and usability of a website. They need to be chosen with care. And thanks for the thousands of fonts, but quantity is not as important as quality. A hundred knives that can’t cut a tomato won’t meet my needs when I’m making my kid a BLT.

So, make our lives a little easier. Make our work a little better. Help us find the Web fonts we want to use.

I dare say, you’ll win some affection from every Web designer who has ever looked at the thousands of Web font options and said, “Oh shit. Which one should I use?”

Sincerely yours,

A Type-Loving Web Designer


P.S. In case you’re interested, I’ve summarized how you’re all doing so far. Web designers who love to use new fonts, I hope you find it useful.

P.P.S. Below you’ll find the official bibliography of the articles quoted above. Otherwise, my students would be very disappointed by my lack of scholarly detail.

(Credits of image on front page: Michael Bundscherer)

(al, ea, il)


© Laura Franz for Smashing Magazine, 2013.

September 24 2013

13:00

Graphics and Lyrics: How to Make Eyegasmic Infographics

Graphics play a role in our Internet learning experience. Images have become part and parcel of the information acquisition process in our lives. Normally, graphics like pictures and drawings are used as aids and not the main tool for learning. They are just appendices that help people understand the information that is being fed to them.

That was the general idea before the influx of the Internet. The pre-Internet idea is dominated by the belief that graphics are just ‘aids.’ But it has surprised learning purists that graphics can be very good tools as main information sources. Thanks to the Internet, we now have Infographics!

infographics-02
From Brafton

Infographics or information graphics are visual and artistic representations of data or knowledge. They are presented in a creative, quick and witty manner using diagrams, charts and design elements. Infographics are filled with drawings, vector and flat-design images, sketches, icons and texts to facilitate the learning experience better and more fun.

infographics-01
Source

The average tourist can quickly and, with fun, go through the city using an infographics-designed map, or take researching student who could quickly grasp the use of colors for advertising.

maps-for-infographics03
What makes infographics eye-gasmic is that they use design elements like colorful charts, dandy diagrams, flamboyant flowcharts and intelligent icons. This makes it easy for the readers to process the data because their eyes are fed with the simplicity of the design. Infographics turn away from text-heaviness and eye-sore font spacing and gives the eyes a lot of creative breathing room.

Finding the info

The first thing you take note when making an infographic is the info. That is elementary knowledge. Information, which comes before the graphics, should be correct, interesting and relevant. The graphics would totally fall and suck if you’re data is as intelligent as Patrick Star.

So how do we find intelligent data? Consult Einstein or Stephen Hawking? That would be a very good idea. But since most of us are ‘busy’ enough to even stand up and remove ourselves in front of our own computer tables, we might as well make the most out of what we have. We could browse blogs that provide us with relevant data, tweets, books, or we could just Google things out!

But if you are really frustrated and has enough bucks to hire a freelance researcher, might as well do it.

The best way to gather data for your infographic details is through search engines. There are a lot of search engines to choose from and Google is probably the best and most picked choice. Of course, after typing in your search query, you will be bombarded with thousands, even millions of results. Now you need to sift those information out so that your research will stand.

As a rule of thumb, Wikipedia is not really suggested as a main source (Sorry, Wikipedia fans). As much as possible, use .org, or .edu domain names. Try to consider the status of the website. If you are looking for web-design related topics, you wouldn’t choose a website which has few followers, right?

Next is you need to filter what you need. You need to choose the relevant, interesting and precise data for this. The reason is very elementary. No one will read you infographics if they are boring and wrong.

Try looking on these:

The Skeleton

Okay, this part isn’t anatomy; you’re still at 1stwebdesinger. The skeleton is just a step in making an eye-gasmic infographic. This is the part where you need to arrange the data you have collected into an organized story or flow. Each datum must point to another and so. The rule of thumb in infographic-making, there should only be six main points or parts as a maximum.  You should determine these six parts. You need to list six of the best and most interesting facts you have. The trick here is, if a data bores you, it will bore everyone. If it entertains you, it will still bore everyone, so you might as well look for a better one. This will ensure sustained interest and readership and would not result into brain explosions due to information overload.

Source

Once arranged, the data must be represented in a visual format. It is very advantageous to make an outline and think of the needed graphics for your work. You also need to process data and make them graphs, flowcharts and comparisons. Remember that a good organization is as good as the design itself. If your data is as peaceful as Syria, try again. Make them as easy as possible to understand.

Source

I listed a few of the well-arranged infographics data-wise:

The Value of Being LinkedIn

infographic-01

Profile of a Twitter User

infographic-02

The Descent to Credit Card Debt

infographic-03

Art-attack time!

After arranging your data, you could now proceed to the design. Most infographics have a portrait orientation. According to QuickSprout, vertical infographics are posted 28.9% more frequently than horizontal ones and are 41.7% to be more likely borrowed by other websites. This might just make sense that vertical infographics are more advantageous to post.

Source

Remember to use complementary colors. This color combination tends to attract most readers as the graphics is presented in a more readable and understandable manner. You should also use large fonts to be able to convey the message even if zoomed out.

It is also advisable to use creative icons, 3d and flat. All of the posts that I have uploaded to this site will matter. Typography, colors and flat design!

Here are a few inspirations to start with:

100 Million Professionals

infographic-04

The Future Farm

infographic-05

Pikes Peak Course

infographic-06

Ancient Hebrew Cosmology

infographic-07

The Kulula Airlines

infographic-08

Titillating Title

Think of a titillating title! Attracting attention through titles is as good as attracting readers to read the whole work. Good titles would commonly tantamount to good articles. No one wants to read a boring article with a boring title.

In this step, you should consider the relevance of the title to the theme of the graphic. Think of puns, assonances, allusions to your title. Be creative as possible. Try to be funny and intelligent all at the same time. Common titles include “How to”, “Where to” and “Top 10s” as they tend to hit most search engines.

Tips

  • Catch the fish. Be an attention seeker. You must immediately grab someone’s attention by just your title.
  • Be relevant. No matter how unorthodox your title might be, try to stay in line, try to connect the title with the infographics.
  • Be short and quick. The shorter your title gets, the powerful it becomes.
  • Deviate from these tips. Try to be different once in a while.

Here a few inspirations:

Serif vs Sans: the final battle

infographic-10

What The Flux? How The Flux Capacitor Works

infographic-09

How Big Is Your Byte?

how big is your byte

A Day in the Life of a CEO

More inspiring infographics here!

Conclusion

Just like many writing disciplines, doing Infographics involve a great deal of attention to detail. Every bit of information is considered to be vital to the both the design and the content. A disharmony between the two will cause poor facilitation of data and, hence, confusion. In doing this kind of artform, one must consider every aspect of the design. The infographic artist should consider not only what is seen, but also what is learned. He should be aware of  his role to sort out and distribute information. He should know where to place what and when to place it. He should be well versed with research, writing and graphic designing, for these three, after all, are what makes an infographic.

Sponsored post
feedback2020-admin
14:56
you are awesome!
Reposted bysirthomasbolton sirthomasbolton

August 20 2013

14:49

12 Hand Written Fonts for Designers

Advertise here with BSA


There’s something incredibly sweet and almost romantic about using a handwritten font for design projects. Handwritten fonts add an extra ounce of personality, and give me a feeling similar similar to a homemade apple pie from my mother that would be waiting for me when I came home to after school.

There are a variety of decorative fonts and script fonts that are commonly used for design projects like wedding invitations, greeting cards, paper projects, graphic design projects, and web design, but today I wanted to showcase handmade fonts because of their ability to elicit emotions with people. You feel an instant connection with a design that features handmade elements, simply because they are something we, as humans, can relate to. We like things that feel real to us, that we’ve experienced or seen in real life. With advances in technology and the world constantly changing around us, sometimes it’s nice to be reminded of home even if its only in the form of something “handwritten”.

For your inspiration and design use, here are some incredibly unique and versatile handwritten fonts by creative individuals from around the world.

Rouen Bold by Britt Douglas

Britt is a curator of beautiful things, a talented web designer, and creator of unique handwritten fonts. She is constantly working on a variety of creative projects, and has an incredibly cute cat named Winnie.

12 Hand Written Fonts for Designers

Rouen Bold is one of Britt’s latest handwritten fonts available for use by designers and creative people everywhere. It’s a true type font compatible with both mac and windows, includes upper and lower case letters, symbols, and numbers.

12 Hand Written Fonts for Designers

Densen by Matt Hull of Thrift and Thistle

Thrift and Thistle is one of the best places for designers to find resources like creative fonts and high resolution vector files. Matt Hull, the creator and mastermind behind Thrift and Thistle is a talented graphic designer and illustrator based in the UK who has a passion for handcrafted and vintage design resources.

Densen, a beautifully crafted handmade font is perfect for use in both print and web projects, and even comes with a web font kit. This font has a thin ink style to it, and can be used on a daily basis or just for those extra-special projects.

12 Hand Written Fonts for Designers

Nanu by Jagjagvi

Jagjagvi is a Swedish design studio that mainly focuses on handdrawn typefaces and illustrations. Founded in 2008, Jagjagvi transitioned from focusing on a multitude of design types to typefaces, resulting in creative handwritten fonts for designers and creatives to use.

Nanu is a handwritten font where the upper case and lower case letters are the same height, giving the appearance of being in “all caps.” The font comes with a variety of extras and features like ornaments, and is even multilingual.

12 Hand Written Fonts for Designers

Lango by Kemie Guaida of Pixilate

Kemie Guaida is talented designer and illustrator who also specializes in front-end coding. Letters are her passion, and she designs typefaces whenever she can. She created Pixilate as one of her first projects where she offers icon sets and fonts she made for fun.

Lango, is a handwritten typeface created by Kemie that was recently updated (August 2013) to feature better kerning and outlines. This script font is long and lean, and comes in four weights: light, regular, bold, and black.

12 Hand Written Fonts for Designers

Clumsy by Gaslight

Gaslight is a type foundry founded in 2011 and based in Russia. The foundry is a collaboration between three designers: Valery Zaveryaev, Roman Shchyukin and Maria Luarvik.

Clumsy is a fun and awkward handwritten font that is perfect to use for small amounts of text. The font is inspired from an old soviet books features an all-caps style. It’s the perfect font to add a little funky awkwardness to your projects.

12 Hand Written Fonts for Designers

Mabel by Morgana Lamson

Morgana Lamson is an incredibly talented designer and illustrator, and she’s also half of the design team Satchel & Sage with her husband Gerren Lamson. Although based in Austin,TX you’ll frequently find Morgana and her husband traveling the country and showcasing her awesome creations at places like the Renegade Craft Fair.

Mabel is a sweet and merry handwritten typeface created by Morgana for both web and print use. It’s a bold typeface that’s perfect for everything from wedding invitations to web design.

12 Hand Written Fonts for Designers

Lilly by Wander x Wonder

Christine Herrin is a designer born in California and raised in the Philippines, who is passionate about everything handmade and travel. She currently plays around with Illustrator and creates a variety of resources designers can use to enhance their products.

Lilly Marker is a fun and sweet handwritten font that is also incredibly romantic. This typeface has a lot of personality and is definitely girly!

12 Hand Written Fonts for Designers

Mugget by Baseline Fonts

Baseline Fonts, founded by Nathan Williams is a type foundry with a focus on creating types based on disappearing methods of print and type reministic of those found in historical prints.

Mugget is a fun and whimsical handwritten font that is a little bit crazy. This font works well both in bold copy and as a display typeface.

12 Hand Written Fonts for Designers

Honeysuckle by On The Spot Studio

Tiffany Willet, a graphic and logo designer from Kentucky is the creative mind behind On The Spot Studio. An incredibly talented designer that’s known for her intricate custom logo and branding designs, she also creates sweet and unique handwritten typefaces.

Honeysuckle is a fun and fancy hand-lettered font that is a great addition to a multitude of print projects.

12 Hand Written Fonts for Designers

Into the Vortex by Skyhaven Fonts

Skyhaven Fonts are a fun and quirky collection of typefaces by 17 year old Alex Tomlinson. Alex dabbles in creating unique typefaces as well as photography.

Into the Vortex is a thin all-caps typeface that definitely has a darkside. It’s perfect for everything from a horror movie poster to a greeting card.

12 Hand Written Fonts for Designers

Sprout Serif by Lesley Yarbrough

Lesley is a talented community builder based in Denver, CO with a love for beer, bikes, books, design, and travel. During her spare time she dabbles in font creation that is fun and emulates her personal style.

Sprout Serif is a sweet little handwritten font, with a ‘sprouty personality.’ It’s one of my favorite fonts out there and I can’t stop using it.

12 Hand Written Fonts for Designers

Canoe by Angie Makes

Angie Baldelomar is the talented designer and illustrator behind Angie Makes & Co., a design studio specializes in graphic and web design. Angie specialized in creating WordPress themes, fonts, and graphics with a girly touch.

Canoe is an all-caps font that can be used for display and web projects as well as print. It’s a fun and sweet font read to help you make a bold statement.

12 Hand Written Fonts for Designers

13:00

How to Not Suck at Typography Like a Designer-convert Doctor

We probably would all  be savages if printing was not invented. The invention of the Gutenberg movable type has been a very great leap towards the spreading of information from one person to another and from generation to generation. After this momentous invention, greater finds have flourished and soon became what we know now as the software. Of course, without the invention of the movable type, printing would not be invented and all falls into oblivion, including one of the most reliable inventions man has ever made – the Internet.

Whether we admit it or not, the invention of printing is the unofficial father of all technology. Without it, technology would just be limited to mechanical modernization. Software would have probably not existed and the world would be a much gloomier place. Truly, the gallant invention of the Gutenberg movable type saved humanity from the decadence of ignorance.

OLYMPUS DIGITAL CAMERA

gutenber-type-typography02

Photos from kevinmallard.wordpress.com

This is why web designers value the importance of text. Though the print media is considered to be dying, web designers and developers have not put into obscurity the importance of text in spreading information. No matter how forgotten it may seem, words are still the primary means of spreading information. Words still have the power to influence, inform and entertain, which is why the great geeks of the Internet try to maximize the power of texts. They have been attempting to fuse texts with the growing and younger mediums for it to fully utilize its abilities. Hence, typography.

Photo from typographyfall2010.blogspot.com

Smashing Magazine describes typography as the soul of design. It includes the proper selection, juxtaposition and styling of typefaces to produce better effects so it serves its purpose better. It can breathe life to the barren text.  With the booming of the digital era, typography has evolved all the same. Today, the art of beautifying letters include a wide array of topics and real life applications. Typography artists now focus on the communicative aspect of typography, making it more readable, identifiable, sellable and, of course, entertaining. We see typography almost every day in our lives- in the book you’re reading, in the newspaper your seatmate is browsing, in your daily advertisements, in the Internet, in the signs at the street, everywhere. Truly, the importance of typography has gone wider and wider as it evolves in terms of design schemes.

Photo from arena.liva.com.vn

It may be seemingly easy to study typography. Some may say that , ‘It’s just letters; how could difficult that be?’ but as easy as it seems, typography is an art that is very difficult to master. Most designers have hart times perfecting their skills in typography. Some even spend a great deal of money for it and never get better. Yeah, it goes a little frustrating at times, but studying this art form and mastering it is one great opportunity to earn and be known.

Be that as it may, you can never learn typography if you don’t start learning it. And when is the better time to do it than now!

Photo from zonters.com

In my previous post, I gave an overview of the things one should remember when making typographies. It’s fairly enough for someone who knows what to do to know what not to do. But in this case, because typography is a very complex field, the need to discuss the don’ts are very grave.

So what are the don’ts in typography?

Do not use too many typefaces in one page

I’m sure almost everyone has a hundred+ fonts saved in their hard drives; and I bet half of us want to use them right? But let me cut your enthusiasm with this reminder, use minimal typefaces in a page. Having a lot of worthless, different typefaces in a page will suggest an inconsistency in your design style and could give the readers a hard time reading. Just put it this way, you buy all kinds of food in the supermarket, would you eat the all at once in a single munch?

Photo from johnjacob.ca/type

Links that would help

Do not use serif and sans serif fonts interchangeably

Most people tend to interchangeably use Serif and Sans-Serif Fonts. The truth is, doing this might affect the readability of the page. Sans Serif Fonts are usually used for pages that should be seen from afar. These are very readable even from a great distance. Meanwhile, Serif Fonts are used for private-reading activities. That is why most books use serif fonts.

typography-donts06

typography-donts05

Links that could help:

Do not use all caps all the time

WHAT DO YOU FEEL WHEN YOU READ THIS PARTICULAR SENTENCE?

Didn’t you feel congested and annoyed? Caps are used to emphasize important messages in the body of the text. But to type a 100-word typography in all caps, it’s too much. People might think you’re angry or shouting. Remember, not all messages are important. Know the difference.

Photo from thedeviljumpedonmyhead.com

Do not use Comic Sans, Papyrus or Curls MTz as much as possible

Okay. You’re probably wondering why. Let us think of this as in this situation. You’re listening to a song, the song was very good. The lyrics were awesome and the melody is superb. Because you felt the song was really good, you listened to it all week, non-stop. The next week, you hate the song.

This is what happened to these fonts. They became too mainstream. They were repeatedly used and clichéd to a point where everybody is sick and tired of them. Try something new. There are a lot of fonts out there. You won’t be even able to choose from them all.

Photo from modernsoutherner.com

Do not auto-Kern

Kerning is the measure of the spaces between characters. Kerning adjusts individual letters in a typeface and creates a visual appeal in the text.  Photoshop, a tool we love to use in making typographies, is a great program. It has an auto-kerning function but it’s never as accurate as those squiggly balls in your eye sockets. They are way better because sometimes metrical kerning is faulty and produces a mathematically correct but visually distorted type.

Photo from Adrian Colley

Links that could help

Don’t use texts below 10 for the body

Not everyone can literally read between lines. Keep your texts above 10 for them to be easily read. If you’re having trouble because of the large amount of content to be placed in such small space, contemplate if you reduce the text or apply spacing adjustments. Never reduce the font size to 10 below, except if you want the message to be ignored. You’re not making a typography for ants.

Photo from docstoc.com

Links that could help:

Conclusion

A bad typography is as bad as a stale bread. It’s there but you can’t eat it. It’s there but you can’t digest it. The best thing to remember about doing typographies is that the message is superior to everything. The reader must understand the message before anything else.

August 07 2013

09:21

Type & Grids: Free Responsive HTML5 Template


  

Today, we are pleased to introduce Type & Grids, a free responsive HTML5 template by Jeremiah Shoaf. It looks great on all devices, including desktops, laptops, tablets and phones. All of the content resides in a single HTML file, so setting it up is super-simple.

Its extensive customization options set Type & Grids apart from other templates out there. The template has 21 type themes and 29 color themes built in, giving you over 500 unique design combinations. Type theme number 21 is a bonus theme that Jeremiah has created exclusively for Smashing Magazine’s readers — it features the beautiful font Alegreya.

Each type theme is meticulously handcrafted, with attention paid to the smallest typographic details. The 16 thumbnail shape variations and 58 background textures that are included allow for a nearly endless combination of design styles — no two Type & Grids websites will look the same.

typeandgrids_500x450

Type & Grids

Instructions

  1. Download and open the ZIP file.
  2. Edit the only HTML file, index.html, to add your own content.
  3. Mix and match the included type and color CSS files to customize the design. All fonts shown in the demo are included.
  4. Upload your new website to your Web host. Done!

Demo And Downloads

Features

  • The code is clean, semantic and SEO-friendly.
  • It’s coded using the latest HTML5 and CSS3 standards, and all code is W3C-valid and cross-browser compatible.
  • Video is supported. Easily embed your videos from Vimeo or YouTube.
  • Works great for non-portfolio websites as well.
  • Support and documentation are available. (But everything is so simple to set up that you probably won’t need it.)
  • Type & Grids

    Type & Grids

    Type & Grids

    Behind The Design

    Here’s what Jeremiah Shoaf has to say about his thinking behind the design:

    “I created Type & Grids to use for my own design portfolio website. I’m the type of designer who is never happy with the final design, and I will just keep tweaking things forever. I’ll create one color scheme for a website and then get sick of it and create a new variation.

    So, I decided to create “theme” CSS files for each color variation and for each typographic variation. This makes it easy to satisfy my need to constantly change things up. I ended up with 20 type themes and 29 color themes. When I turned Type & Grids into a template, my goal was to make it as simple to set up as possible. Other templates and themes out there seem to pack in so many features that the website ends up feeling bloated and difficult to use.

    I tried to limit the features of Type & Grids to just the bare basics. So, I feel it’s a great solution for someone who wants to set up a simple website quickly. And the design customization options make it easy to make your website look unique and not at all like a template.”

    Thanks for your fantastic work, Jeremiah!

    (al) (ea)


    © The Smashing Editorial for Smashing Magazine, 2013.

August 06 2013

08:54

A Journey Through Beautiful Typography In Web Design


  

First impressions are lasting impressions. Whether you realize it or not, your typography helps to create an experience for users before they’ve even read a word or clicked a button. Typography has the potential to go beyond merely telling a story — it shows the user who is behind the website and what you’re about. The treatment of type creates an atmosphere and elicits a response much the same way as tone of voice does.

You need to ask yourself, what do you want to say and how do you want to say it? Consider the user: What do you want them to feel and experience when the page loads? Typography establishes a mode of communication and, in turn, the personality of the website. The choice of typeface will determine how people respond to your website.

The following websites have very distinct personalities, largely established by the typography. Granted, sometimes they aren’t perfect (unfortunately, performance is often an issue), but they use type to engage the user and generate interest. Good Web typography isn’t just about a beautiful visual treatment, but about speed as well; many designers neglect performance entirely. Please keep in mind that these websites haven’t been tested in old browsers or on mobile devices — that wasn’t the point of this article. Instead, we’ll look closely at interesting treatments and innovative uses of type.

Exquisite Uses Of Type

Matt Luckhurst
This page is colorful and fun. You are greeted with lovely serif letters — and after a bit, you realize that the seemingly randomly scattered letters spell Matt’s name. It’s quite effective how hovering reveals a sample image of each project; it almost jumps out of the letter. The website shows how type can be used as graphic elements and incorporated into a design. The multicolored serif typeface breaks away from the classic, maybe even sober, idea we may have of serifs.

Matt Luckhurst

Playful
Well, this is definitely playful! The tone of the website is set not just by the look of the typeface, but by the way it’s displayed. It breaks the mold of communication. You would usually see axial typography on printed posters, which can be effective. On this website, the font choice isn’t particularly decorative or playful; it’s a rather simple sans serif. A nice touch is the background pattern, which mimics the reading direction and the movement of the user’s head from side to side as they read the text.

This is Playful

Atelier
This website is altogether remarkable. The page has such a dynamic feel, created by the different elements on it. The nameplate is in a bold yet elegant typeface, setting the tone for the design. A sense of movement is established by the diagonal lines, which follow the slant of the “A” in the nameplate, setting the rhythm for the website. The movement of the slideshow of teasers grabs your attention, and the images are large without feeling cramped. However, the main background image of the website is 2560 × 5350 pixels and 2.4 MB — ouch!

Atelier

Cirq
Designed to look like an old poster, this website for a vineyard is quite unique and innovative. The design successfully achieves a vintage feel and translates beautifully as a website. I love how the shadow behind “Russian River” moves with your mouse and creates movement on the otherwise static page. The main drawback here is that, for some reason, the text is embedded as images on the website, preventing it from being copied and pasted. Also, surely a similar design could be created at less than 3.4 MB and 43 HTTP requests.

Cirq

Max Di Capua
The layout and typography here work together in a modular system, often overlapping one another. This approach to layout is refreshing because it isn’t rigid and has a fluidity to it. The typography has the same feel because it is widely spaced, despite being heavy and dense. Captions and descriptions, in an easy-to-read serif typeface, appear alongside the work.

Max Di Capua

Rijksmuseum
The large letters in a custom typeface span the screen and continue off page, making the Rijksmuseum seem larger than life. The home page then rotates through beautiful photographs of the museum’s contents. The main navigation is also rather interesting; when clicked, it slides down for users to select a subcategory. The total size of the home page is 955 KB with 31 HTTP requests — well optimized.

Rijks Museum

I Shot Him
This Web design studio greets you with a photographed welcome message, which is refreshing. The user immediately gets a sense of the physical space that these designers work in. There is a rawness to it, an authenticity. The type is the focal point without being loud or overwhelming. I really like how they have moved away from the perfection of the computer and show themselves as being unique. Although the home page isn’t as interactive as you’d expect, the personality of the design studio is established by the photograph, which has depth and texture.

I Shot Him

The hand-rendered type personalizes the website and sets up an expectation of the kind of work the studio produces. The type treatment throughout the rest of the website reinforces a relaxed yet creative energy, as the wording is short and to the point. Another interesting aspect is the navigation; it’s hidden on the landing page, but hovering over an icon provides access to it. As you scroll down, the navigation is revealed and remains fixed at the top.

Banger’s
This website has a lot of character. Banger’s is a down-to-earth eatery specializing in beer and sausage. Its story looks like it’s drawn on the brown cardboard box that its food is delivered in. The logo looks like a hand-painted sign, unique and imperfect but all the more beautiful for it. The fixed navigation works well as you scroll down, and the hover effect (turning the words red) is simple yet effective. The type contributes a lot to the visual identity, and the graphics are great — but the performance, not so much. A huge downside is that the home page is 7.2 MB, with 254 HTTP requests. Frankly, that’s unacceptable.

Bangers

Caava Design
Caava Design has sans-serif typefaces, which maintains a neat, clean aesthetic. The typeface used for “Good design is good business” is large, easy to read and obvious, and the italicized introduction stands out. The typography throughout is used purposefully and is not necessarily loud, and the written content doesn’t detract from the portfolio.

Caava Design

However, the small text is perhaps too small to be read comfortably, and the spacing in the justified columns is untidy. The contrast in size also discourages the user from reading the entire website. Again, the visuals don’t justify the size: 5.7 MB and 90 HTTP requests.

The Black Sparrow
The Black Sparrow has a vintage look. The wide variety of typefaces all help to establish an eclectic, rustic feel. The theme for this drinkery and lounge is based on the writings of Charles Bukowski, reflected in the literary elements and old typewriter-style logo. I love the navigation bar and how the icons roll over when you hover them. The website has a definite 1930s feel, and the sparrow illustrations support it. However, with the space available, the font size does seem a bit small to be read easily.

The Black Sparrow

Nocturnal
The beautiful slab serif used here is simple, clean, large and easy to read. It is round and widely set, giving the website plenty of breathing room. The simple, neat layout together with the type treatment give a good overall snapshot of the designer’s work. This website works effectively as a design portfolio; while it doesn’t do anything unusual, it focuses heavily on the artist’s work, and sometimes that’s all that is necessary.

Nocturnal

Marie Guillaumet
The handwritten typeface works beautifully by personalizing this portfolio and giving a sense that the designer is physically involved in the production process. A sense of individuality and uniqueness is connected to the designer and, in turn, her work. The handwritten type also works well with the hand-drawn icons, adding character to the website. It’s almost as though we are peering into her visual diary, getting a piece of the designer herself, which will appeal to prospective clients.

Marie Guillaumet

Vintage Hope
The website’s heading looks like it was painted with a thick paintbrush in big heavy strokes. The typeface is so wonderfully bold and expressive. Together with the beautiful photography that fills the background, it gives the user a sense of the openness and freedom that characterize the organization. Vintage Hope raises money for the less fortunate in Malawi by loaning out vintage china, and the visual identity has an excited, happy and positive look to it. And that’s at 1 MB in size and 40 HTTP requests — impressive.

Vintage Hope

Browser Awareness Day
As this page loads, the user is called upon to help make the Web “fun,” “fast” and “safe.” The keyword in each slide is set in decorative type. Creativity is evident in the lettering, which grabs attention, enticing the user to scroll down and learn more. The note on the right has a comic book-style typeface, adding to the playfulness of the website. When you scroll down, the same comic-book typeface is used, along with other playful typefaces.

Browser Awareness Day

Rob Edwards
The typography here is just beautiful. It’s a design piece in itself and sets up an expectation of the designer’s work. The “Hi there” is large and grabs the user’s attention, and the rest of the decorative circus-style typefaces are engaging and fun. You don’t see this every day, and it works effectively as an introduction. The rest of the website feels a bit out of place, though, especially in its spacing and contrast.

Rob Edwards

82nd & Fifth
This website is all about visuals, and the typeface supports that. The sans serif is beautifully simple and light, and the tinted block backgrounds for the captions are sophisticated. With this website, the typeface isn’t the focal point, but rather supports the strong photographs. The website as a whole is quite dynamic; as you scroll down, more thumbnails are loaded. The website also has a seemingly transparent navigation bar; when it’s hovered over, a black bar folds out to reveal the menu. The whole website is thoughtfully constructed to showcase the art pieces. The downside is its 6.4 MB and 120 HTTP requests.

82nd & Fifth

ECC Lighting & Furniture
Love it or hate it, Helvetica takes center stage on this website. The category buttons are big and bold and grab the user’s attention. The graphic design here is classic, clean and minimalist. The type in the navigation is vertically oriented in the top-right, creating an interesting effect, while still allowing the user’s focus to remain on the main category navigation. The way the images are not shown until the area is hovered over is intriguing.

ECC Lighting & Furniture

Marianne Brandt
What do you expect when you hear the name Marianne Brandt, and how would you translate that into a website? Naturally, a Bauhaus-level focus on functionality is key. This website has a definite Bauhaus feel to it, with its flat colors and Futura font. The overall aesthetic is minimalist and clean but definitely not boring or dull.

Marianne Brandt

What grabbed my attention was the “Thanks / Danke” piece, in which the language you’ve set (English or German) determines which word stands out in bold red. It’s such a great idea for websites that support more than one language. The different sections remind me of colored plastic file dividers, a great way to sort through information on a website. The colors, geometry and overall character are consistent with Bauhaus principles.

Nate Navasca
The style and type treatment on this website are perhaps a little more traditional, with a bold sans-serif headline and a serif typeface for the body text. If it ain’t broke, why fix it, right? The designer focuses on functionality and simplicity, and it works well.

Nate Navasca

Ewket
The design here is flat and simple. Created with basic shapes, it looks like the first layer of a painting. Ewket deals with basic education matters in Ethiopia, and the use of Andale Mono for the body text is not exactly what you’d expect, but it works for the purpose. The font is a sharp sans serif that has a bare and basic feel. Ewket is a grassroots program, so the very basic and simple design mirrors its function. However, it isn’t really reflected in performance: 4.6 MB and 58 HTTP requests are unnecessarily large.

Ewket

The Dissolve
I love the nameplate and how it creates an old cinema aesthetic. The typeface has that vintage feel and contrasts with the serifs used in the articles. The website has the simple, clean and sophisticated appeal of an old movie. The navigation makes great use of the space; once the identity of the website is established with the nameplate, the teasers for each category appear in its place as you hover over it.

The Dissolve

The Whig
This dive bar is a place to sit back, relax and have a drink with your buddies. The typeface chosen to illustrate this is Medula One. This sans serif isn’t overly decorative but has a medieval look to it, with its brushed strokes. It’s friendly and not pretentious, hinting at the ambience of the bar.

The Whig

Find & Form
With a clean, monochromatic aesthetic, this website keeps body text to a minimum. The typography is simple and low-key, allowing the images to speak for themselves. The monospaced font is a bit unusual here; still, it communicates the team’s slogan that “The digital world craves old-school craft.” The aesthetic is contemporary. Also interesting is how navigation moves horizontally as you scroll down the page, making room for the rest of the website.

Find&Form

Carrera
There is a timelessness to the design of Carrera’s website, just as there is an authenticity and timelessness to its products. Website design should be consistent with product design. This eyeglass company cites one of its objectives as being to strike a “perfect balance between heritage and fashion.” The simple, bold uppercase type achieves this, having a classic feel without being outdated or overused. The typography is bold and prominent, although different enough that it doesn’t compete with the logo. Also worth mentioning are the interesting hover effects throughout the different sections of the website.

Carrera

Myfelt
The typography used here is friendly and warm, congruent with the products, text and illustrations. All of the elements work together to communicate the same message. One of my favorite things about this website is that the dots in the rugs are incorporated into the logo and nameplate.

Myfelt

Vogue
The Playfair Display font, by designer Claus Eggers Sørensen, sets a bold yet not brash tone. The elegance of this serif is consistent with Vogue’s brand. According to the designer, the typeface is viewed best at larger sizes.

Vogue

All Saints Estate
There are a few ways to achieve class and elegance with type, and this website hits the nail on the head with its blend of serif and lightweight sans serif. Garamond Premier Pro Display has a contemporary yet sophisticated look that is delicate and perfect for body text and appropriate to vineyards and wine.

Vogue

Evening Edition
The blackletter typeface for this nameplate is consistent with the traditional nameplates of print newspapers. It carries authority and gravitas and separates this news source from tabloids.

Evening Edition

Served MCR
This fun doodle-inspired website is for a ping-pong competition. The typography is rough and looks hand-drawn; in some areas, the type is animated or set against an animated background. Animated type is unusual in Web design, but here it grabs the user’s attention. The “Register” banner is an instance of this; the text is legible and prominent. This typography is appropriate because there isn’t much text, which keeps the website easy to use. However, the performance of the page is devastating: 7.5 MB with 175 HTTP requests. The main background image is 2032 × 4761 pixels and 2.2 MB — on both desktop and mobile.

Served MC

Enso
Large, bold, full-caps sans-serif type can get in your face, as if it’s shouting. However, Enso uses muted tones to counter the bold typography — although, yellow is a little difficult to read. The layout is original and interesting; the designers want you to notice the type running down the page and to scroll down to read the entire message. This is a clever tactic because the navigation is scattered around the page in bright pink. The logo at the top acts as a home button, rolling out to reveal the whole word when hovered over.

Enso

Crafting Type
This website is all about type, so the typography has to sell itself. The contrast between the light uppercase type for “Crafting” and the heavy lowercase typeface for “type” creates visual balance in the logo. The body text is large and legible. The serif typeface and simple elegant layout also contribute to the legibility.

Crafting Type

Nautilus
This beautiful website is neat, clean and easy to navigate. The typography works well, with the three fonts coming from the same family. This is a nice way to differentiate your type while maintaining consistency and not disturbing the aesthetic. Unfortunately, Web typography has its cost: 12.6 MB and 73 HTTP requests, with two enormous images, at 3.5 and 2.4 MB, respectively.

Nautilus

Kick My Habits
The thick bold typeface of “Kick My Habits” is the first thing you see on the page. The skinny typeface (named KG How Many Times), with its charming handwritten feel, contrasts with the heaviness of the other type. The website, a beautifully designed and illustrated quiz that figures out how much money you waste on bad habits, has a relaxed, informal tone. And it doesn’t spend much of your bandwidth either. With all of the imagery on the page, it’s just 1.2 MB, although 161 HTTP requests are initialized upon the initial load; more content is loaded on demand.

Kick My Habits

Monocle
Monocle is a beautiful website with a classic quality. It uses serif and sans-serif typefaces in different weights, staying simple and elegant. Monocle is a global news website, with a focus on international affairs, business, culture and design. The layout is innovative, providing everything that the user could need right there. The categories are organized as tabs, with subcategories to further whittle down the information.

Monocle

Rezo Zero
The custom typeface here by Julien Blanchet is unique and grabs attention. It establishes the identity of the brand, setting a mint green against a monochromatic website. The typeface is neither overused nor underused, translating beautifully as a logo.

Rezo-Zero

More Sleep
Neat but friendly and inviting! Those were my first thoughts upon visiting this website. The large type with slightly rounded corners has a friendliness to it. The typewriter-style font used for the descriptions and explanations has a round, soft, welcoming appeal.

More Sleep

Lenta
Lenta is a Russian news website. It’s amazing how the graphic qualities of the type guide you and influence your perception of the website and its contents. The identity of any news website is established by its nameplate. A clean sans serif is used here, with a weight that conveys authority for the news source. The typeface remains effective when the text is translated into other languages. In keeping with a traditional news layout, articles and teasers throughout the website are in a serif typeface.

Lenta

Pixel Recess
Pixel Recess makes use of the sans-serif Adelle Sans, which is neat and legible and looks great on a screen. The more intriguing type, however, is the headline typeface, Zeitgeist, which has a distorted, pixelated, even blurry appearance, reflected in the playground slide in the top-left corner. Pixelation is traditionally regarded as a mistake, but because the rest of the website is sharp, here it draws attention to itself — a clever tactic indeed.

Pixel Recess

Conclusion

It’s not just about what you say, but how you say it, right? Depending on your purpose, try to experiment and get creative with your typography. Be bold and daring with strong, large letters, or get quirky and unique with handwritten type. Keep in mind that type should always be legible, because there’s no point in showing off type that no one can read. Use type wisely. It can do so much for a design if it sets rhythm and creates an atmosphere.

It’s easy to get distracted by beautiful type treatments and large Retina-ready background images. But don’t neglect performance. Custom Web fonts can slow down loading times, so find ways to counteract that.

If you want to explore more interesting websites with a heavy focus on typography, make sure to visit Typewolf and Font in Use.

(al) (ea)


© Shavaughn Haack for Smashing Magazine, 2013.

August 05 2013

13:00

Working with Types: Typography Tutorial for Beginners

In this typography tutorial, I will guide you on how to transform boring texts to your advantage. You will learn how to utilize typography for your website, or even for your print needs. This article will extend from web page design, to printing to graphic images.

They say letters are boring. Unlike videos and music, text is static. It does not move or tickle other senses besides the eyes. Texts are usually placed as information-dissemination tools which convey the detailed message of the media being used. For example, if you upload a YouTube video tutorial, the video is the dynamic medium which will aid the viewer to achieve the goal. On the other hand, the text will provide all the details needed in case something is not clear.

This fact might give you an impression that texts are really boring. But what if they are really not? What if texts, which are used mainly to detail, are used for the design function? How is that possible? Of course, through typography.

Typography has existed for a long time. It originated from a time we all couldn’t remember. Basically, typography is the technique of putting texts or types in an orderly manner to make it visible, attractive and readable. Simply put, typography is the art of working with texts, graphically.

The tutorial is divided into five parts:

  1. Creating Typographies Using Photoshop
  2. Choosing the Perfect Fonts for Every Occasion
  3. Where to Download Fonts (Free and Premium)
  4. How to Consider the Perfect Colors Fit for Your Design
  5. Sample Finished Product on a Website

Type, Design, Publish!

Aside from Adobe Illustrator, Photoshop is also a good software that can help you render good typographies. This is easier and more advantageous to use if you are a web designer. In Photoshop, you could create typographies, render it as pictures, and even layout your own website!
So, what are the things we should know to create Photoshop typographies?
First, you should familiarize yourself with the Type tool. It’s a flexible tool in Photoshop where you could customize the types according to your preference. You can find it in the tool palette of your Photoshop software, or simply press the shortcut ‘T’.
The Type tool has three sub-tools. They are the:

  • Horizontal Type Tool – this sub-tool will enable you to type text as you type normally, from left to write.

typography-tutorial-Horizontal

  • Vertical Type Tool – this sub-tool will enable you to type text from to bottom.

vertical-tool-typography-01

  • Horizontal Type Mask Tool – this sub-tool will enable you to type horizontally in a mask. This can be used if you want to use your Type in picture backgrounds. For example,

Insert the desired picture:

typography-tutorial-original
Use the horizontal Type mask tool and type your chosen word.

typography-tutorial-typetypography-tutorial-koalatype

You will now have the text masked over the main picture (notice the “marching ants” forming the world Koala).

typography-tutorial-marching-ants
Now you can cut the photo and what will remain is the masked area.

typography-tutorial-ctu

  • Vertical Mask Tool – basically the same as the horizontal mask tool. The only difference is the orientation of the type.

typography-tutorial-vertical-mask
One of the things that you should know are the text panels. In Photoshop, there are two text panels that you can find: one is located on top of the window, just below the Menu bar, and the other one is located at the right side of the window.

typography-tutorial-textpaneltop

typography-tutorial-side
The top panel shows the font face, style, size, alignment, color and warping options. The side panel shows the options for font face, style, size, spacing, kerning, leading, horizontal and vertical size, color, and style options.
The font face shows options where you can select from the different installed fonts recognized by Photoshop. Here, you could choose from Impact, Arial, Times or any other installed fonts. The font style shows you customizations for text styles. You could choose from Bold, Italic, Black, Bold Italic or Regular.

The warping option allows you to choose between options and warp your text, Just simply press the button as shown.

typography-tutorial-Capture
typography-tutorial-warp
Spacing shows you the distance between individual letters, kerning allows you to set the horizontal spaces between all selected letters. Leading, on the other hand, allows you to set the vertical spaces between each line.
Horizontal and vertical settings give you the liberty to decide whether your texts will blow up or shrink down horizontally or vertically. This option is different from the font size because the latter changes the size uniformly on both horizontal and vertical axes.

Aside from that, you can also choose whether to bold, italicize, large caps, small caps, subscript, superscript, underline or strike-through texts.

Familiarize yourself with the functions of these tools first before you move on to the next part.

Find the Fount of Fair Fonts!

Of course, as tools for design, typographies should be typed in attractive and suitable fonts. There are a lot of fonts available on the Web to download.

Fonts should be readable yet peculiarly attractive. It should suggest a feeling of belongingness in the typography that you are designing. Of course, using good fonts is as important as designing it. It creates a sense of identification for your site. Because of this, you need to familiarize yourself on its different kinds, forms and uses.

There are seven font categories. They are the most commonly used font types in designing. They are:

1. Old style – old style fonts are considered the parent fonts. They originated from the traditional methods of printing. These fonts are commonly identified through their serifs. Serifs are fonts which have flag-like endings. Also, the fonts in this category are commonly two-stroked, meaning, they are composed of thin and thick parts. They are often used in print output, like newspapers and books or in designs which require formality, credibility and simplicity.

Examples:

  • Times New Roman
  • Garamond
  • Book Antiqua
  • Baskerville Old Face

typography-tutorial-font-oldstyle

2. Modern – modern typefaces are commonly changing according to trends. One font can be modern depending on the pop culture. Commonly, modern fonts are digitally produced, meaning, they don’t have root traces on print fonts. These fonts are commonly used for movie posters, shows, and events.

Examples:

  • Bauhaus 93
  • Avengance
  • CollegiateHeavyOutline

3. Script – script fonts are fonts that have curves and ornaments. They are calligraphic in nature and suggest a theme of elegance, formality or luxury. Commonly used in weddings and other formal and conservative occasions, the script fonts are more evidently elaborate than the design itself.

Examples:

  • Script MT Bold
  • ANGEL TEARS
  • Before the Rain
  • Brush Script Std

4. Decorative – these decorative fonts are very thematic in nature. They are used to imply a very particular occasion or event. Often used in brandings which require recognition and easy memory stamping, decorative fonts can used for designing purposes.

Examples:

  • a dripping marker
  • Confetti Stream Gretoon

5. Sans serif – literally meaning without serif (sans is a French word which means without), Sans serif fonts are fonts that have no flaglike endings. They are commonly plain. These fonts are commonly used in main texts for print output and web texts. They are easy to read but plain.

Examples:

  • Calibri
  • Arial
  • Century Gothic

6. Ornaments – these are fonts that are based on symbols and pictures. They are best used for logos and secret messages.

Examples:

  • Symbol
  • Wingdings

7. Slabs – slabs are wide fonts with slab serifs. Slab serifs are thick horizontal endings placed on letters.

Example:

  • Blackoak Std

slab

Fonts, fonts, fonts everywhere!

The Internet provides us a huge database of downloadable fonts. Websites offer a wide variety of fonts ranging from usage to font categories. The only challenge that remains for us, is to actually look for them.

  • Font Space – this is one of the best sites as they claim to have 21, 043 fonts in their database. You can choose from the popular ones, or you can look for the newly uploaded ones. It’s up to you. Just click the font name or image and download.
  • 1001fonts - this one’s also claiming a thousand fonts. The only difference of this site from fontspace is that you could actually buy premium fonts here.

Other sites: dafont, 1001freefonts, fonts.

Now you’re probably wondering why the hassle to buy premium fonts if there are free downloads? Well, the thing is, there are fonts that aren’t free. Some of them, which are sold by their authors, are originally made. It means that the designs are as exact as you would want them to be. For more info on this, just read our article on fonts.

Are colors only for design?

Coloring can be fatal to a design. Failure to harmonize color to its target market could result into a decline of viewership for a website. Having a good color that is identified to your company or website, is as good as identifying it with the its logo. That is why a lot of websites have brainstormed on how to have the best logo color possible.

Think of Facebook, YouTube, Twitter, Google and Yahoo. Close your eyes and imagine a color when you hear their names. Of course, you would see exactly how they appear on your browser. That is the power of colors. They make you remember the site itself. With the eyes as the primary organ used in browsing the web, colors can help you earn a lot of money and viewers as well.

Think of your website typography. Will it have the same impact on your viewers? Will it stamp the same memory of your website to them? Or would they just forget it because some other website has a cooler way of using it?

According to Kissmetrics.com, 93 percent of people remember the company by their color. Meanwhile, the same research shows that 83 percent of buyers buy an item because of its branding color. Now think, are colors just for design? I guess not.

So, when will you use a certain color?

  • Use yellow when you want to get attention. Yellow, a hot color, is also a neon. It grabs the eyes’ attention. If you want to make them focus on something, use yellow. It is optimistic and youthful. Likewise, when you create positive typographies, use this color.
  • Use red for urgency. Red suggests alertness, energy and importance. Use red when highlighting warnings, emergency drills, or something that should be done ASAP.
  • Use blue for trust. Often, banks use the color blue to ensure that your money is secure and safe. It suggests a stronghold of something that should not worry you. Use it to make your viewers calm and clear-minded.
  • Use green for relaxation. The eye processes green very easily. It could also suggest wealth, nature, beauty and peace..
  • Use orange for calls. A call to action. A call to move. Use it in advocacies, meetings, and other political matters.
  • Use pink for romance and feminism. Pink suggests a touch of a woman to a design. Use this to attract female teen readers.
  • Use black for luxury. Black is an elegant color. Use it for formal occasions, formal occasions and any design that would suggest luxury.

Typography Tutorial: Make a Cool Typography in 10 minutes

Okay. This one’s a good example of a typography with a simple message: It’s alright to commit mistakes. I made this using the concepts I have discussed in the previous parts of the blog. So how did I make it?

typography-tutorial-final
1. Open Photoshop. Create a new file. I used a preset size with a width of 8 inches and height of 10 inches, with 300dpi. You can, of course, change this one to any size you want.

typography-tutorial-1
2. Next, add a new layer. Name it “background”. Double click it to show the LAYER STYLE window.

typography-tutorial-2
3. Go to Gradient Overlay and click on the gradient. A window will open that will let you select the colors you will use. Use the #6dd0f7 and #4aa8cd colors. Make the Style: Radial.

typography-tutorial-3atypography-tutorial-3b

4. Now, we need to do the ribbon design. Go to the Rectangle tool and draw a rectangle. Color it #8393ca.

typography-tutorial-4a
5. Now, create a triangle using the pen tool. You should be able to create a triangle that would look like a flap of the actual ribbon. Color it #6274b2.

typography-tutorial-5
6. Copy the triangle and flip it. Now draw another rectangle using the rectangle tool. Color it #8393ca. Place the rectangles in a manner that they will overlap with the triangle flaps

7. Duplicate the ribbons.

typography-tutorial-6
8. Now type the message on the ribbons. In this case I used the Yellow Peas Demo font. I colored it black. For the center message, I used the Vermin Vibes 2 White and colored it #6274b2.

typography-tutorial-7

typography-tutorial-9
10. Save it as a JPEG file.

typography-tutorial-final

July 15 2013

08:58

Banknotes for the visually impaired

Over the weekend I was reading a review copy of Eric Karjaluoto’s new book, The Design Method. There’s a page where he mentions how Canadian banknotes are printed with a tactile feature in the corner so the visually impaired can easily tell what denomination they’re holding.

Canadian banknote
Image credit: Bank of Canada

Designing currency is a project I’d love to do one day, so I was curious about what other countries do to help those with a visual impairment. Brazil, Thailand, Malawi, and Bahrain use embossing. China’s banknotes are said to include Chinese Braille. Hong Kong followed China’s lead. And all Chilean banknotes have tactile features in one corner.

The Bank of England has this to say about Braille on notes.

“…on the advice of The Royal Institute for the Blind the bank has not included this because very few blind people now read Braille; it is also regarded as a feature that may well wear out over the life of a banknote and therefore only serve to mislead if a tactile feature of this type became incomplete.”

But it does incorporate a few things to help the visually impaired (different-sized notes, with each using different coloured shapes — similar in many ways to the design of euro banknotes).

What about the decline in numbers of those reading Braille?

The New York Times quotes from a 2008 report by the National Federation of the Blind:

“Whereas roughly half of all blind children learned Braille in the 1950s, today that number is as low as 1 in 10.”

Smartphones are cited as just one reason, and where money is concerned there are two free apps — EyeNote (iPhone/iPad) and IDEAL Currency Identifier (Android) — that tell you the denomination when you wave a note in front of the camera (US dollar). The Bank of Japan and the Japanese Finance Ministry are planning to launch a free app that’ll recognise the yen. For $9.99 you can buy the LookTel Money Reader app. It recognises 21 currencies.

Then there’s the Click Pocket Money Brailler that lets you stamp your notes with the relevant Braille number.

Click Pocket Money Brailler

But obviously you’d first need to know what note you’re holding. There are the apps above, and Ottawa-based Brytech manufactures note readers for US and Canadian currencies. For those in the UK, the Royal National Institute of Blind People has advice and sells various products for identifying different banknotes.

In a 2009 ruling that ordered the US Treasury to come up with ways to help the blind recognise different denominations, US district judge James Robertson said that of 180 countries issuing paper currency, only the United States prints bills that are identical in size and colour in all their denominations.

US dollar bill denominations

That prompted design studio Dowling Duncan (now merged with Mucho) to create its own design that would clearly be more helpful to the visually impaired.

US dollar Dowling Duncan
Dowling Duncan’s dollar bill idea

Many people in the US currently use a variety of folds to determine what’s in their wallets, with these ones recommended by the American Foundation for The Blind.

  • Leave $1 bills unfolded
  • Fold $5 bills lengthwise
  • Fold $10 bills by width
  • Fold $20 bills lengthwise and then by width

Two somewhat-related stories I found while reading: If you live in the United States or Canada, chances are you have cocaine in your wallet. The average banknote tested by Oxford University contains 26,000 bacteria. It’s no coincidence that the study was commissioned by MasterCard. Still, interesting.

Identity Designed

Brand identity inspiration on Identity Designed.

July 11 2013

16:50

Dashes, Quotes and Ligatures: Typographic Best Practices

Advertise here with BSA


Typography has become a hot topic, often used referring illustrative typography or custom lettering. At its core, however, typography is simply the skill of setting type. Several centuries ago, this meant composing every paragraph by hand, character by character, before locking it into a form and printing it on a letterpress machine. For much of the 1900s, this meant typing it out on a Linotype or a similar composing machine.

Since the advent of the digital age, nearly all composing has been done digitally. This certainly makes things simpler, but we’ve also lost many typographic sensibilities. Here are a number of items for your consideration that will help you set type better, applicable in both print and web scenarios.

The Principle Of Typography

dashes1

Type is intended for reading. Readability is your primary concern when setting type, and that’s what most of these principles affect. Whether it is the use of dashes, which ligatures are appropriate, or which type of quotes to use, it all comes back to the question of how the text is read.

Maintaining “type color” is important. Type color excludes the spectrum, only dealing with black and white. It is a figure–ground relationship, with “blackness” being the printed portion of the page (or its digital equivalent, in web design).

12_13

To learn more on type color and particularly the negative space and its role in typography, I’d recommend Cyrus Highsmith’s recent book, “Inside Paragraphs”, a foundational book on how text is read, dealing with typography and the thought that goes into individual characters, words, lines and entire paragraphs. For now, let’s get to some specific applications!

Dashes

Dashes remain among the more confusing and sometimes controversial components in typography. It doesn’t help that the dashes we should be using most often are not represented by a key on a standard keyboard! There are three types of dashes that we use often: the en dash, the em dash, and the figure dash. The mathematical symbol for minus and the hyphen are separate characters.

typesofdashes

The em dash is equal in width to—you guessed it—one em in any given typeface. An em is equal in width to the point size of a typeface, traditionally named because the capital ‘M’ was often one em wide in older typefaces. For a number of reasons that isn’t always true anymore, but the name remains.

The en dash was traditionally half the width of an em, but that is more of a guideline than a rule, and en dashes vary in length quite a bit. The figure dash, which is not as commonly used, is the width of a numerical character, which in most normal fonts as well as monospaced fonts, are all the same width.

En Dash Or Em Dash? The Controversy

One of the most common uses of dashes is to denote a break in thought, similar to parentheses. There is however, heated discussion over which method to use. Some style books, such as The Chicago Manual of Style and The Oxford Style Guide recommend using an em dash—like this—with no spaces around it. Robert Bringhurst’s Elements of Typographic Style, on the other hand, recommends a padded en dash – an en dash with a space on either side – like this.

emvsen

Many people have different opinions on what reads better and maintains a more even type color. Often a typographer will choose depending on the typeface being used, as some typefaces have an over-long em dash. Weigh the arguments, test both alternatives, and use what seems appropriate in the typeface you’re using! Some considerations depend on the language you’re typesetting as well. German uses the padded en dash almost exclusively, while Russian favors the em dash.

The Em Dash Elsewhere

emdash2

The em dash is also used to end a sentence mid-thought without usual punctuation, in dialogue, a similar effect as an ellipsis, although again it implies a stronger break in thought. When citing the author of a quote, use the em dash between the quote and the name of the author. It is also occasionally used in lieu of quotation marks to mark the beginning of quoted text, but this is an archaic method.

The En Dash Elsewhere

endash2

The en dash has a broader usage. When there is a range of values, or something similar, it is correct to use an en dash (rather than a hyphen) to connect the two, such as describing a range of dates or a series of pages (January–March, pp. 10–12). It’s also used in such instances as a relationship (father–son), in demonstrating a contrast (58%–42% vote, a 4-2 score).

The Figure Dash

The figure dash, a third type of true dash that is equal to the width of a given typeface’s digits, is not commonly used, and indeed not always available in a font. Its correct use is in a series of numbers, such as in a phone number, in which it would be used (rather than a hyphen) to separate the digits.

The Hyphen And Minus Sign

hyphenminus

Hyphens and minus signs are not true dashes. While dashes are completely horizontal, the hyphen often has a slight angle to mimic the stroke of a pen by a right-handed writer. It has a number of common uses. A hyphen connects compound words (e.g. egg-beater), and can also connect words in order to clarify meanings (e.g. “the man-eating sandwiches” versus “the man eating sandwiches”). Words are also hyphenated when they are split at the end of a line (see below).

A minus sign is exclusively used in mathematics. It’s longer than a hyphen, being closer in length to the en dash. As there are no standard shortcuts for typing a minus symbol and it must be inserted from the character set manually, most people simply substitute a hyphen or en dash.

Standard Shortcuts For Dashes

shortcutsdashes

Quotes

Quotes are perhaps a little more intuitive than the dashes. It’s easy to note when a person isn’t using “smart quotes”. The quotes should always point inwards. However, as you may have noticed, the correct quote glyphs are not represented on a keyboard. Instead, there are only straight quotes. If you’re typing in Microsoft Word or a similar word-processing program, it will correct the quotes for you automatically. However, if you’re typing a blog post or a piece intended to be printed, make sure you include the smart quotes. Single quotes are generally used for a quote within a quote, like this: “He told me not to ‘walk too near the edge’ or I’d fall off.”

The apostrophe is another often-misused glyph. It is essentially a closing single quote, but is used to indicate possession (John’s book), or to indicate a contraction (that’s, it’s). The apostrophe always points to the left. Where we see it often misused is when the software you’re typing tries to make it a “smart quote”, thus pointing the wrong direction, in abbreviations such as ’90s.

Other Common Quote Types

No matter which language you speak, it’s worth your while to be familiar with quotes used in multiple languages. Here are a few of the most common. Guillemets are used extensively, indicating quotes in dozens of languages, including German, Russian and French. Another common way to introduce a quote is the use of a padded en dash at the beginning of the line, or occasionally an em dash.

Sometimes people will mix and match, resulting in interesting discussions for editors and typographers!

Typing The Right Quotes

Since these characters aren’t represented by a key on the standard English keyboard, here’s a table of the common shortcuts for using these marks.

shortcutsquotes

Ligatures

Let’s face it – we all love ligatures. Perhaps we love them a little too much. They’re fun, unusual, and add a little interest to the type we use. With the advent of web fonts and broadening support across browsers, we’ve had even more opportunities to show off our typographic skills. However, there are a few rules about ligatures that we should consider in order to uphold the cardinal rule of typography – readability.

Ligatures are primarily intended to improve legibility, combining awkward character combinations into a single glyph, such as fi, ffl, or Th. These actually improve the flow of the text, aiding the eye in scanning the line by removing awkward visual tension or gaps.

standardligs

Others, however, are called “discretionary ligatures”, due to the fact that they don’t have a place in body text. These include the ct and st ligatures. They look cool (as all ligatures do!), but they disrupt the reading and are more of a distraction than an aid to legibility. These are better off used only in headlines, where they can be eye-catching and draw attention to the headline, serving a completely different purpose than that of a standard ligature smoothing out an awkward spot in a paragraph.

Some typefaces have deliberately over-the-top ligatures for display type, such as this sample of Magneta. I have to admit, these are quite cool, but also should be used very sparingly. They’re an aesthetic decision over legibility, and therefore should only be used when legibility is not a concern (i.e., if the type size is massive).

ligatures1

Some characters that look like ligatures are actually a unique character, such as æ or œ. They often originated as a ligature, but shouldn’t be treated as one today. The Latin “W” began this way, as a combination of two Vs, but now it is a unique character, and if there were a word with two Vs or Us we wouldn’t replace them with a W.

Closing Remarks

So there you have it! Those are the basic rules and guidelines relating to dashes, quotes and ligatures. Things can get much more complex than that, but if you stick with the material in this article you’ll be in good standing.

Some of you are probably thinking, “why should we worry about all of this? Is it necessary to worry about em dashes, en dashes, hyphens and minus signs, when they all look so similar?” The answer is, unequivocally, yes! For one thing, harking back to the principle rule of typography, using these features thoughtfully and correctly makes a huge impact on readability. Also, setting type correctly, with attention to detail, lends an entirely new level of professionalism to your typography, whether on the web or for print.

So, next time you are digitally setting type for a brochure, a book, or a blog post, take the extra time to make sure you’re using these typographic features correctly! Your readers will thank you for it, whether they know it or not!


Advertise here with BSA

Tags: Typography

June 19 2013

14:11

Making Sense Of Type Classification (Part 2)


  

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.

June 12 2013

14:08

Apple reminds us: Simplicity is hard

Apple’s iOS7 is a great indicator that simplicity is hard. If you’re befuddled by that statement, check out these designers reactions complaints. Now that we’re caught up…

While I certainly made a few jabs on Twitter, my initial reaction was purely based around, what I feel is, “amateur” design. I could care less about flat or skeuomorphic, neon or dull, rounded versus squared off. Those are aesthetic choices for the most part. Label it as you wish. Apple’s decision making reduced the extra noise surrounding iOS. Noise that at one point helped the non-technical folk better understand a new type of interface. iOS7 shows progression. Good on you Apple and any other product / site that does the same. The problem with iOS7 design flaws mostly lie in the backbone of great design: typography, contrast, spacial relationships, and continuity. Mark Boulton tweeted:

“One thing is true. When you remove the noise, your typography had better be good. Because it’s the foundation. It’s the thing.”

Nailed it. When you remove the clutter you’re standing face to face with what makes great design great. And we’ve come to only expect great from Apple. Not amateurish oversights. While I’m surprised to see Apple ship something that was not even a tad more refined, hopefully many of these issues will be addressed as iOS7 matures.

Beyond iOS7 and Apple directly, iOS7 is a great reminder to designers and clients that simplicity is hard. Users and clients hiring design services: you’re viewing the backbone of design and understand what makes great design great (or not so great). Something to think about the next time an email is written with something similar to “shouldn’t take too much time… we just need something simple.” Refinement takes time. Typography isn’t about which typeface looks great, rather which works great. Contrast and spacing help to not only to see more clear, but plays a role in tension and disconnect.

Hopefully, it also reminds us designers, at all skill levels, to refine and revisit our understanding of the important elements of design. Now that we have less time searching for the perfect texture, we have plenty of time to revisit our design principles forefathers.

Now where’s my copy of The Elements of Typographic Style?

May 17 2013

15:21

May 07 2013

16:44

Creative Examples Of Typography In Print Advertisements

Inspiration can come from any source as there is no limit. For today’s round up what we have gathered for your inspiration is the examples of some typefaces in different print ads that turned out to be too well that they grab the attention on the first glance. We have already talked about the typography too much, and every one of us is quite familiar with the importance of typography and the use of right fonts for the designs. Therefore, we straightly move to the inspirational print ads that demonstrate creative use of font.

So without any further ado, here we are presenting the complete list of visually appealing print ads for your inspiration. These print ads are the real proof that with the help of fonts, you can get the attention of your target audience as well and can create an impressive visual impact. We hope you enjoy this list. Enjoy!

WMF Knives: Apple

Cultura Inglesa: House

Cultura Inglesa: Soccer

Adobo Magazine: Haagen Dazs

Energia School: Solid Foundation, E=mc2

Aasra Suicide Prevention Helpline: Depression

Jung von Matt: Anatomy of a great idea

Smarties Campaign

 

Webber Wentzel Attorneys: Boxer

Voyages-Sncf.com: Other time

Batelco: Let it all out, English

Chevrolet Summer

Barclays: Dorian Grey

Chupa Chups: Lollypops, 3

Inlingua – Business English

Pisces sea food restaurant: Two

Prudential bring your challenges

Brighton Language School: Espanol

Harley Davidson Nightster: Horsemen

pak-n-stor: Bedrooms

Department For Communities & Local Government: Watch

The Wayside Chapel: Sausage Pill

Christchurch Women’s Refuge: Tunnels, 2

New York Lottery: Cash Blast, 4

Australian Mushroom Growers Association: Body

Bayer Aspirin & Cafiaspirin: We need to talk

Home Safety Action Week: Moss

Defensoria del pueblo: Balloon

Greenpeace: Squirrels

The Knit Cafe: Hug

Bratislava Zoo: Leopard

April 17 2013

12:42

Complex, Yet Simple: Making Sense Of Type Classification (Part 1)


  

In my previous article on Smashing Magazine (“Understanding the Difference Between Typography and Lettering”), I wrote about how understanding type terminology can help us better appreciate the arts of typography and lettering. This article again deals with terminology, probably more specifically than most designers are used to, and the title gets to the heart of what I’m communicating in this article.

Everyone knows their serifs and sans, slabs and scripts, but most classifications go much deeper than that. Type classification, while helpful, is often convoluted, confusing and even controversial. This article, distilling some of the complexities into a more understandable format, lands somewhere in the middle between the basics and genuine type nerdery — the perfect level for a practicing designer.

Making Sense of Type Classification

Why Classify Type?

There’s a certain intellectual delight in knowledge, particularly knowledge about one’s field of work and study. More importantly, perhaps, there is a way in which seemingly impractical knowledge of one’s profession lends more credence to the designer. That being said, what you’ll read here is by no means impractical. It really comes down to solid design choices.

Artist-14-opt
Sets film in 1920′s uses typeface from 1975.

A good grasp of type history will help you avoid typographic anachronisms, which, although often lost on the general public, do not escape the notice of many designers, as demonstrated in Mark Simonson’s article on the 2012 Oscar winner for Best Picture, “The Artist,” and his other typographic scrutinies of popular movies and media.

It’s not exclusively about the history of type, however. Type classification is also helpful in pairing typefaces for projects, sometimes based on historical proximity but also by noting similar features that unify the typefaces, such as axis or x-height. In some cases, by finding enough disparity in the small features, very different typefaces become complementary.

Most importantly, perhaps, this article will not only familiarize you with general type history and commonly used terminology, but also help you learn to look for and recognize important characteristics of type and the inexhaustible minutiae that make typefaces unique, as well as arm you with useful descriptors of type styles.

Type Classification Systems

Over the past century, quite a few classification systems have been proposed. Most are generally believed to be subjective and incomplete, and many of them use the same terms for similar but slightly different classes. The impossibility of a truly complete classification system has led many people to dismiss any attempt to classify typefaces — there are simply too many variables to make anything close to a practical, comprehensive system. Essentially, classification describes typefaces; it does not define them. It’s not inflexible, and is more of an aid than a rule. However, for the reasons given above, I believe there is value to be found in it. Below are a few examples.

The primary “official” classification system currently is the Vox-ATypI system. Originally put together in 1954 by Maxmilien Vox, it was adopted in 1962 by the Association Typographique Internationale (ATypI), which made a minor change at the 2010 conference (appropriately, held in Dublin) to include Gaelic as an extra category. It classifies typefaces in 11 general categories, with some subdivision. Its Wikipedia article provides an excellent overview.

The British Standards Classification of Typefaces, adopted in 1967, is also based on Vox’s original classification. It is slightly simplified and has remained essentially unchanged since its adoption.

Bringhurst, in his Elements of Typographic Style — perhaps the standard in typographic textbooks today — categorizes typefaces loosely after periods of art history; for example, Baroque, Rococo, Romantic, etc. A book designer himself, Bringhurst focuses on text typefaces and practically ignores display type.

Others are much more general. An early system by French typographer Francis Thibaudeau, which provided the base for Vox’s later more thorough classification, includes four broad categories: Antiques (sans serifs), Égyptiennes (slab serifs), Didots and Elzévirs (faces with triangular serifs).

Gerrit Noordzij, while at the Royal Academy of Fine Arts in the Hague, held that typography was essentially an extension of handwriting, teaching typography using loose categories of letters that might be written with a broad-nib or pointed-nib pen, as well as interrupted or uninterrupted strokes, with varieties of both serifs and sans falling into each category.

These are just a few of the ways people have classified type over the years. In this two-part article, I will condense the various methods slightly and present what is at the very least generally accepted as legitimate (as there will always be a few out there who refuse to give up a particularly unusual classification method, or who decry any method at all).

Classifying Serif Typefaces

In part 1 here, we’ll cover serif styles, following the natural progression of type history, and thus move into sans and other categories in part 2.

Humanist

Starting off, naturally, at the beginning of type history, we’re in the middle 1400s, during the Renaissance. The movement, led by Italian cultural hubs such as Florence and Venice, was drawing Europe away from medieval practices, and typography was one part of that. Rather than using the blackletter, or Fraktur type, that Gutenberg used, printers began to create type mimicking the Latin writing hand of the philosophers and scribes of the time, beginning around 1465.

Renaissance Printing
A 1905 textbook illustration of Renaissance printers

These typefaces are variously called Humanist or Venetian due to the zeitgeist and geography of the Renaissance. A number of distinct characteristics define Humanist typefaces.

Primarily, Humanist faces were very calligraphic in nature, and one way this manifested itself was in the strong axis, most apparent in the bowls of characters and the lowercase “o,” a characteristic borrowed from the angle at which a right-handed writer holds a pen. Another interesting way this showed itself was in the notably angled crossbar on the lowercase “e.” Other calligraphic influences are clear, such as inconsistencies in stroke weight and the way serifs are formed.

Other defining characteristics include a small x-height and a lower contrast between thick and thin strokes.

Venetian Typeface Characteristics

Not all Humanist typefaces are from the Renaissance era, however; many Humanist revivals have been created in more recent years, such as Centaur (1914) and Adobe Jenson (1996). Adobe Jenson, used in the specimen above, is based on the work of Renaissance printer Nicolas Jenson, a prominent printer and type designer who moved from his native France to Venice and contributed significantly to print and design history. There are even Humanist sans faces, but we’ll get to those in part 2. Although an influential period in type history, the Humanist era served primarily as a transition to newer styles of typefaces and was relatively brief.

Other examples of Humanist typefaces include Guardi, Arno, ITC Berkeley and Stempel Schneidler.

Garalde

In the Old-Style faces, often called Garaldes, we see type really beginning to come into its own. I call them Garaldes here because the term “Old Style” is at times used to include Humanist, Garalde and Transitional typefaces; simply calling this group “Garalde” helps to retain its identity.

Aldus Manutius and Claude Garamont
Aldus Manutius and Claude Garamont

This period in type history lasts from the late-15th century all the way until the early 1700s, and the type created in this period has shown remarkable longevity. “Garalde” itself is a hybrid term borrowed from the names of two notable type designers of the era, French punchcutter Claude Garamont and the Venetian Aldus Manutius. The category is occasionally called “Aldine” after Manutius.

There are many similarities to the Humanist faces, but things are moving in a particular direction, as we’ll see with the consecutive categories of Transitional and Didone. You can see the type designers treating type as different from the written word, losing some of the idiosyncrasies of handwriting that the Humanist designers retained, while carrying over others. The axis of the stress straightens, and while it still has an angle, it is subtler. The serifs become more carefully formed, and characters are designed more proportionately. One of the most obvious differences is the crossbar of the lowercase “e,” which, while remaining angled in the Humanist typefaces, drops to a horizontal position in the Garaldes. Also, the difference between heavy and light stroke weights increased, and everything became more precise, perhaps due to the progress in technical aspects of making type.

Old Style Typeface Characteristics

A huge amount of type was created in this era, and much of it is commonly used today, either digitized versions or new revivals. Common examples of the Garalde faces include Caslon, Sabon, Palatino, Galliard and Janson — not to be confused with Jenson, the Humanist typeface. In fact, Janson, named after Dutch punchcutter Anton Janson, is now thought to be the work of Miklós Kis, a Hungarian, produced during an apprenticeship in Amsterdam.

Transitional

Work was begun on the first Transitional typeface in 1692, long before people had left behind making Garaldes. In fact, William Caslon was creating typefaces based on Old-Style Dutch type as late as the 1720s. Because this part of type history is also significant, many have asserted that “Transitional” is an inadequate name for it, and this category may also be termed Neoclassical or Realist.

Louis XIV and the Romain du Roi
Louis XIV and the Romain du Roi

In the late-17th century, Louis XIV, as part of a general renovation of France’s Imprimerie Royale (the governmental printing works), commissioned the French Academy of Sciences to create a new typeface. The Romain du Roi — literally the “King’s Roman” — was designed using a strict grid, and its development was an arduous process, involving a committee that included a mathematician and an engineer. Although commissioned in 1692, the entire family of 86 fonts was not completed until 1745.

Baskerville and Fournier
John Baskerville (left) and Pierre Simon Fournier (right)

Two of the biggest names in type during this period were John Baskerville and Pierre Simon Fournier. Baskerville, an entrepreneur who dabbled in multiple businesses, developed quite an interest in printing and eventually designed his own type in order to improve on Caslon’s work. This did not please most of the printing world at the time, and Baskerville endured harsh criticism, despite having such luminaries as Benjamin Franklin as friends and advocates of his work. You may have read of the humorous encounter in which Franklin outwitted a critic of Baskerville. Numerous revivals, both metal and digital type, that draw on Baskerville have been made.

Fournier was among the printers who praised Baskerville’s type, reserving particularly high compliments for his italics. Fournier was highly respected in his lifetime, and despite having consulted royalty both within France and internationally on type design and having established printing houses, Fournier is primarily remembered today for introducing the point system as a way to measure type sizes. Pierre Fournier, uncannily sharing a name with an acclaimed 20th-century cellist, also had an interest in music and developed a new style of typography for musical notation.

Transitional Type Characteristics

In the Transitionals (or Neoclassicals), we see certain trends continuing. The axis is now nearly, if not completely, vertical. The weight difference between the thickest and thinnest points is now exaggerated. The serifs are less bracketed and flatten out. Details become very refined.

Eric Gill’s Joanna, Melior, Clearface and Mrs. Eaves — a Baskerville revival named after Sarah Eaves, Baskerville’s wife — all fall into this category.

Didone

As strange as it seems, what we call modern typefaces first appeared in the second half of the 1700s. Therefore, I will call them by their less absurd name — and who can argue that saying “Didone” is not more fun than saying simply “Modern”? Bringhurst terms them Romantics.

Through the 18th and 19th centuries, France witnessed a small printing dynasty in the Didot family. Over multiple generations, the family made major contributions to printing. One of the most remarkable members was Firmin Didot, who, with Giambattista Bodoni, ushered in and now acts as a namesake for this part of type history.

F. Didot and G. Bodoni
Firmin Didot (left) and Giambattista Bodoni (right)

In large part inspired by Baskerville, Didot and Bodoni pushed the limits of type design. They explored a similar style and were both meticulous craftsmen, consequently igniting a fierce rivalry. Bodoni (1740–1813) gave himself entirely to his craft. He was renowned for the beauty of his type specimens, and, a technically brilliant punchcutter himself, he designed some 298 typefaces. Didot (1764–1836), on the other hand, retired in 1827 to pursue political office and literature in his later years, writing tragedies and literary critiques.

If Baskerville’s stroke contrast was exaggerated, then the Didones’ are in the extreme. The heavy strokes are very heavy, and the light are a hairline. The stress is again completely vertical, and the apertures — places where the character opens — are generally very tight. Combined, these make for a very awkward visual rhythm, and Didones are always a poor choice for chunks of text. Rather, they work best at large sizes, as titling and display type, because the features emphasize the elegance of individual characters and do not blend well. Adobe’s New Caledonia, which softens some extremes and thus works for longer bits of text, is a possible exception.

Didone Characteristics

Aside from the obvious Bodoni and Didot faces, in their dozens of variants from nearly every foundry, Basilia, Aviano, Walbaum, Ambroise and Scotch Roman are exemplary moderns.

Slab Serif

Slab Serif Characteristics

This article wouldn’t be complete without a mention of slab serifs. These are among the easiest to identify because of their very obvious appearance. Originally created for advertising, posters and other large media, slab serifs, alternatively called “Mechanicals” (in VOX-ATypI) and “Égyptiennes” (by Thibaudeau), were the first types expressly designed as display type. Vincent Figgins is credited with the first slab serifs, the earliest specimen dating to 1815, and his work inspired a diversity of critiques variously commending and lambasting the new style.

Abrupt serifs, usually in heavy weights, and a no-nonsense attitude are the trademarks of this style.

Clarendon characteristics

Clarendons, a notable offshoot of the original slab serifs, are a slightly tamed slab style, often in less extreme weights and using bracketed serifs. They have a lighter, friendlier character than the Neo-Grotesque slabs (i.e. those with unbracketed serifs and geometric construction).

H&FJ’s Sentinel (2009) and David Berlow’s Belizio (1998) are examples of recent Clarendons.

And That’s It… For Now

If you have made it this far in the article, congratulations! You are now in possession of a solid basic understanding of type classification, at least as far as serif typefaces take you, and you are able to recognize the important distinguishing features that make typefaces unique. Following the line of type history, we’re now in the middle of the 19th century, and we have the entirety of sans serifs and some discussion of display faces ahead of us. We’re really only halfway through, so if you’ve enjoyed it, you can look forward to part 2!

For now, here’s a little exercise to test your comprehension of what we’ve covered in this article so far. Take a look at these specimens and comment on how you’d classify them. Keep in mind that classification is an aid, rather than a hard and fast system, so don’t be shy — let us know where you’d place these typefaces!

Typography Test Specimen

Identify each typeface by its number (1 to 6) if you are classifying it in the comments. Extra points if you can identify the individual typefaces! I’ll be joining the discussion with the answers later, although I am sure you’ll have figured them out soon.

(al)


© Joseph Alessio for Smashing Magazine, 2013.

April 09 2013

15:26

Fontfabric free fonts

If you’ve worked with free fonts, you’ll know that they generally need care and attention. From time to time you might find a corker, and I like the look of some of these.

The Kabel has a few lovely application shots, like this one…

The Kabel font

Not that I’m religious, or having a bad day. Nice though.

Not to be confused with Rudolph Koch’s Kabel type family from the 1920s, the one above was created by Mathias Nösel who clearly has a skill for Photoshop mockups (see the video below). Mathias was inspired by the superb typographic work of Buenos Aires-born designer Pablo Alfieri.

You can see what other free fonts are available on the Fontfabric website.

Identity Designed

Brand identity inspiration on Identity Designed.

Related posts worth a look

February 19 2013

17:26

BLOKK WORDS

Two Three free fonts as alternatives to lipsum.com.

BLOKK, “for quick mock-ups and wireframing for clients who do not understand Latin.” Via loads.

BLOKK font

WORDS, same, by @letterror, via @JasonTiernan.

WORDS font

Update: 21 February 2013
A third freebie, along very similar lines, is the Redacted font, by Christian Naths.


Identity Designed

Brand identity inspiration on Identity Designed.

Related posts worth a look

November 30 2012

04:49

33 Fresh Business Cards

The first impression is always very important and quite often crucial when dealing with customers. Displaying your company or personal identity in a properly and creative fashion might be the difference between potential and real clients. Below I have gathered a small collection of 33 Business Cards that captured my attention with their style, colors and effectiveness.

Penn

Grebban

MuscleFire

Nobtaka Nukui

Renhand

Angelis

Ross

Color-Blossom

Mediastudio

Fitwise Training

Mile Deep Films & Television

formgarten

Vladislav Malkovick

Pivotshare

Sommelier

The Argonaut Hotel

Nili Studios

Emporium Pies

Grit Creative Co.

Darlene Dewell

Möbeldesign

Mackey Saturday

Joonas Paloheimo

Privax

Bright Edge Painting

Webshocker

Contreforme

Strahlend

Milky

Radity

Olivier Pineda

iPhone

Business Cards 2012

Which were your favorite business cards and why? Tell us in the comments below.

August 28 2012

10:23

Idler, a modular typeface family by Lamesville

This one’s appeared on lots of blogs, but it’s a new one for me (via Chris Glass’s Stellar).

Idler is a modular typeface family by Lamesville, aka, Mark Butchko.

“Idler’s two “main” weights (Idler Detail and Idler Plain) can be used effectively as single colored layers on their own, but the typeface’s true potential is realized when the user layers the “shaded” weights along with the main weights to create a colorful 3D shading effect. The Idler family contains six weights all together: Idler Detail, Idler Plain, Idler Inner, Idler Highlight, Idler Shadow, and Idler Solid.”

Mark is currently employed as senior designer at Chicago-based Optimus. When not working on his latest font designs, you can find Mark spending quality time with his young son Julien, teaching him valuable life lessons like knowing the difference between a glyph and a ligature.

Idler is available to buy through HypeForType and YouWorkForThem.

You’ll find some nice typography inspiration on Mark’s Tumblr blog, too.

Identity Designed

Brand identity inspiration on Identity Designed.

Related posts worth a look

Tags: Typography

August 09 2012

07:25

3D Text Effects: Ultimate Collection of Photoshop Tutorials


  

Typography is not just about the arrangement and placement of letters and words, rather it has become a field of art where artists can express themselves solely through the use of different styles of fonts with varying sizes. Typography has continued to expand as an art, though one must always heed the design principles behind it. Then one finds themselves freer to explore the more artistic sides of this element.

Many designers make use of Photoshop to generate some stunning text effects that bring their typography to life or to make their text more down-to-earth. In this round up, we have compiled an exciting collection of more than 40 brilliantly dazzling 3D text effects Photoshop tutorials with a little help from Illustrator. Enjoy!

3D Text Effects

3D Type with Repoussé in Photoshop CS5 Extended
In this tutorial you will learn how to create some stylish 3D Type with Repousse via the talented crew at Abduzeedo.

Screenshot

Create Glossy, Plastic, 3D Text in Photoshop CS5 Extended
This tutorial will explain how to use Repoussé inside Photoshop CS5 to create an amazing 3D text effect without the need for any other 3D software. Many different material values will be modified to accomplish the final result, and some adjustment layers will be used to enhance the outcome as well. Let’s get started!

Screenshot

3D Ribbon Wrapped Text Effect
This tutorial will explain how to use the Opacity texture map to create a ribbon-wrapped 3D text effect in a Photoshop CS5 environment. Then, it will explain how to create the confetti brush and its layer styles.

Screenshot

Create a Realistic Wooden 3D Text Image
There is a lot of typography-based artwork recently with more people getting their hands on 3D programs. However, creating 3D text with just Photoshop takes a certain amount of craftsmanship and skill. Leaving all the little details in your hands instead of letting the computer do all the work. So, in this tutorial we are going to take a few 2D textures as well as a few Photoshop techniques to create a realistic 3D text image.

Screenshot

Create a Tasty 3D Typographic Illustration
In this tutorial, author Mark Mayers will show you how Photoshop CS6 Extended’s new 3D tools can be utilized to create a typographic illustration that includes lots of sugary treats.

Screenshot

How to Create Glowing TRON-Inspired 3D Text in Photoshop Extended
Create glowing 3D text and beautiful effects using only non-destructive Photoshop techniques. This tutorial will show you how to create 3D text, give it a futuristic blue glow, and finish it off with a modern bokeh and grid background. There are also a few really cool Photoshop tricks scattered in this tutorial.

Screenshot

Create 3D Style Lettering
In this tutorial, Marcelo Schultz will explain how to create “awesome” 3D-style typography using illustrative techniques in Photoshop. This tutorial does not utilize any 3D apps or tools and relies heavily on a good sketch as well as your ability to apply proper light and shadow.

Screenshot

Colorful Plexi Text Effect using Photoshop
In this Awesome Photoshop tutorial, we are going to show you how to create a cool looking colorful Plexi text effect. Throughout this tutorial we’ll create letters separately, getting some help from the Actions. Have Fun.

Screenshot

How to Create High Quality Metal 3D Text
This tutorial will show you how to create the 3D text shape and give it a high quality metal look using pure Photoshop. Check it out!

Screenshot

Create Awesome Text Made of 3D Blocks
In this Awesome Photoshop tutorial, we are showing you how to create a cool 3D effect. We’ll create a 3D object from a 2D depth map texture first and then create diffuse and self illumination textures. You will need Adobe Photoshop CS4 Extended for this one. Have fun.

Screenshot

Create Convincing Text-Shaped Buildings
Creating convincing buildings that appear like text in a cityscape can be a challenging task. In this tutorial we will learn how to create building-shaped typography in Photoshop using photos that you have taken yourself. Let’s get started!

Screenshot

Cool Dots Text Effect
This Photoshop tutorial explains how to design a three-dimensional text, which consists of dots and a blurred extension.

Screenshot

Create Earthy 3D Typography
In this tutorial, author Ed Lopez will demonstrate how to create an earthy 3D typographic piece using Photoshop’s 3D tools.

Screenshot

Create a Spectacular Style Text Effect
In this tutorial we’ll create a cool looking 3D Style text effect that will come in handy for any number of projects.

Screenshot

Create Super Glossy 3D Typography
In this tutorial we will demonstrate how to create a glossy 3D typographic image using both Photoshop and Illustrator.

Screenshot

Unique 3D Text
In this tutorial you will learn how to create a unique 3d text effect. Definitely one you will be wanting to dive in to.

Screenshot

Use Google Sketchup and Photoshop to Create 3D Typography
Photoshop is a powerful application on its own merits. Its power, however, can be significantly increased by using it in tandem with another application like Illustrator, Cinema 4D, or in this case, Google Sketchup. Today, we will create some cool 3D text using this free architectural application.

Screenshot

Create Elegant, Glassy, 3D Typography
In this tutorial, we will demonstrate how to create elegant, glassy, 3D typography using Photoshop and Illustrator. Feel free to apply this effect to any logo, text, or shape. Let’s get started!

Screenshot

3D Layered Text Effect
In this Awesome Photoshop tutorial, you’ll learn how to create a 3D text effect using actions, basic transform operations and filters. This is an intermediate level, approximately 2 cups of coffee long tutorial.

Screenshot

Create an Extruded Glossy 3D Text Effect
People love 3D effects. They also love the look of shiny, glossy, graphics as well. Here, we will combine those two popular styles and create an extruded 3D glossy text effect in Photoshop.

Screenshot

Create a 3D Text Scene Using Photoshop
In this tutorial we’ll create a realistic 3D text scene using Photoshop with a little help from Illustrator for the 3D text.

Screenshot

Create an Awesome 3D Text Effect with Abstract Brush Decoration
In the tutorial, the artist will show you the processes he used to create an awesome 3D Text Effect with Photoshop. This is an intermediate tutorial so some steps can be tricky, but why not have a try.

Screenshot

How to Create A Realistic 3D Typography
In this tutorial, you will learn how to create a really smooth looking 3D text in any version of Photoshop. This tutorial will create the illusion of 3D without the use of any 3D programs; we will only use the raw power of Photoshop.

Screenshot

How to Create Abstract New Year Illustration with 3D Typography
In this tutorial, we are going to show you how to create an abstract New Year illustration with 3D typography using new 3D tools that Adobe has included in Photoshop CS5 Extended. Let’s get going.

Screenshot

Create 3D Type Art Using Photoshop CS5
The 3D tools in Photoshop CS5 are more advanced than ever. In this tutorial we will use the new Repoussé tool to extrude some text in a way previously only possible in a full 3D application.

Screenshot

3D Text on Fire
In this tutorial we will create a fire effect 3D text with Illustrator and Photoshop.

Screenshot

Floral 3D Text Effect
Learn how to turn a simple 3D text into a beautiful yet simple floral design. This tutorial will show you how to retouch and apply effects to 3D text and use floral Photoshop brushes as a quick way of enhancing the look.

Screenshot

Stunning 3D effects in 30 minutes
In this Photoshop tutorial you will learn how to create stunning 3D effects in 30 minutes.

Screenshot

Design Soft Stylized 3D Type
The use of 3D type is an increasing trend in design today. In this tutorial, we will teach you the basics of creating polished 3D type using Illustrator and Photoshop. Let’s get to work.

Screenshot

Create a Dream Design with 3D Typography
In this tutorial, we’re going to create a 3D Typography based design. All the elements will revolve around the centerpiece and theme: dreaming. The word will dictate the entire layout and control the space by allowing everything else to emerge from within.

Screenshot

Create a Spectacular Flaming Meteor Effect on Text
Take typography one step further by having text falling from the sky in a burning inferno. Yes, this is the text-on-fire tutorial to end all tutorials. It uses a little Illustrator for the text and a lot of Photoshop to burn up the screen!

Screenshot

Create 3D Text with some Extreme Lighting
Here we are going to take an object/text, change it from 2-D to 3-D and give it some realistic effects. We are going to use Illustrator to create the object, and then bring it into Photoshop to add highlights and shadows.

Screenshot

Create Stunning 3D Text in a Grungy Landscape
The more you can learn about blending images and different elements together in Photoshop, the more freedom you will have in creating whatever pops up in your imagination. In this Photoshop tutorial, we are going to go over different digital-image-editing techniques in order to create a beautiful grungy and grainy composition that has 3D text as its centerpiece.

Screenshot

Create a Dark Grunge 3D Text Scene
In this Photoshop tutorial, you are going to learn how to create some 3D text using only Photoshop. The mood we will strive to incorporate in our piece is dark and grungy. We are going to use consistent lighting, layer styles to create shadows for our type, Photoshop filters, and more.

Screenshot

How to Create Remarkable 3D Text
In this quick and easy graphic design tutorial, you’ll discover a handy process for generating attention-grabbing three-dimensional typography with the help of Photoshop and some creative techniques.

Screenshot

How to Quickly Create a Stylish Retro Text Effect
In this tutorial we will be designing a cool retro text effect, which is growing more and more popular in today’s design. Here you will learn how to use the Perspective tool to create depth and how designers can use default gradients in unusual ways!

Screenshot

3D Text effect
This tutorial shows you how to create a nice 3D text using only Photoshop 7.

Screenshot

Create Astonishing Nightclub Themed 3D Typography
3D graphics are often created using several applications. Here, we will use Photoshop, Illustrator, and Cinema 4D to create a stunning nightclub themed 3D composite. Let’s get started!

Screenshot

Create Dazzling 3D Text Effect
In this tutorial, you will learn how to create 3D text in Illustrator then transfer it to Photoshop to apply the effects. You’ll learn how to apply styles to regular 3D text to create a stunning design.

Screenshot

Kaboom! Exploding Text
Explosions are always nice to watch, but it’s even better to blow up stuff yourself. This is why we are going to teach you how to make your own exploding text that you can show off to your friends.

Screenshot

Conclusion

Hope you enjoyed browsing through this amazing and fun collection of 40 excellent 3D text effect Photoshop tutorials, and will have more fun using the techniques in your work. If we have missed out some useful tutorials, then drop us a line letting us know and we will try to include those tutorials in our next collection. Enjoy!

(rb)

August 06 2012

20:40

Legitima Typeface: An Experience Of Fossils And Revivals


  

Just as living species depend on mutation and adaptation to survive, typefaces too depend on their features to optimize the performance of text in a given environment. This principle seems to determine, in a way, the degree of failure or success that printing types (old and new) have in the physical world.

Typeface revivals (i.e. old typefaces beautiful enough to see a second digital life) are a virtually never-ending source of inspiration, as well as a good opportunity for graphic designers to learn some history. After taking part in the practice, I can say without doubt that the similarities between this process and the work of palaeontologists when reconstructing the appearance of dinosaurs and other extinct animals from fossils are striking.

This article covers the process of reviving a typeface almost lost in time, which, in its digital incarnation, I’ve named Legitima. The results shown here are the product of an exercise to learn a little history and some of the basics of typeface design, which I undertook in the Type and Media postgraduate course given at the Royal Academy of Art in The Hague (KABK).

La Cicceide Legitima, spread from the prologue.
La Cicceide Legitima, spread from the prologue.

Introduction

I was nearly 12 years old when my parents took me to see The Land Before Time, a Disney animated movie relating the adventures of Littlefoot and his fellow dinosaur friends sometime during the Jurassic or Cretaceous period. I have been interested in everything concerning evolution and dinosaurs ever since, so much so that I even considered a career in paleontology when I was younger.

Later, when I got involved in typeface design, I realized that the process of reviving a typeface is comparable to the reconstructions done by paleontologists when they imagine how creatures long extinct might have looked. Even more fascinating is that both processes usually start with isolated findings and incomplete evidence, but imagination and informed speculation come to the rescue and help to fill in the missing pieces. If we look closely at the history of paleontology, we can see how both time and imagination have played a major role in the development of the science, for only these two components can enable us to go back in time to see these awe-inspiring creatures.

Both paleontology and typeface design seemed to be completely unrelated to me until they mixed in late 2008, when I had the experience of reviving a typeface used in a book printed long ago. What follows is the history of that, with my findings from the process of digitization and the result of the revived typeface.

Background

The Book

It is widely known that the remains of creatures that lived millions of years ago have been preserved thanks to the process of fossilization. As infrequently as a well-preserved fossil is found, so too is a well-printed and well-preserved 17th-century book discovered. This is the case of the source of my revival: a carefully composed but poorly printed copy of La Cicceide Legitima by Giovanni Francesco Lazzareli (third edition), a book of poems recounting the deeds of a man nicknamed Ciccio in Italy in the late-17th century. The book appears to have been printed in Venice in 1694 in a printshop named Herz.

Spread of La Cicceide Legitima showing the extent of deterioration in the book.
Spread of La Cicceide Legitima showing the extent of deterioration of the book.

I came across this book in a second-hand bookstore in my hometown, Bogotá, Colombia, in 2003. I found the idea of reviving a very old typeface very attractive, but I didn’t realize how hard it would be, working with a sample in this condition. However, the thought of the freedom of interpretation this would give me helped me decide to use this book, dismissing two other better printed but less interesting candidates.

The book, a volume of 228 pages and nine signatures and measuring 9.8 × 16.5 centimeters, is printed on what appears to be highly absorbent, ordinary handmade paper. Three type sizes were used to set the text, and the one in small pica (about 10 points in size) features both roman and italic style. All of the pages appear to have been carelessly printed, the evidence of which includes excessive pressure, worn-out types (printing offices at the time would use a set of matrices for decades or even centuries) and unjustified or moved characters.

Historical Context

The history of a typeface is incomplete without some consideration of the context in which it was used. The one we’re interested in was produced in the early Baroque period (17th century), concurrent with a significant decline in the quality of books and typefaces produced in Italy. But it was also a period of great achievements in typography in other nations such as France and the Low Countries.

Europe in the 17th century falls in what we now call the Early Modern period, characterized by the Baroque cultural movement, the French Grand Siècle dominated by Louis XIV, and the beginning of modern science and philosophy, including the contributions of Galileo Galilei, René Descartes, Blaise Pascal, Isaac Newton. Europe was also torn apart by warfare throughout the century as a result of the Thirty Years’ War, the Great Turkish War, the end of the Dutch Revolt against Spain and the English Civil War, among others, while Europe’s colonization secured the Americas as a major economic resource of the new empires.

An intricate ornamental pattern found in the book, reminiscent of works from the Baroque period.
An intricate ornamental pattern found in the book, reminiscent of works from the Baroque period.

The Typeface

Precisely identifying our typeface was especially difficult, due in part to the ubiquity of some printing types at that time, as pointed out by M. Carter, 1961:

“Community of typefaces becomes particularly evident in Germany soon after 1500, and those faces that were common in Germany are found also in Italy, the Low Countries, England, Scotland and even, during the first thirty years of the century, in France, a country that has rarely imported type or matrices. Mr. A. F. Johnson has done some hard work on the German types of 1500 to 1540, and has left it on his record that as many as ten or twenty presses had founts made of the same set of punches during those years.”

On the other hand, some features of our typeface, such as the low contrast and the notably tilted stressing, correspond to an early (but not Venetian) roman type, of the kind known as “old style.” A few other features (such as the pointed shape of the right stroke of the roman “g” and the unusual treatment of the same letter in the italics) make the typeface hard to identify with more accuracy; although certain treatments — such as the horizontal crossbar of the “e” and the more dissimulated pen strokes — point to a French or Dutch roman, close to the typefaces cut by Garamond and Van den Keere. Another reason why the typefaces used in the book could be French is because Italian printers began buying matrices from France in the middle of the 16th century. Additionally, Garamond’s romans, like a handful of its predecessors, served dozens of printers in several countries.

Sample of three roman types with similar characteristics: Minion (blue), Garamond Pro (green) and Arno Pro (red). The overall proportions, stress axis and serif shapes, all features of garalde roman types, were borrowed for the revival.
A sample of three roman types with similar characteristics: Minion (blue), Garamond Pro (green) and Arno Pro (red). The overall proportions, stress axis and serif shapes, all features of garalde roman types, were borrowed for the revival.

If pressed to pinpoint this typeface, I would say it is a small pica roman old-style type, probably French, cut in the 16th or early-17th century, featuring medium extenders, medium contrast between thicks and thins and a good optical weight for long text settings.

The Process

Working From the Inside Out

Due to the low quality of my samples, I started with great uncertainties about the actual shape of each letter. All I had were tiny models blurred by the excessive pressure during printing, so I decided to select the best of every uppercase and lowercase letter, as well as every number, in order to make reasonable decisions.

I straightened and superimposed every sample as a separate layer in an image file so that the common areas tended to be darker than the eccentric forms produced by the spread of ink on the paper. I called the resulting shape the “maximum”: an area of ink potentially spread in all directions that would contain the DNA of the typeface.

Scans of several samples of the same letter were put on layers in order to find the maximum ink spread.
Scans of several samples of the same letter were put on layers in order to find the maximum ink spread.

I looked for the “skeleton” of each letter (theoretically located in the middle of each stroke) in order to start drawing from the inside to the border of the ink spread (outwards). This skeleton would become one of my very few certainties during the entire process of revival.

The skeleton of the typeface emerged from the blurry letterforms. Like a digital paleontologist, all I would have to do afterwards was add the flesh and skin.
The skeleton of the typeface emerged from the blurry letterforms. Like a digital paleontologist, all I would have to do afterwards was add the flesh and skin.

Optical Size and Weight

Upon finding the skeleton of each letter, I felt more confident to start drawing. The next logical step was to decide the visual weight of the original typeface — or at least of the one I wanted to create. This was done rather arbitrarily, just making sure to keep the width of the vertical stems of the lowercase inside the “maximum”, thus making the visual weight optimal for reading at 10 points in size. I decided to start with one fifth of the x-height, because I learned this has been one of the most established practices of typeface design in the last few centuries.

These would turn into the muscles and tendons of the new type.

Up to this point, no details at all were present. Perhaps the only additional decision I made was the result of thinking about what sorts of shapes could have been derived from the carving of a piece of metal just a few millimeters high with burins and files. According to Fred Smeijers, the shapes were the natural result of technical limitations:

“Not only do the tools invite the punchcutter to make the second n, but also this shape is easier to handle in the rest of the process of typeface design and punchcutting. It has no straight lines and no sharp corners. And the absence of these hard elements makes the form of the second n more acceptable to the human eye than that of the first. This more subtle shape has notable visual margin of tolerance. Hard straight lines make us wonder whether they are really straight or not. If they are indeed not quite straight, this is awkward to look at. So the punchcutter avoided such niggling questions and situations by building in a kind of visual doubt: no straight edges, no sharp corners. The forms become easy to handle, easy to mix and to bring into balance with each other.”

So, I decided to avoid sharp corners and straight edges, just as a punchcutter four centuries ago would have done. This decision proved very useful in helping me to distribute the visual weight of the letters at the baseline and at the x-height, thus producing a horizontal effect that was perhaps useful to achieving a nice word shape and, therefore, a comfortable reading experience.

The lessons on broad nib pen calligraphy provided a good starting point for the proportion between the x-height and the stem width since the model was initially obscured by the excess of ink and pressure.
The lessons of broad-nib pen calligraphy provided a good starting point for the proportion between the x-height and the stem width, since the model was initially obscured by the excess of ink and pressure.

At this point, I had drawn the lowercase and uppercase letter and the numbers. But the page had a certain blurriness overall that I found disturbing. The new typeface looked worn out and overused, just like the original, and that was not the effect I was going for. That made me realize that most of the smaller details needed special attention.

From Blurry to Sharp

The final shapes of the serifs and stem connections emerged from my analysis of existing types, some of them revivals and others not, such as Adobe Garamond Pro, Minion and Quadrata. From a careful observation of Adobe Garamond Pro, I realized that most of the round connections in my typeface were too round. Minion showed me the grace of sharper details; I also learned from it that some serifs needed harder and crisper edges to look more convincing. The process of borrowing details from similar typefaces is comparable to taking the scales, skin texture and color from living species during the process of reconstructing a dinosaur.

Evolution of serif details according to the version. First draft (blue), intermediate stage (yellow), final version (red).
The evolution of the serif details: first draft (blue), intermediate stage (yellow) and final version (red).

The Caps Dilemma

Everything was progressing until I noticed a subtle yet important difference between the original typeface and my rendering: the caps were remarkably darker in the book. So, I decided to make my capital letters darker than the lowercase letters in order to stay true to what seemed to be the intention of the original designer and the convention at that time. This is a principle of optics: the larger the letterform, the darker strokes need to be in order to compensate for the excess of white in the counters. This principle has been followed since the invention of printing and is still used today. I exaggerated it a bit here to achieve an older-looking style.

Darker caps (right) are a typical feature of old style printing types and one strongly visible in the source book. Something worth preserving in the revival.
Darker caps (right) are typical of old-style printing types and one strongly visible in my source book — something worth preserving in the revival.

My Additions and Contributions

Just as living species depend on mutation and adaptation to survive, typefaces too depend on features that enhance their performance in their natural environment. This seems to partly determine the degree of failure or success of print typefaces in the real world.

Even though many typefaces with features similar to those of Legitima must exist, many of them seem to me just too polished to capture the special atmosphere that old metal typeface gives to the page (perhaps with the exception of Quadraat and Adobe Garamond Pro). Legitima was designed from a 10-point original to work best when printed at the same size.

A certain awkwardness or imperfection present in the original was preserved, too, apparent in the bulkiness or fullness at the points where the strokes change direction. Among the other details, the uppercase letters were left purposefully heavy, and the drawing of the curves was meant to the recall the effect of the burin and file on old metal type.

Sketches of Legitima. The additional weight where the strokes change direction (top) as well as the diversity of angles in the italics (bottom) are some of the characteristics that were preserved in the digital fonts.

Sketches of Legitima. The additional weight where the strokes change direction (top) as well as the diversity of angles in the italics (bottom) are some of the characteristics that were preserved in the digital fonts.
Sketches of Legitima. The additional weight where the strokes change direction (top) as well as the diversity of angles in the italics (bottom) are some of the characteristics that were preserved in the digital fonts.

All of the features mentioned above, plus the slightly concave strokes (stronger at the top and bottom), contribute to making Legitima a very legible text type, rooted in the traditions of 17th-century Europe but with great expressive potential for our time.

Conclusion

The original typeface as it was printed, compared to the final version of Legitima
The original typeface as it was printed compared to the final version of Legitima.

During the process of designing Legitima, I learned that reviving a typeface is not so much about bringing old shapes back to life as it is about preserving the qualities that justify its existence in today’s digital world. Merely tracing contours could be done by a machine, but bringing the spirit of a bygone age into the 21st century is inherently human, adds value to our time and contributes to preserving a cultural heritage that would be lost without the sensibilities of the designer.

(al)


© César Puertas for Smashing Magazine, 2012.

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...