Noupe » Fonts

The Ultimate Collection of Professional Free Fonts

Tom Ross — Thu, 27 Oct 2011 10:00:00 +0000

As designers we’re always looking for new fonts to integrate into our designs. Adding new fonts to your library can often help inspire you, giving a fresh feel to your designs. Unfortunately it can be really hard to locate quality free fonts amidst the thousands of mediocre ones.

Luckily we’ve compiled a comprehensive list of professional free fonts to enhance your designs. We’ve left out all the ‘filler’ fonts you find in a lot of roundups, so that every font below is really high quality and applicable.

The Fonts

(rb)

Free Fonts : A Walk on the Grunge Side

Noupe Editorial — Mon, 05 Sep 2011 10:00:55 +0000

With so many free fonts available on the web today, it is easy to miss out on some true gems in the typographic arena. It is hard to stay on top of the latest developments and releases when there are so many outlets to turn to find your fonts. Today we aim to help you out with this charge, by showcasing some grunge laden free fonts, most of which are less than a year old.

Looking around for fonts, it became fairly clear, that most designers (be they makers of fonts or featurers of fonts) tend towards clean, sharp typography. We wanted to take things in a different direction. So we went for a little walk on the grunge side as we searched for free fonts to feature for our readers. We hope you enjoy!

The Fonts

Silent Hunter III

Download

Special Elite

Download (@font-face compatible)

AA Typewriter

Download|Donate to Creator

Rock Salt

Download (@font-face compatible)

Sears Tower

Download|Donate to Creator

Protest Paint

Download Win TrueType|Download Mac TrueType|Download Mac PostScript

Download (free for personal use only/ commercial license $5)|Donate to Creator

Wicked Grit

Download|Donate to Creator

Remnant v1.0

Download for Mac|Download for Win

Fueled by Schlitz

Download|Donate to Creator

Leander

Download (@font-face compatible)

The Missus Hand Oblique

Download

Permanent Marker

Download (@font-face compatible)

Catenary Stamp

Download|Donate to Creator

DCC Sharp Distress Black

Download

Static Buzz

Download|Donate to Creator

Download|Donate to Creator

(rb)

A Crash Course in Typography: Pulling It All Together

Cameron Chapman — Mon, 18 Apr 2011 09:30:57 +0000

In the first three parts of this series, we covered a lot of information about the anatomy of a typeface, and what kinds of things to look for when actually combining two fonts. Here, we’ll tie it all together.

Below are guidelines for combining fonts for paragraphs and headlines, as well as for other common type elements, like pull quotes and by-lines.

Headlines and Paragraphs

The headline and paragraph are two of the most basic building blocks of the typography of a design. In some cases, a heading and paragraph may be the only kinds of typographic information present in a design. Because of this, they’re often given great precedence in the design process.

So let’s start with these two elements, and we’ll expand from there. Here are some examples of effective typeface combinations, starting with the least difficult.

The absolute simplest way to create a headline/paragraph combination is to use the same typeface for both, but with different weights and sizes. Here, we’ve combined Adobe Caslon: Regular for the paragraph copy and Bold for the headline. It’s simple and formal, but can be a bit boring.

The next easiest is to select fonts from the same family. Here we have Fontin Bold for the headline and Fontin Sans for the paragraph copy. Again, change around the weight and size to get better contrast. There are a lot of typeface families that include both serif and sans serif typefaces, including Droid Sans and Droid Serif, and Museo and Museo Sans.

Probably the most common method of combining typefaces is to pair a serif with a sans-serif. In print design, serifs are generally used for the body copy, while sans-serifs are used as headlines. The opposite is more generally true online, though both can work in either setting. Here, we’ve combined Lucida Sans for the headline with Crimson Text for the paragraph copy.

Here we’ve combined Rockwell Bold for the headline and Gill Sans for the paragraph type. Both of these typefaces have a basis in geometric shapes, and therefore they work well together. If you look at the letter “o” especially, you’ll see that in both typefaces, it’s almost a perfect circle (the same is true for the bowls of the letters in both).

Both the typefaces here are clean and modern. The headline is SF New Republic SC and the paragraph is Hero Light.

Here’s another set with a similar mood and style, this time old-fashioned or antique. The headline is Tagettes and the paragraph copy is Goudy Bookletter 1911.

Mixing a strong typeface with a more neutral one can also be a great technique, especially on the web. Here, we have Dancing Script for the headline and Georgia for the paragraph copy.

The trickiest typeface combination technique is probably creating a combination from two radically different typefaces. It’s tricky because it’s so easy to go wrong. Just because two typefaces are radically different doesn’t mean they’ll automatically work together. And when one of those typefaces also needs to be legible as paragraph text, it makes things that much more difficult.

The example above combines Tallys for the paragraph copy with DayPosterBlack for the headline. Tallys is a decidedly traditional-looking typeface, with a fairly light stroke weight. DayPosterBlack, by contrast, is a strong, modern, almost sci-fi-looking typeface.

This is one of those techniques that’s best achieved through simple trial-and-error. Try out a bunch of different combinations and see which ones look good together. You may have to try out a dozen or more combinations before you find one that works well because of it’s contrast.

Beyond Headlines and Paragraphs

Headlines and paragraphs, while important, are only one small part of a lot of designs, especially blogs and news sites. Below are a few more types of typographic elements you may find yourself using.

Pull-Quotes

With pull quotes, there are a couple of different options. First, you can simply use the body copy typeface for your pull quotes, but in a larger size, and possibly a different weight:

It doesn’t look bad, but it’s also kind of boring having both the paragraph and pull quote in Times.

Another option is to use the headline typeface, in this case Dancing Script, for your pull quote. This is more interesting, and definitely draws more attention to the pull quote, but it’s not going to work in every situation. As a general rule, the more decorative your headline font, the worse it will work for pull quotes. You can get away with a script, but anything more decorative than that isn’t going to look right.

The other options with pull quotes is to use a typeface completely different from your headline and paragraph choices. In this case, we’ve used Anivers for the pull quote, Times for the paragraph, and Dancing Script for the headline. Consider the guidelines for combining paragraph and headline typefaces, and use the same general guidelines. In this case, since the paragraph text is a serif and the headline is a script, it made sense to use a sans-serif for the pull quote. Using a weight for the pull quote that’s roughly the same as the weight for the headline helps tie everything together.

Meta Information

Meta information is going to be found on virtually every blog or news site out there. This includes things like the category or tag information, the time the article was posted, and other similar information. Sometimes, it also includes the by-line of the author. Again, there are a couple of different ways to approach the typography for this kind of information.

The first thing you need to remember, though, is that meta information is usually displayed quite small, and sometimes in a lighter color. This rules out a large number of potential typeface choices, as you need something that’s legible at an 8 or 10 point size.

The first option is to use the same typeface you’ve used for your body copy, but in a slightly smaller size and/or a lighter color. Here, both the body copy and the meta information are Crimson.

Another option is to use a very neutral typeface, like Helvetica, for your meta copy. This choice is especially good if your body text isn’t highly legible at small sizes.

Captions

Photo captions should be treated much like meta information. Generally, the type used to caption images is small and sometimes in a lighter color than the body text. In a lot of cases, it’s included within the image border.

Again, you basically have two options for photo captions: you can use the same typeface as your body copy, or you can use a different face. If your captions are going to be very small, legibility may make the decision for you.

For example, look at the captions on the images above. Both are in 11pt, regular weight fonts. The top caption is in Tallys, a common typeface for body copy, which isn’t particularly legible in this instance unless you squint. The bottom caption, by contrast, is in Helvetica, and is significantly more legible.

Examples

Whether you’re combining two typefaces or eight, the same principles apply. You need to find typefaces with some kind of shared characteristics (except when using radical contrast) so that they work well together. Here are some examples of websites that have done just that.

Elysium Burns

Elysium Burns uses a combination of serif and sans serif typefaces, as well as a variety of styles (including all caps).

Good Magazine

Good Magazine also uses a combination of serif and sans serif typefaces, including Georgia for the body text and Arial for navigation and meta information.

Viget Inspire

The Viget Inspire blog uses a combination of sans serif and serif typefaces. Constantina (with Georgia as the primary alternate) is used for headings, while Georgia and Verdana are used for meta information. Body copy on the blog is Verdana.

The Morning News

The Morning News uses Georgia for their headlines and Arial for body copy. They use a variety of weights and styles (including italics and all caps) to set apart different kinds of copy.

The New Yorker

The New Yorker uses their own typeface for article headlines, and Times New Roman for body copy. Meta information and some navigation is set in Arial.

A List Apart

A List Apart uses Georgia for their headlines and navigation, and Verdana for body copy. For by-lines and meta information, they use a combination of Verdana and Times.

Design Wise

Design Wise uses various weights of a slab serif typeface for all of their typography.

Quipsologies

Quipsologies uses a variety of custom fonts for their headlines (p22-underground-pc-1 and coquette-1 most prominently). They also use custom fonts for body text (mostly p22-underground-1 and skolar-1). It’s a bold choice, made possible by web fonts.

sr28

sr28 uses Georgia for headlines and Arial for body text.

I Love Typography

I Love Typography uses web fonts from the same family for their typography, including ff-scala-sans-web-1 for their headlines and meta information, and ff-scala-web-1 for their body copy.

Burciaga

Laura Burciaga’s blog uses a combination of three primary typefaces: Dancing Script (for headlines), Droid Serif (for meta information), and Georgia (for most of the body copy). Combining two serifs is tricky, but it’s done really well here.

Black Harbor

Black Harbor uses Georgia for body copy and KnockoutHTF48-Featherweight for the headlines and navigation.

The Dollar Dreadful

The Dollar Dreadful uses a huge number of retro-styled typefaces for their headlines. Their body font is Georgia.

Matt Bango

Matt Bango uses a mix of Georgia and Helvetica, as well as another serif typeface (with Flash replacement).

Kari Jobe

Kari Jobe’s site uses a variety of typefaces, including Courier New for the body copy. Most of the typography on the site is done with images rather than web fonts.

Design Intellection

Design Intellection uses a variety of weights and styles of Proxima Nova, as well as a bit of Georgia (for block quotes).

The Old State

The bulk of the typography on The Old State is Georgia, though there’s a thin slab serif also used for the navigation and logo.

Poems Out Loud

Poems Out Loud uses Baskerville as their primary typeface for both headings and body copy (with Times as the secondary font). There’s also limited use of Helvetica Neue for navigation.

A Word on Web vs. Print

There’s a lot of conflict surrounding the best practices for typography on the Web when compared to print. In print, longstanding wisdom has pointed toward using serif typefaces for body copy and sans-serifs for headlines. On the web, the opposite is often touted as gospel: sans-serif body copy and serif headlines.

The truth of the matter is that both serif and sans serif typefaces can be perfectly readable both onscreen and in print. It’s all dependant on proper contrast and sizing. Some typefaces are designed to work well at small sizes (mostly by “hinting”), while others are not.

One general rule of thumb for optimal readability, though, is that slightly larger type works better onscreen. This is partly to do with resolution: printed materials are generally printed at 300 dots per inch and up. Screen resolution, though, is generally around 96 points per inch. Because fewer pixels/dots are used to make up the letterforms, they’re slightly less crisp onscreen than they are when printed. By making a type slightly larger, you’re using more pixels to represent the same forms, making the form sharper. The more detailed the letterforms (such as with serif typefaces), the more stark this difference becomes. This is why sans-serif typefaces are often preferred online, as their simpler shapes are better reproduced at smaller sizes.

Conclusion

Much of good typographic design has to do with being unafraid of trying new things and experimenting. Sometimes unlikely combinations work beautifully together, while at other times two typefaces that should look great together just don’t quite look right. The only way to learn what works and what doesn’t is to try new things.

Here are some very general guidelines for using typefaces for various parts of a typical design. Remember, these are just guidelines, and there will be exceptions to all of them.

Small fonts are more readable if they’re less detailed to begin with. This is compounded when they’re being used online.
Captions and meta information are generally a few points smaller than body copy, and should either be in the same typeface or a neutral alternative like Helvetica.
Your typography should match the feel of your content. Formal documents should use formal type. Informal documents should use informal type. (In other words, don’t use something like Comic Sans for a corporate report, and likewise don’t use Times New Roman for a child’s birthday party invitation.)
When in doubt, use Caslon.

More Resources

Four Techniques for Combining Fonts
A useful breakdown from Hoefler & Frere-Jones
Mastering Font Combinations
A short, basic article on combining typefaces.
19 Top Fonts in 19 Top Combinations
A look at combining some of the most popular fonts used by designers.
10 Great Google Font Combinations You Can Copy
Not only gives the ten combinations, but also the reasons behind combining them.
Choosing Type Combinations
An in-depth article from Layers Magazine.
Best Practices of Combining Typefaces
An article from our archives on basic rules for combining typefaces.

(rb)

A Crash Course in Typography: Principles for Combining Typefaces

Cameron Chapman — Mon, 11 Apr 2011 08:18:42 +0000

When combining typefaces, there are a couple of important principles you’ll need to keep in mind, namely contrast and mood. Effectively combining typefaces is a skill best learned through practice, and trial-and-error. Once you’ve mastered the principles covered here, you’ll have the tools you need to try out combinations while making educated guesses about what will and won’t work together.

Here, we’re mostly covering combining two typefaces, as you would for body copy and headlines. In the next part, we’ll cover combining more than two typefaces for things like navigation, image captions, and more.

Contrast

Contrast is one of the most important concepts to understand when it comes to combining typefaces. Without proper contrast, typefaces tend to clash, creating a random, scattered look to your designs (and not in a good way). Creating proper contrast relies on a few principles, all of which are discussed below.

But first, what exactly is contrast? Contrast is the amount of difference between two typefaces. Typefaces that are too similar tend to clash. Your mind doesn’t instantly recognize that they’re different typefaces, and when it finally does, it’s jarring. Typefaces that are too dissimilar can appear haphazard and accidental, which can be just as jarring.

Weight

The weight of a typeface plays a huge role in its appearance. We often think of weight in terms of “light”, “regular”, “medium”, “bold”, etc. But different typefaces have varying weights to begin with. Combining typefaces based largely on weight is a fairly straight-forward way of creating typographic contrast.

You’ll want to look for typefaces that have noticeable difference in weight, without being too extreme. Very extreme differences in weight need to be made up for with similarities in other respects, particularly structure and style.

Style and Decoration

The style of a typeface has a huge impact on how it’s received. Generally, when working with styles, you’re going to be either using regular or italic styles. Underlines are also used, but in web design, they should only be used for links (otherwise, they’re confusing). Other decorations include things like outlines or drop shadows, both of which can be used to unify varying typefaces.

Style and decoration can also be used to create contrast within a type family or typeface. Combine regular and italic fonts, varying weights, and things like shadows or outlines to create variation within a font family and sufficient typographic contrast.

Scale and Hierarchy

The scale of typefaces, or their size relative to one another, is another important factor in combining typefaces. The hierarchy of different elements within the design is greatly influenced by the scale of the typefaces used. For example, your headings should obviously be larger than your paragraph copy. To the same end, your H1 headings should be larger than your H2 headings, and so forth.

As a general rule, your hierarchy should start with your H1 heading being the largest, and your meta information or captions should be the smallest. You need to balance the differences in scale with differences in weight and style, too, so that you don’t have too much variation in size between your largest and smallest fonts.

Classificiation

In general, when combining typefaces, you’ll want to choose ones that aren’t from the same classification. Combine a serif and a sans-serif, or a serif and a script, etc., and you’ll have a much easier time coming up with a combination that has proper contrast and doesn’t clash.

Combining typefaces within the same classification is sometimes possible, but there are some extra considerations. For one, you want to find typefaces that are different enough that they’re immediately recognizable as different typefaces, while also using typefaces that have similar moods, structures, and other factors that tie them together. To some extent, trial and error is your best bet for finding typefaces within the same classification that can work together.

One trick is to choose typefaces that are in the same general classification, but fall under different sub-classes (such as a slab serif and a modern serif, or a geometric sans serif with a grotesk). This provides more contrast right from the start.

Structure

The structure of a typeface plays a huge role in how it works with other typefaces. You either need to choose typefaces that have very, very similar structures, or very different structures. Letterforms that are only a bit similar are going to clash. Typefaces that are very different in other ways can be unified by their similar structures, though the reverse rarely works as well.

Look at the letterforms side-by-side and see if they share a similar shape or other factor (such as x-height). It’s better to go with wildly different structures than structure that’s almost the same but not quite.

Color and Texture

When you need to add visual contrast or unify disparate typefaces, the use of color and texture can do wonders. For example, when you need to add contrast among typefaces that are nearly identical (or within a single type family), changing the color of some elements instantly adds interest. Adding texture has the same effect.

Alternatively, if you have wildly different typefaces, color and texture and unify those typefaces, creating a harmonious look. The principles of color theory still apply to typography, so be sure you don’t go overboard combining colors.

Extreme Contrast

Extreme contrast can be a great option if you’re working with display or script typefaces. In these instances, it can be difficult to find typefaces with good contrast that aren’t too dissimilar. So rather than trying to do that, go for completely different typefaces. Try combining a rather simple typeface with something more elaborate for the best results, rather than two elaborate typefaces.

Mood

The mood of the typefaces you select is vital to the way they work together. Mood can be anything from formal to casual, fun to serious, modern to classic, or anything in between. This is where a lot of people run into trouble with combining typefaces. Selecting typefaces that not only have similar (or complementary) moods, but also have moods to match the project you’re designing is crucial.

Examples

Oak Street Bootmakers
Oak Street Bootmakers Uses a combination of Hoefler Text and Franklin Gothic, both of which are very classic typefaces. It creates an image that is steeped in tradition.

Pound & Grain
Pound & Grain combines two serif typefaces, as well as a sans serif on their home page. The two serifs work well together because they belong to different sub-classes.

Burciaga
Burciaga combines three distinct typefaces: Droid Serif, Georgia, and Dancing Script. Droid Serif and Georgia work surprisingly well together, and Dancing Script adds extra elegance.

Stuart Bicknell Photography
Stuart Bicknell Photography uses font size and style to create contrast on the site, depsite the fact that virtually all of the typography is Times New Roman (there are a few small touches of Arial).

Foundation Six
Foundation Six uses a mix of Clarendon and Helvetica Neue, which creates a modern but still conservative look.

CalebAcuity Americas
CalebAcuity Americas uses a combination of YanoneKaffeesatzBold and Lucida Sans. It’s a very modern look, and a great example of how to successfully combine sans serif typefaces.

Analog
Analog is a great example of a site that uses a single typeface, but uses styles, colors, and scale to create contrast.

Thor Datacenter
Thor Datacenter combines a few typefaces, including AllerDisplay, JournalRegular, and Arial. The addition of a script font like JournalRegular to the otherwise sans serif typography palette results in a much more casual and inviting feeling to the site.

47 Degrees
47 Degrees combines LeagueGothic with ChunkFive and Helvetica for a very modern, casual style. They also use Museo300 sparsely on their site, which adds more visual interest.

Logo Nest
Logo Nest combines a huge number of typefaces on their site to create a vintage look. They keep everything unified, though, through color (virtually all the type on the site is either black or white).

More Resources:

Typographic Contrast and Flow
From WebDesignerWall. Covers the basics of contrast in typography.
Typographic Contrast and the Web
A very comprehensive aritcle that covers the basics of typographic contrast as it pertains to web design.
Focus on Typography, Part 1: Contrast
From SitePoint, this article covers all the basics of contrast, fully illustrated.
A Guide to Web Typography
A fantastic, comprehensive article covering web typography from I Love Typography.
29 Principles for Making Great Font Combinations
A list-style post that covers some excellent rules for combining typefaces.

(ik)

Typographical Inspiration for the Weekend

Robert Bowen — Fri, 08 Apr 2011 09:11:31 +0000

Those of us who work in creative fields tend to need to return to the wells of inspiration for a bit of a recharge for our imagination. In these times we turn to many, many different areas, looking for anything to spark those creative fires once again so that we can enthusiastically charge back into the proverbial fray. Hopefully with enough juice to punch through any of those roadblocks that may have been in our way when we went in search of inspiration.

In this post we are going to be focusing our inspirational radar in the typographical waters to help all of those enthusiasts and fanatics alike to get their fix of all kinds of font-related goodness. Here is an inspirational roundup we’ve collected to keep our readers busy for the weekend. We hope that you find enough typography inspiration in the sections below to keep your creativity flowing nicely for some time.

Typographical Based Artwork

The first stop along the way in this search for inspiration is in the various galleries of some talented designers who have created some imaginative artwork based around, or heavily featuring some typographical elements in the pieces. We have several artists with a handful of their designs in this first showcase, followed by a few random pieces from some other artists that we did not want to leave out. Some you may have seen before, some you may have not, but either way hopefully they will be that needed spark.

Áron Jancsó

Áron’s work is colorful and those featured are compromised of linework as the foundation for each piece. Used in completely different styles and weights, the work still shows a dynamic sense and versatility from the designer. Inspired and inspiring.

Lowercase G

From the Vector Graffiti Collection

Tokyork Logo

David Waters

First up beneath the spotlight is David Waters. David’s work ranges from both the grunge heavy to the sharp and crisp, but always present is an imaginative type work that accentuates the overall voice of the pieces they inhabit. With such inspired in his portfolio, this easy addition to the showcase should be rubbing off on you in no time.

The KDU Brochure

Ecosystems

Dichotomy

Adolfo Correa

Is a talented designer with some colorful examples in the showcase, where the type elements are the central element of each of the pieces. Below, Adolfo demonstrates that his skills lie outside the digital arena as well with the paper art tribute he created that we have featured.

A Tribute to Yulia Brodskaya

Steve Aoki

Enedi Collaboration 2

Alex Beltechi

As our showcase keeps on moving forward, we stop on the works of Alex Beltechi, a designer whose style and works are filled with a lighter, somewhat playful approach. His in-depth, layered styles lend well to the large typographical centerpieces of the pieces that we have showcased below.

Type Treat

Steampunk Typography

Changing Actions Wallpaper

Diego L. Rodriguez

The next designer that we find filling the wellsprings of inspiration with their amazing work is Diego L. Rodriguez. Diego’s designs are as big and as bold as the typographical elements that he crafts into his pieces. Once again, we see a range of styles skillfully employed in each piece as the work explodes from their digital canvases.

Solomon Tribute Album Cover

NAS – The Lost Tapes 1.5 Album Cover

Needles

Michal Sycz

Speaking of playful designs, our next artist up on the showcase is designer Michal Sycz, whose work is certainly no stranger to this fun loving nature as is proven in the first piece on feature. Though this whimsical approach is not in any way the standard for Michal’s work as we see the powerful voice of public commentary in the showcase as well.

Milk Sucks

Barcelona

slashTHREE / Order vs Chaos

Dan Beckemeyer’s Ampersand Food Groups

This next feature is all about the fun, with something of an unconventional look at typography. Well, at least one character of type that is. Dan Beckmeyer has created a series of Ampersands using two commonly combined foods to give the typographical character both form and a quirky, yet original series of pieces.

Wine & Cheese

Peanut Butter & Jelly

Coffee & Doughnuts

Cris Wicks

Cris Wicks is a designer whose works you have more than likely seen being featured around the webs as their breathtaking typographical portraits tend to catch the eye no matter their surroundings. Using a popular technique to create a portrait out of words, Cris has created some truly inspiring works that rank high in most folk’s favorites.

lyric portrait 2nd attempt

Beautiful Boogieman

Mr. Marley

Markie Darkie

Speaking of popular works that tend to make the rounds, you might have seen one or two of our next designer’s works. Markie Darkie has some vibrant and explosively colorful and bold typographical artwork that we just would not have felt right about excluding here from our inspirational showcase. For these works are proven useful inspirational tools.

CMYK

Fusion

Steve Goodin

Our next showcase entries come from a talented designer who masterfully transports his typographical elements into a layered bed of classical grunge beauty. Steve Goodin delivers some simply stunning works that are sure to help kick-start your inspirational mojo machine into high gear.

Blackout

Open House

Signal

Dimo Trifonov

Next up along this road to inspiration, comes the work of designer Dimo Trifonov, who wonderfully submerges his typographical elements into his designs until they are nearly lost and merely art themselves. His interesting creations for a range of clients make a dynamic slice of his work which shows a versatility to his voice.

Trust the Mutation

Ashton Illustration

It’s all about the shoe

Neil Hanvey

Here our typographical journey for inspiration takes a turn for the whimsical and more playful side as we visit work from the portfolio of the talented Neil Hanvey. Neil’s designs are filled to the brim with exciting and colorful elements and sometimes characters. If fun tends to fan your flames of inspiration, then these next few pieces might be the dose you need.

Atomic Circus

Mecha Owl vs Steam Dragon

Hope for Haiti

Daniel J Diggle

The next designer that we are showcasing today is Daniel J. Diggle. Daniel uses intricately designed typographical drawings that heavily rely on various artistic elements to create and give form to the type, instead of the other way around as we have seen. Brilliant and beautiful work that certainly raises the proverbial bar.

Random Got Beautiful

The Roots

5125

Andreas Scheiger’s Evolution of Type

Next up, we find an original set of sculptures unlike other works you may have seen before from the Evolution of Type Exhibit by: Andreas Scheiger. This is a uniquely morbid, if not completely awesome idea for a set of typographical sculptures that looks beneath the surface, so to speak, of our type.

Exhibit Number 3

Exhibit Number 2

Exhibit Number 1

Tariq Yosef

As we are winding down in this section of the post, we have the final designer with multiple artistic typographical pieces from their gallery being featured here today and that is the imaginative works or Tariq Yosef. Tariq’s chaotic and explosive pieces are both rich and charged with emotion. Definitely an easy add to the showcase!

Numbers Man

typoGeo

its sad

Individual Artist Showcase

Now we have a handful of other designer artworks that not only caught our eye, but got the wheels of inspiration turning as we took them in, so naturally we couldn’t check out of this section without stopping in them first.

Nuzzles – Wooden Typographic Puzzles by: John Christenson are an extremely creative and fun break from the other works that we have been showcasing in the post. Once we laid eyes on them, we knew they had to get a spot on the list!

The Antidote by: Jared Nickerson is a simple retro design that uses typography to bring the whole meaning of the piece together and present it stylistically to the viewer.

Typefaces

How could we do a post focusing on typography inspiration and not actually deliver some typefaces that are sure to please and douse those creative embers with a little fuel? Short answer, we couldn’t. So feast your eyes and typeface appetites on the gatherings below and don’t forget that you need to still come up for air on occasion.

Slinkytype by: Paul Hollingworth

It may not walk down stairs or travel in pairs like its namesake, but the Slinkytype font is a stroke of creative genius. Taking the spiral, coiled visuals from this toy that has entertained countless kids across generations and distilling it into a highly unique typeface made this an easy addition to our showcase.

VAL – Free Font by: Fontfabric

VAL is a Fontfabric typeface whose weight and bubbly nature have made it a virtual splash among the community. The fact that it is free has not hurt either, but given its size and style you would expect it to be somewhat difficult to read, but that is not the case here. With a unique style for fitting the letters together, this font is certainly worth checking out. Click on the images to visit the page with the download link.

ROKE 1984 – Free Font by: Wete

ROKE 1984 is a typeface so refreshingly original that we could not exclude it from this post without feeling horribly guilty for shorting the readers. Wete, the designer, has delivered a font that really sets the bar high for others to follow, with several variations of the font to give your work just the look you were craving. Click on the images to visit the page with the download link.

Kalevi Typeface by: Ossi Gustafsson

Kalevi is another typeface whose elegance and sharp nature made it nearly impossible to pass up as we put this showcase together for our readers. Even with its somewhat boxy style, this font still comes across as classic and professional, and also has a stencil variation that takes it to more of a laid back place. So it works on numerous levels.

my Angle Type by: Andre Roquette

my Angle Type is another highly unique font that has evolved artistically into a funtional, wonderfully stylish typeface. The designer’s imaginative approach to the font’s creation has seemingly infused the work with an inspiring tone that is almost guaranteed to get those juices flowing.

Disorder Type by: Sig Vicious

Speaking of unique approaches to the font’s origins, our next typeface on the showcase shares this spotlight, and that is Disorder Type. Trying to encapsulate the symptoms and feelings associated with Dissociative Identity Disorder, the designer delivered upon a powerful, if not singular, typeface to the community at large.

Perforama – Free Font by: Alexey Frolov

Perforama is a fun font with a retro feel that takes a simple lined character, rounded corner approach to pulling together this typeface. Has the look and feel of an older seventies genre design, while still managing to keep it relevant and from feeling truly dated. Click on the images to visit the page with the download link.

Bardelin – Free Font by: Alexey Frolov

Bardelin is a bold and full typeface that still has somewhat of a lightness to it that most weightier fonts tend to be missing. The subtle waviness to the characters keeps the font from feeling constrictive and as concrete as most bolder fonts do as well. Click on the images to visit the page with the download link.

Dekar – Free Font by: Fontfabric

Dekar is another Fontfabric release, that is tight and crisp in all the ways a professional feeling typeface should be. With both a bold and a light variation of the font, this sharp type has a versatility to it that just might take you by surprise. Click on the images to visit the page with the download link.

Adec – Free Font by: Serge Shi

Adec is another uniquely crafted typeface that would make an inspirational addition to any designers virtual toolbox for sure. Taking somewhat of a split level approach, so to speak, the font combines character elements to give the type a slight sense of whimsy, while maintaining a sharp modern edge. Click on the images to visit the page with the download link.

Deibi v1.0 – Free Font by: Wete

Deibi is the second typeface by Wete that we have featured, though it has a completely different feel and tone to it. Though the font itself has the hand drawn, somewhat loose look, it still comes together in a tight-knit professional look that gives the font a unique personality of sorts. Click on the images to visit the page with the download link.

A Couple More For the Road

Before we go, we have a couple more places to turn when you are looking for typography inspiration that we thought we would drop into the virtual mix to cap things off. We hope that you have enjoyed the post and gotten some inspiration out of its holds.

Baseline Magazine is a magazine that is focused completely on typography. This is certainly a publication for every enthusiast and pro alike to look into to keep their fingers on the pulse of the typography in the design world.

Type Foundry Wiki is the Wikipedia entry for Type Foundries. Plain and simple. Want to know where to go to get all of your font fixes, then visit the foundry entry for lists of typeface sources to turn to!

Friends of Type helps you discover great fresh visual content. Four creative fellows are responsible for the project which features type artwork from artists around the world, yet mainly their personal work. The project values typographic design and serves as a sketchbook, archive as well as dialogue.

Consider Also Some of Our Previous Posts:

The Beauty Of Typography: Writing Systems And Calligraphy Of The World is a post from the Smashing vaults that can also help out with the inspiration end by taking you through examples of scripts from around the world.
Typographic Design Patterns and Best Practices is another post from the ghost of Smashing past that can help you once that inspiration gets rolling once again, and you begin your next typography focused design.

(ik)

A Crash Course in Typography: Paragraphs and Special Characters

Cameron Chapman — Mon, 04 Apr 2011 13:11:26 +0000

Body copy makes up the majority of many websites. Headlines and other bits of typography are often considered more fun to design, or more artistic, but without a good design for your body copy, your overall project will suffer.

Body copy design requires you to consider two separate parts: character styles, and paragraph styles. Proper use of special characters can greatly increase the level of professionalism in your designs. And good paragraph styling can make a huge difference in readability, and therefore the amount of time someone is willing to spend reading your copy.

Using Special Characters

There are a number of special characters you can use in your typography designs that add a level of polish and sophistication that is lacking from many designs. Incorporating these characters takes some extra time on the part of the designer, but the end result is almost always worth it.

Ligatures

Ligatures are sometimes considered antiquated, and don’t show up often in web type. They’re not seen much more often in print design, either. But if your goal is to create a typographic design that has an antique, traditional, or very formal look, adding ligatures can be a fantastic way to reinforce that design style. Ligatures can also improve readability among certain characters, in certain fonts (especially italics and obliques).

If you want to use ligatures in your designs, there’s a great CSS declaration you can use to implement it in Safari, Webkit-based browsers, and Chrome: text-rendering: optimizeLegibility;. Firefox is already using this rendering setting for font sizes over 20px. There are a few glitches with using this declaration, which are detailed in the Aesthetically Loyal article about Cross-Browser Kerning-Pairs and Ligatures.

Ligatures are most commonly used for the following character pairs (shown regular and italic):

Hyphens and Dashes

Hyphens and dashes are two of the most improperly used characters in typography. Hyphens should only be used when hyphenating words. There are two different kinds of dashes: the en-dash and the em-dash. An en-dash is shorter, roughly the width of the letter “n” in a particular font (hence, the name). An em-dash is wider, roughly the width of the letter “m”.

En-dashes should be used when showing a range (such as January–March) or when creating an open compound word (South Carolina–Georgia border). To create an en-dash, just use –. The em-dash is used mostly in informal writing, and can replace commas, semicolons, colons, and parentheses. They’re often used instead of commas to set apart independent clauses or an abrupt change of thought. To create an em-dash, use —.

Smart Quotes

Smart quotes (sometimes also called “curly quotes”) are quotation marks that turn in toward the text they surround. There are both double and single smart quotes, and each requires a different html code. Smart quotes are often created automatically in word processing programs, but can be a huge pain for web typography.

Some CMSs, like WordPress, automatically convert quotes to smart quotes. While this is good in most cases, it can also cause problems, especially if you post code snippets on your blog (as you don’t want code snippets to contain curly quotes). In general text, though, you’ll want to use smart quotes for a more polished look in your body text.

Ampersands

Ampersands (‘&’) are another special character that are sometimes used in typographic designs. To create an ampersand, just use &. They work well in headlines and similar short blocks of text, but aren’t really appropriate for body text (despite the fact that many people seem to use them that way).

Ampersands are appropriate for use artistically, or in instances where space is limited (like in a table). Don’t use an ampersand just as an abbreviation for the word “and”. If using an ampersand artistically, you may find that ampersands in italic fonts are more attractive than their regular counterparts. Italic ampersands tend to follow the older style, and closely resemble the letters “e” and “t”, which make up the Latin word “et” (which translates to “and”).

Other Special Characters

Other special typographic characters include things like trademark (™), registered (‘®’), and copyright (‘©’) symbols, tildes (‘˜’), and pilcrows (‘¶’), among others.

If you use any of the above characters, make sure you use the proper entity codes for a professional and polished final result. About.com has an extensive table of entity codes for various typographical symbols and punctuation marks that makes a great quick-reference guide.

An additional note about pilcrows: using these rather than actual paragraph breaks can be an interesting technique for article intros that consist of multiple short paragraphs. Just make sure that you don’t use them throughout a long document, as they convert the entire document into one long text block, which is harder to read, especially onscreen.

Character and Word Spacing

The space between characters and words can be broken down into a few different areas. The basics are kerning, tracking, and word spacing. Kerning, which is the space around specific characters, is generally done automatically within individual font files. Programs like Photoshop or InDesign give you some control over kerning between individual characters, but on the web it’s mostly impractical.

Tracking is similar to kerning, but isn’t character-specific. The tracking can be adjusted easily with CSS, using letter-spacing. For the most part, adjusting the tracking of your text shouldn’t be overdone. But it can be used to great effect in small blocks of text. It’s most often seen in headlines or menus. Overdoing it can result in text that is difficult to read.

One place you’ll always want to use letter spacing is between strings of capital letters (includings small caps) and strings of numbers. Set a letter spacing of around .1em between capital letters, small caps, or numbers to improve legibility.

Word spacing can greatly improve readability if done correctly, as it makes word recognition easier. People often read words just by recognizing their shapes, and increasing the space slightly around each word can speed up this process. Word spacing is accomplished in CSS with word-spacing. Word spacing, by default, is .25 ems. It should be specified in ems, so that it adjusts according to text size. Also, word-spacing adjustments are made in relation to the default spacing. So if you specify a word spacing of 0.25 em, you’re actually getting a space of .5 em between words.

Paragraph Formatting

The paragraph is often referred to as the most basic unit of language that has meaning. Paragraphs are the building blocks of text content, and yet all too often, designers do little more than specify the font face and size. There’s a host of other formatting options we should be considering when we format our paragraphs.

There are a few things to take into consideration beyond the choice of typeface. The goal of typography at the paragraph level is to create text that is highly readable. To that end, we need to consider the alignment of our text, as well as the line spacing and line width.

Alignment

There are four basic alignment types: left, right, center, and justified. As a general rule, centered type is harder to read. It’s fine for headlines or things like photo captions. But for paragraphs, it’s not suitable. This is due to the fact that ragged edges on the left-hand side of a paragraph reduce legibility (because readers have to search for the beginning of each line).

Right-aligned text presents the same problem as centered text for paragraphs. As a general rule, stick to either left-aligned or justified alignment for long blocks of text.

Line Height and Leading

In the days of hand-set print type, leading referred to the space between lines. The term comes from the literal strips of lead that were used to put extra space between lines of letters. Line height is similar to leading, except it refers to the overall height of lines, including the letters and space above and below them.

In CSS, you can adjust the line height to whatever you want. Line heights that are anywhere from 1.2x to 1.8x as tall as the text itself are generally the most readable. For example, if your text is 12px high, then your optimal line height would be between roughtly 14px and 22px. Play around with line heights until you find something that looks good for your particular project.

You can see here how much easier text is to read at a taller line height.

Line Width

There are a few different theories regarding the perfect line length. Of course, the specifics between each vary. There are three basic ideas, though:

Line widths of roughly twelve words.
Line widths of roughly 39 characters (alphabet-and-a-half rule).
The points-times-two rule (which requires some math to convert it to work for the web).

The last one is really the only one that requires any explanation. If you multiply the size of your point times two, and then use that in picas rather than points, you’ll get your line width. In print design, this is easy enough to figure out. If, for example, your text height is 11 points, you’d have a line length of 22 picas (or just over 3.5″).

It takes an extra step to convert that to web use. Take that pica measurement you just got (multiply your text’s pixel size rather than points), and multiple it by 12 (because there are 12 points in a pica), and that will give you your line width in pixels.

For some examples of fantastic paragraph styles, check out Jon Tan’s 12 Examples of Paragraph Typography.

Great Paragraph Typography in Practice

Vogue Magazine

The typography used in the paragraphs on the Vogue Magazine site has an obvious focus on readability. Generous line heights and a 14px font make reading even long blocks of text a breeze onscreen. In addition to the type size and spacing, using a very dark gray also makes the type more readable.

The basic code for this paragraph style is:

p {color: #333333; font-size: 14px; line-height: 24px; text-align: justify; font-family: Georgia,"Times New Roman",Times,serif;}

Sleepover, San Francisco

Sleepover applies a number of excellent attributes to their paragraph styling. First of all, headings are the same size as the body copy, but capitalized, with proper letter spacing:

{letter-spacing: 2px; text-transform: uppercase;}

The paragraphs themselves are also well-formatted. Font size is kept to 1 em, with a 1.85em line height (slightly larger than “normal”). The gray letter color is very easy on the eyes, though it might be too light for the taste of some. The added line height is extra important in cases like this, where there are other stylistic choices that might decrease readability. Here’s the basic paragraph code:

p {font-size: 1em; line-height: 1.85; color: #666666; text-align: justify; font-family: "Century Schoolbook",Century,Georgia,serif;}

Salt of the Earth

Salt of the Earth uses a larger font than is commonly seen for body copy. They also use very generous line heights. Rather than lowering the contrast of the type by lightening the font, they’ve opted to use a darker background and a black font. It still results in easier-to-read text than black on white would be. Ample spacing between paragraphs is also used, which adds to scanability and breaks up long blocks of text.

The basic styles for this paragraph are:

p {font-family: Georgia,"Times New Roman",Times,serif; font-size: 16px; line-height: 30px; margin-bottom: 30px;}<

The Design Cubicle

The Design Cubicle uses what looks like a smaller font than any of the other examples here, and yet maintains similar readability. The other main difference here is that they use a sans-serif typeface (and an @font-face font, rather than a web-safe font), which is arguably more readable onscreen (the reverse is usually considered true with print typography). Contrast is good, with a medium gray background and a dark gray font.

Here’s the basic code for this paragraph style:

p {margin-bottom: 1.5em; font-size: 14px; line-height: 21px; font-family: "ff-dagny-web-pro-1","ff-dagny-web-pro-2",Verdana,sans-serif; font-weight: 400; color: #232D32;}

In Part 3…

We’ll talk about how to combine different typefaces, based on sound typographic design principles like weight and contrast, building on what we’ve covered here and in part 1.

Additional Resources

The Elements of Typographic Style Applied to the Web
A very comprehensive guide to typography, that has plenty of information about spacing, rhythm, vertical motion, and more.
The Paragraph in Web Typography & Design
A fantastic article on various paragraph styles from Jon Tan.
HTML Accent Entity Codes
A fairly comprehensive chart of entity codes for inserting special characters into HTML.
Top Ten Web Typography Sins
Our own article on some of the pitfalls of web typography, including plenty of information on using special characters.