If we as interactive designers we’re able to take a little more time when it came to typography, than the results would show a unique, well thought of design as oppose to a “run of the mill” creation.

There is a good chance that the majority of designers and designs you admire showcase good examples of typography.

I’ll show you a few steps I take in tweaking set type to be more appealing than those default scenarios of 24px H1 tags along with 13px set in Times New Roman.

Don’t settle for default settings, everyone is doing it.

Here we have the ever- so- common look of a heading along with a chunk of body copy to follow. This doesn’t exactly pull you in or set itself apart from all the other samples just like it, right? So to make the text sample more visually appealing, first, we’re going to make a few changes with our font selection.

Choose a font that will have more visual weight with your headline

Although font selection is not exactly “typography,” it is in fact a quintessential component to help the type on a page distinguish itself from other elements. With the onset of @font-face, massive amounts of choices are available to designers anywhere.

Here I’ve used an Extra Condensed Gothic Style font that can easily be found on a free font site like FontSquirrel.com. If we stop and think about it, the name “Condensed” should mean something, because it is in fact more dense than it’s normal book style family member, which is exactly what we want out of a headline:, something that pulls the user in and truly sets itself apart from the body copy. It certainly succeeds in grabbing your attention better than the original but there are a few things we could do to further improve the text.

Make it more appealing with two lines of CSS

The immediate change is in the letters; they’re all capitalized now but they also now have negative kerning between each of the letters (a technique carried over from newspaper design).

Both of these characteristics can easily be accomplished through CSS, {text-transform:uppercase; and letter-spacing:-Xpx;}. By making these two lines worth of coding changes, it results in a major improvement in visual weight, especially over the original .

Work out any last little tweaks

In the next step, the font used in the body paragraph has in fact changed to a cleaner sans-serif, which better compliments the headline text. We’re getting closer to a much more visually appealing design, but there are a few changes we can make to clean it up even more.

As the green indicators show, there are unequal margins and what typographers like to call an “orphan.” Which is a single word that falls to the last line of the paragraph. It creates a very unequal weight visually as compared to the rest of the text, and this issue can be solved easily by rewording the text slightly.

When it comes to margins, there is no rule that all must be equal. However, if you are starting a young web design career, it’s good practice to have equal margins throughout until you experience and learn techniques that allow you to extend beyond the guidelines of typesetting and still accomplish your goal visually.

After creating a more balanced visual canvas by removing the orphan and adjusting the margins you can see the end result, a well set type sample that’s comfortable where it lays.

Dallas is an Interactive Designer at 352 Media Group, a digital marketing and web design company.

What are your best tips for web typography? Let us know in the comments!

Never Ending WordPress Business Bundle – only $14!

Sure, you can hard-code your font replacement into your theme (or into a theme options page), but a plugin is sometimes a much better option, especially when you want to make a theme backwards-compatible.

Below are seven fantastic font replacement plugins. Some are for use with paid services, while others work with free services or are self-hosted.

All of the plugins included are compatible up to WP 3.1.4, and most are compatible up to 3.2.1.

1. Fontific

Fontific is my personal favorite font replacement plugin. It works with the Google Web Fonts API, which has hundreds of free fonts available for use on personal and commercial sites, with no sign-up and no hassle.

To use Fontific, you just install and activate the plugin, and then define font rules on the “Fonts” panel in the WP “Appearance” menu. Just choose which CSS selector you want to apply the style to, select the font you want to use for that selector, and then use sliders and the color selector to specify things like size, line height and letter spacing.

Pros: Easy to install and setup. Drop-down menus and sliders make it easy to use, even for non-technical users. Live preview is really helpful when you don’t know exactly how you want your fonts styled.

Cons: If you have a ton of selectors to style, it can get to be overwhelming to manage.

Average Rating on WordPress.org: 4+ stars

2. WP-Cufón

WP-Cufon is a simple plugin for implementing Cufon font replacement on your WP site. To use it, just convert your font files and upload them to the plugin’s font directory (you can use the Generator on the Cufon website). Then you can activate the fonts you want to use in the Admin Menu and specify which elements should be replaced with Cufon fonts.

WP-Cufon is regularly updated, and is currently on version 1.6.1.

Pros: Huge variety of fonts available. Easy to set up.

Cons: You have to host your own font files, which can greatly add to bandwidth usage on high traffic sites. You’re also responsible for making sure the license for any of your fonts permits web usage.

Average Rating on WordPress.org: 4.5+ stars

3. Typekit Fonts for WordPress

If you want to use Typekit fonts on your WP site, then the Typekit Fonts for WordPress plugin is a great place to start. Unlike Google Web Fonts and Cufon, Typekit has paid plans that give you access to a large library of fonts. There is also a free plan that includes a limited number of fonts and covers up to 25,000 page views per month, along with some other restrictions.

To use the plugin, simply install it in your plugins directory and activate it. Then access the Typekit Fonts panel in your WordPress dashboard and enter your Typekit embed code. From there, you can set up CSS selectors and enter CSS rules in the plugin settings.

Pros: Tons of fonts to choose from. Easy to set up.

Cons: You have to pay if you want to use more than the trial library of fonts, or a have higher page views.

Average Rating on WordPress.org: 3.5+ stars

4. Fontdeck

The Fontdeck plugin lets you easily add Fontdeck fonts to your WP website. Fontdeck has a huge collection of premium fonts, starting at just $2.50 per font, per year (with an average price of around $7.50 per font, per year). They can also host custom fonts for clients, and can handle very large traffic sites.

To use the Fontdeck plugin, just install it in your site’s plugins directory, and activate it. Then create your website project on the Fontdeck site and add your fonts. From there, paste the project ID from Fontdeck into the plugin settings page. From there, you can choose which types of text are targeted by which font.

Pros: Fontdeck has very competitive pricing compared to many premium web font providers.

Cons: Setup is a bit more complex than some other plugins. No management of Fontdeck projects from within the plugin.

Average Rating on WordPress.org: 5 stars

5. WP Web Fonts

WP Web Fonts is another plugin that works with Google Web Fonts. To use it, just find the fonts you want on the Google Web Fonts site. then copy and paste the code into the appropriate places on the WP Web Fonts Options page to add them into your site’s HTML and CSS.

From there, it’s not entirely clear how to actually integrate those fonts into your stylesheets, without directly editing your theme’s CSS, or possibly adding selectors directly into Step 2. Otherwise, fonts across your entire site are replaced with the web font you selected.

Pros: Simple to install.

Cons: The plugin isn’t self-contained, and requires you to copy and paste code from the Google Web Fonts site. It’s also appears to limit you to just one web font.

Average Rating on WordPress.org: 5 stars

6. WP Google Fonts

WP Google Fonts is another Google Web Fonts plugin. This one is particularly easy to use for non-technical users. Just select the font you want to use from the dropdown menu, select which element you want to assign it to, and save. You can also insert custom CSS, or hard-code your font choices into your external stylesheet.

It also shows a preview of available fonts, which is handy since there’s no live preview.

Pros: Versatile for both technical and non-technical users.

Cons: No live preview.

Average Rating on WordPress.org: 4.5+ stars

7. AnyFont

AnyFont allows you to use any TrueType of OpenType font on your WordPress site. It uses FontServ.com to convert your fonts to the various webfont formats. The built-in font manager makes it easy to upload your fonts, and includes a character map so you can verify which characters are available for each font.

There are additional style management options, including drop shadows. You can apply fonts within your posts or pages, or apply them to your CSS elements. Installation is simple. Just install and activate the plugin, set up your account on FontServ.com, and enter your API key.

Pros: Works with any TrueType or OpenType font. Gives you plenty of usage options.

Cons: You’re responsible for hosting your own fonts. You’re also responsible for making sure the fonts you use are properly licensed.

Average Rating on WordPress.org: 3+ stars

Conclusion

While there are currently a limited number of options for font replacement in the newest versions of WordPress, the options that are available are excellent. Whether you want a premium service, a self-hosted option, or a free service, there’s a plugin listed above that will work for you.

Webfont implementation is sure to grow in the immediate future, due to the options it opens up for designers, and there are sure to be more font replacement plugins available in the coming months and years.

In the meantime, what’s your favorite font replacement plugin? Did we miss any above? Let us know in the comments!

Written exclusively for WDD by Cameron Chapman.

Never Ending WordPress Business Bundle – only $14!

A lot of designers, it seems, are intimidated by the idea of @font-face embedding though. Even though it’s been gaining popularity and support for the past couple of years, a lot of designers still stick to their usual collection of web safe fonts for the vast majority of their designs. On the rare occasion they do step out of their comfort zone and include a web font, they just go with a webfont subscription service rather than looking into DIY embedding or something like Google Web Fonts.

In this article, I’ll give you everything you need to know to start embedding your own fonts, and to start using Google Web Fonts. The code itself is simple, and I’ll also break down exactly why we’re using the code we’re using. I’ll even give you ten great examples of web font combinations that you can implement on your own designs in case you’re not yet comfortable with typeface combos.

Legalities associated with font embedding

It’s important to start out with a discussion of the legal issues that can be present when embedding fonts on your website. Not all fonts are licensed for that kind of usage, especially commercial fonts. Some require extended licenses, while others prevent the practice all together (or sell a service to handle the embedding for you).

It’s important to check the EULA for whatever fonts you plan to use to make sure @font-face embedding is permitted. If not, you’ll either need to choose a different font, find out if there’s a separate license you can purchase, or see if one of the web font services out there includes your font of choice.

Options for embedding

Embedding fonts with @font-face isn’t particularly complicated, but it is a multi-step process. There are a couple of different ways to do this, including some free and paid services as well as a completely DIY method.

DIY embedding

For the best results and the most comprehensive browser support, you’ll want to use a tool like Font Squirrel’s @font-face Generator. This free tool lets you upload any font you have appropriate permissions for and converts it to the various supported font file types for different browsers.

Once you have your font package, you’ll want to upload it to your server, probably in a directory called “fonts” or something similar. Once that’s uploaded, you’ll go into your site’s CSS and include the following code:

@font-face {
font-family: "Dancing Script";
src: url("fonts/DancingScript.eot");
src: local("#"),
     url("fonts/DancingScript.ttf") format("truetype"),
	 url("fonts/DancingScript.woff") format ("woff"),
	 url("fonts/DancingScript.svg") format ("svg");
}

Line-by-line, this breaks down as follows:

font-family: "Dancing Script";

This part specifies the font name so that we can call it later in our styles.

src: url("fonts/DancingScript.eot");

EOT files are supported by Internet Explorer 4.0 and newer. Without this file, your @font-face implementation won’t work in IE versions older than 9.0.

src: local("#"),

This line prevents a local font from being loaded, if one exists. While some programmers prefer to have the local font load to save bandwidth, the potential for it to cause problems may outweigh the benefits. If someone has a different version of the font installed locally (or, say, a poorly pirated version), it could have a drastic impact on how your design looks. In my opinion, it’s better to play it safe and maintain full control over exactly which font loads.

url("fonts/DancingScript.ttf") format("truetype"),

TrueType fonts are compatible with Mozilla 3.5+, Safari 3.1+, Opera 10+, and Chrome 2.0+.

url("fonts/DancingScript.woff") format ("woff"),

This .woff file will take care of IE 9+, Mozilla 3.6+, Safari 5.1+, Opera Presto, and Chrome 5.0+.

url("fonts/DancingScript.svg") format ("svg");

This final format will take care of Safari 3.1+, Opera 9+, and Chrome 0.3+. SVG is also necessary for iPad and iPhone Safari, as it currently won’t work with other font formats.

Using multiple formats of your fonts is important for maximum browser compatibility. We’ve left out OpenType (otf) fonts here, because they don’t add any compatibility that doesn’t exist with TrueType fonts (and TrueType fonts are compatible with Chrome, while OpenType fonts aren’t).

Now, when you’re ready to call the font in your CSS, you treat it just like a regular web-safe font.

h1 { font: 24px "Dancing Script", "Times New Roman", serif; }

Make sure you specify fallback fonts so that if for some reason the web font doesn’t load (or your visitor is using an unsupported browser), you still have at least some control over how the site looks. If you don’t, then the default font will load, and all too often that’s a monospaced font like Courier New.

Google Web Fonts API

Only a few months ago, the Google Web Fonts API only included a couple dozen fonts. It was great if the font you happened to want to use was included, but otherwise it wasn’t of much practical use. That’s changed.

Google now hosts more than 230 font families, many with multiple styles or weights. And they’re all free to use. This is a great resource for designers who want to use web fonts but don’t necessarily want to host their fonts themselves (possibly due to bandwidth issues).

Google offers three different methods for included fonts: a standard method, which uses a link to a CSS stylesheet in your head, an @import method, and a JavaScript method.

Regardless of which one you decide to use, you don’t have to sign up for any special account, and grabbing fonts is a one-step process (just find the font you want and then click on “Quick-use” to get the code).

Font Services

There are a number of other font services, such as Typekit and Fonts.com Web Fonts, most of which are subscription-based. Their fees vary pretty widely, as do their terms. We covered them in more detail in a previous post.

The main reason to use one of these services is when whatever typeface you want to use (or need to use due to client specifications) isn’t licensed for regular @font-face embedding, but is available through one of these services. Since some of the services are provided by type foundries themselves, there’s a wider selection available.

For the most part, these services work the same as the Google Web Fonts API as far as embedding goes, though each has their own specific method. Another added benefit is that you get support if you’re having issues with embedding or using the fonts.

When to use @font-face

Because of relatively widespread support, @font-face can be used on virtually any website. It’s a great way to set apart an otherwise simple and clean design from the millions of other simple and clean designs out there. It can also add extra character to more visually complex designs. There’s really no excuse not to use a great font for at least the headlines on sites you design.

Of course, all of these new options can be really intimidating for designers who aren’t expert typographers. But luckily, there are plenty of resources out there for combining typefaces that can help you come up with your own combinations. In the meantime, below are ten combinations you can use right now, made up of free fonts from either Font Squirrel or Google Web Fonts API.

Awesome webfont combos

If you’re not sure where to start combining typefaces, try these combos on for size.

Comic book site

Now there’s absolutely zero excuse to ever use Comic Sans on a website!

Komika Title | Colaborate Light | Komika Text

Classic, elegant site

This combination is classic and elegant, but combined with the right background and color scheme, it can also seem fresh and modern.

Dancing Script | Droid Serif | Droid Sans

Grunge site

Grunge type is best left to the titles, but that doesn’t mean you can’t also find some great typefaces for your other text.

Copystruct | Cicle | Miso

Simple and clean site

Simple and clean used to mean Helvetica. Not any more.

Oswald | Actor | Terminal Dosis Light

More grunge

Here’s another alternative for grunge style sites. This one would also work well on an illustrated site.

FFF TUSJ | Brawler | Perspective Sans

Retro site

This combination screams mid-century America.

Yellowtail | Josefin Sans Semi-Bold 600 | Rokkitt

Feminine site

Feminine doesn’t necessarily have to equal dainty. The details on these typefaces give a feminine touch without being wimpy.

Leckerli One | Snippet | Amaranth

Funky and modern site

Funky typefaces add a lot of character. Just make sure you keep readability in mind.

Megrim | Andika | Puritan

Formal site

A more formal site requires more formal typography. Here’s a combination of a formal script with traditional serif and sans serif typefaces.

Tangerine | Crimson Text | Rosario

Unique and modern sites

Another unique, funky typeface pairing. The contrast between the sharp angles of the title and body fonts with the rounded edges of the meta font is a nice touch and adds a lot of interest.

Geostar | Kelly Slab | Comfortaa

Conclusion

As has already been mentioned, there’s really no excuse for not working with @font-face anymore. The rules of good typography still apply, and everything you know about combining websafe fonts carries over. You just have a lot more options now!

Written exclusively for WDD by Cameron Chapman.

How often do you use @font-face in your own projects? Do you DIY or do you use a service? Share your experiences and tips in the comments!

Never Ending WordPress Business Bundle – only $14!

One group has a handful of favorite typefaces they adapt to every design they create, believing that these handful of typefaces can be suitable for every situation.

The other camp believes in using a huge variety of typefaces, picking and choosing each one based specifically on the project at hand. Regardless of which camp you fit into, the typefaces below should interest you.

They have proven popular among designers the world over, and are used in designs for everything from multi-national corporations to individual books or journals.

Have we missed one of your old time favorites? Go ahead and add it in the comments area.

Akzidenz Grotesk

Akzidenz Grotesk was the first widely-adopted sans serif typeface, and an influencer of many later neo-grotesque typefaces, including Helvetica and Univers. There are a number of variations available, including Akzidenz-Grotesk Book, Book Rounded, Schoolbook, Old Fact, and Next. Akzidenz-Grotesk is one of the official fonts of the American Red Cross (along with Georgia).

Akzidenz Grotesk was created in 1898 by H. Berthold AG type foundry, and was originally called “Accidenz-Grotesk”. It’s been speculated that the typeface was derived from either Didot or Walbaum, which have similar looks if their serifs are removed. The official report, though, is that it was based on Royal Grotesk light, designed by Ferdinand Theinhardt (which was later merged into Berthold). Modern iterations of the typeface are descendants of a late-1950s project at Berthold to enlarge the type family, though these new typefaces retain the idiosyncrasies of the original.

Strengths
Akzidenz-Grotesk is a versatile typeface, suitable for both headlines and body copy. The slight idiosyncrasies present in the typeface give it a bit more visual interest than other, similar neo-grotesques.

Best Uses
It’s suitable for use in virtually any project.

Avenir

Avenir is a geometric sans-serif typeface designed in 1988 by Adrian Frutiger. The name, Avenir, means “future” in French. It was designed to be a more humanistic version of traditional geometric typefaces like Futura. Upon release, it was available in three weights, using Frutiger’s two-digit weight and width naming convention: 45 (book) /46 (oblique), 55 (text) /56 (oblique), and 75 (bold) /76 (oblique). Three more weights were later added.

Avenir is a relatively new typeface, but it’s become widely used. LG uses it for the buttons on most of their cell phones. BBC Two uses Avenir in its logo and identity. Dwell magazine started using it in 2007, and the upcoming J.J. Abrams film Super 8 also uses it for titles.

Strengths
Avenir’s greatest strengths are its simplicity and balance. It bridges the gap between geometric and humanist sans-serifs, making it a versatile, modern choice.

Best Uses
Avenir is suitable for both headline and body copy. Improvements in hinting have made it better for on-screen viewing at smaller sizes.

Baskerville

Baskerville is a transition serif typeface that falls somewhere between classical typefaces like Caslon and modern serifs like Didot. It was created by John Baskerville as an attempt to improve upon the typefaces created by William Caslon. To that end, it has more contrast between the thick and thin strokes of the letterforms, as well as sharper serifs and a more vertical axis to rounded letters. The characters are also more regular, and the rounded strokes are more circular.

Baskerville was created in 1757, and then revived by Bruce Rogers for the Harvard University Press in 1917. The original typeface was used by John Baskerville to print a folio Bible. His rivals of the time were intimidated by the perfection of his work, and some claimed that the stark contrasts of his typefaces would damage the eyes. Others admired him, including Fournier, Bodoni, and even Benjamin Franklin.

Baskerville was also revived in England in 1923 by Stanley Morison for the British Monotype Company. In 1996, it was used by Zuzana Licko as the basis for the Mrs Eaves typeface. A free version of Baskerville, called Open Baskerville, has also been created.

Strengths
The clarity and consistency of the letterforms are what make Baskerville such a readable typeface. It’s widely used in documents, and has a traditional, professional look. The University of Birmingham uses it for many of its documents, and a modified version can be seen in some of the Canadian government’s corporate identity materials (including in the “Canada” wordmark).

Best Uses
Baskerville is excellent for body copy, and is suitable for use in books, newsletters, newspapers, and other printed materials. It’s also a fairly common typeface, making it suitable for use on the web, though backup typefaces also need to be specified.

Bembo

Bembo is an old style serif, based on a humanist typeface created by Francesco Griffo in the late 15th century. It has a number of characteristics of humanist typefaces, including minimal variation between the weights of thin and thick strokes; a small x-height; short, bracketed serifs; angled top serifs on lower-case letters; and ascenders that are taller than capital letters.

Bembo was revived by the Monotype Corporation in 1929, under the direction of Stanley Morison. The original typeface was first used in February of 1496, though, in a 60-page book about a journey to Mount Aetna, called Petri Bembi de Aetna Angelum Chalabrilem liber, written by Pietro Bembo. Francesco Griffo later cut the first italic types, for Aldus Manutius.

Since the original typeface had no italic cut with it, it’s rumored that renowned calligrapher Alfred Fairbank was commissioned by Stanley Fairbank to create an italic for Bembo. Fairbank maintains that he created the type independently and then sold it to Monotype, but in either case, the metal type for an italic version of Bembo was released in 1929.

Strengths
Bembo is considered a good classical typeface, with a strong humanist, Old Style look. It’s perfect for use in designs where classic beauty or formal tradition are important.

Best Uses
Bembo is considered a good choice for book typography.

Bickham Script Pro

Bickham Script Pro is a script typeface based on English round hand writing common in the 18th century, and specifically on the engravings of George Bickham. It’s an ornate, romantic typeface, available in regular, bold, and semibold weights. Bickham Script Pro was created by Richard Lipton in 1997, and is available as part of the Adobe Type Library.

Strengths
Bickham Script Pro is excellent for formal, elegant designs, especially those reminiscent of its origin in the 18th century. It also includes a number of OpenType features, including discretionary ligatures, swashes, superscripts, stylistic alternates, and cast-sensitive glyph connectors. The contextual changes that occur to the characters as one types make it an especially versatile typeface, and improves your designs effortlessly.

Best Uses
Bickham Script is purely a display typeface, perfect for headings and subheads. It’s commonly seen in logos, menus, invitations, annual reports, and packaging, in primarily formal, elegant designs.

Bodoni

Bodoni is a modern serif typeface, with high contrast between thin and thick stroke weights, and a slightly condensed shape. It was based on the work of John Baskerville, but has taken his ideas to a more extreme conclusion. There are a few variations on Bodoni, some with more transitional shapes (including ITC Bodoni and Bodoni Old Face), and some more modern.

Bodoni was first designed by Giambattista Bodoni in 1798. In addition to the influence from Baskerville, Bodoni was also influenced heavily by the work of Pierre Simon Fournier and Firmin Didot.

Strengths
Bodoni, for the most part, is best suited to larger font sizes. Because of the extreme variation between thin and thick strokes, it can degrade at small sizes and become illegible (specifically, it creates an effect known as “dazzle”). There are some typeface variations though, that are optimized for use at smaller sizes (including Bodoni Old Face at 9 points, ITC Bodoni 12 at 12 points, and ITC Bodoni 7 at 7 points).

Best Uses
Bodoni is well-suited for use in modern designs where a serif typeface is desired. It’s a great serif for use in headlines and subheads, though some variations can be used for body copy, too. Some of its more recognizable uses can be found in the logo for grunge band Nirvana, and on the Mamma Mia! posters.

Caslon

Caslon is a set of serif typefaces with the irregularity common of Dutch Baroque types. It has short ascenders and descenders, bracketed serifs, and is moderately-high contrast. The italics have a rhythmic calligraphic stroke, and some of the lowercase italics have the suggestion of a swash.

The first Caslon typeface was designed in 1722. It was similar to Dutch Fell types by Voskens, and also by the typefaces cut by Van Dyck, another Dutchman. The Caslon types were used throughout the British Empire, including British North America. The decayed appearance common in a lot of early American printing is often thought to be caused by the oxidation that resulted from long exposure to seawater during the transport of metal type from England to America. Caslon was used extensively, and perhaps most famously in the printing of the U.S. Declaration of Independence.

Strengths
Caslon is sometimes considered a great universal typeface. There was even a common rule of thumb among printers and typesetters, “When in doubt, use Caslon.” It’s a versatile typeface that can be used equally well in headings or in body copy. The wide variety of weights and styles available make it even more versatile.

Best Uses
Caslon can be used for virtually any kind of typesetting, from body copy to headlines, and is quite legible at small sizes.

Clarendon

Clarendon is a slab-serif typeface, and is considered to be the first registered typeface. There’s only moderate contrast between thick and thin strokes, common of slab-serifs. It was originally designed by Robert Besley for the Fann Street Foundry in 1845. It was later copied heavily by other foundries.

Clarendon was used heavily during World War I by the German Empire, and was commonly used in wanted posters in the American Old West. More recently, it was used by the US National Parks Service on traffic signs, and became the typeface of choice by the Ruby Tuesday restaurant chain when they relaunched their corporate identity in 2008.

Strengths
Clarendon has strong letterforms common to slab serifs. It’s also a very readable typeface, which makes it appropriate for use at somewhat smaller sizes.

Best Uses
Strong letterforms make Clarendon a great choice for things like signs, logos, and headlines. It’s already used by companies like Sony and Wells Fargo in their logos.

Franklin Gothic

Franklin Gothic is a relatively high profile grotesque sans serif typeface. In addition to Franklin Gothic, the News Gothic, Alternate Gothic, Monotone Gothic and Lightline Gothic typefaces are essentially just different weights of the original. Franklin Gothic itself is an extra-bold typeface, with a traditional double-story “a” and “g”.

Franklin Gothic was first created in 1902. “Gothic” at that time just meant sans serif. It briefly fell out of popularity in the 1930s with the rise of Futura and Kabel, but was then rediscovered by American designers in the 1940s, and has remained popular since.

Strengths
Franklin Gothic is quite a strong typeface, stylistically, though the addition of related typefaces makes it much more versatile.

Best Uses
Franklin Gothic is well-suited to display use due to its weight. Other variations of the typeface, though, can be used for body copy, especially in onscreen situations.

Frutiger

Frutiger is a sans serif typeface designed by Adrian Frutiger. There are also serif and ornamental varieties of Frutiger, including Frutiger Serif, Frutiger Stones, and Frutiger Symbols. Frutiger was originally commissioned in 1968 by the Charles De Gaulle International Airport for their directional sign system. Frutiger was originally called Roissy (the airport is located in Roissy, France), and was completed in 1975.

Strengths
Frutiger was designed to have the rationality and cleanliness of Univers (also designed by Adrian Frutiger), but with the proportional and organic aspects of Gill Sans. Because of this, Frutiger is both distinctive and legible, with a modern appearance. Apertures of the typeface are wide and ascenders and descenders are prominent, making it easy to distinguish letters from each other.

Best Uses
Because of its excellent legibility, Frutiger is suitable for a variety of uses. It’s especially well-suited for signs though, as its readable from a distance, and from varying angles.

Futura

Futura is a geometric sans-serif typeface that was commissioned by the Bauer type foundry in 1927. Originally, it included Light, Medium, Bold, and Bold Oblique fonts, and then later Light Oblique, Medium Oblique, Demibold, Demibold Oblique, Book, Extra Bold, and Extra Bold Italic fonts were released.

Futura was designed by Paul Renner. While he wasn’t associated with the Bauhaus, he shared the idea that a modern typeface should express modern models, rather than simply reviving an older design.

Strengths
Futura has an efficient, forward appearance, and is derived from simple geometric forms. This is evident in the obvious influence of near-perfect circles, squares, and triangles. All non-essential elements were removed from the typeface, and the uppercase characters have proportions similar to classical Roman capitals.

Best Uses
Futura is an excellent choice for advertising copy. It was used by IKEA until 2010, Volkswagen, Shell Petrol, and HP in their advertising and branding. West Anderson uses Futura for all of his films, and it was also Stanley Kubrick’s favorite font. It’s well suited to any modern design, for both headings and short copy.

Garamond

Garamond is an old-style serif typeface, named after punch-cutter Claude Garamond. Adobe Garamond and Stempel Garamond were both based on this original typeface from the 16th century, and Granjon and Sabon were heavily influenced by it. There are a few unique characteristics of Garamond, including the small bowl of the lowercase “a” and the small eye of the “e”.

Garamond is one of the most legible serif typefaces, especially for use in print applications. It’s also one of the most eco-friendly typefaces in terms of ink usage. The original punches and matrices were sold to Christopher Plantin upon the death of Claude Garamond, and were in turn used in many printers, adding to its rise in popularity. Garamond revivals were created as early as 1900.

Strengths
Garamond’s greatest strength is its legibility and readability.

Best Uses
Garamond is an excellent choice for printed materials, including books and reports, due to its high legibility in print.

Gill Sans

Gill Sans is a humanist sans-serif typeface created in 1926 by Eric Gill. It was developed further, into a complete type family, after being commissioned by Stanley Morison to compete with the families of Erbar, Futura, and Kabel. In 1928, Gill Sans was released by Monotype Corporation.

The uppercase characters of Gill Sans are based on Roman capitals like those found in Caslon and Baskerville. There are fourteen styles in the family. Gill Sans is distributed as a system font with Mac OS X and is bundled with some Microsoft products as Gill Sans MT.

Strengths
Gill Sans has a less mechanical feel to it than typefaces like Futura, because of its basis in Roman tradition. The lowercase letters are modeled on the lowercase Carolignian script, which is especially noticeable in the two-story lowercase “a” and “g”. This basis in traditional, classical typefaces gives Gill Sans a more refined look than many other sans serif typefaces.

Best Uses
Gill Sans is ideal for display uses, and can be used successfully as a text font at larger sizes. It’s best suited for modern designs, though it can be combined successfully with more traditional typefaces for classic designs.

Helvetica

Helvetica is probably the most commonly used typeface in all of graphic design, and almost certainly the most widely used sans serif. It was developed by Max Miedinger in 1957 with Eduard Hoffman, for the Haas Typefoundry. There are dozens of variations and numerous typefaces have been based on it.

Helvetica is often considered a “neutral” typeface, in that it takes on the mood and attitude of its surroundings. Used in a modern setting, it appears modern. And yet it can blend into a classic setting effortlessly, too. It’s largely because of this chameleon-like ability that Helvetica has become so widely used.

Strengths
As mentioned, Helvetica’s ability to be used in virtually any circumstance is probably its greatest strength. It also has excellent letterforms and kerning.

Best Uses
Helvetica could be argued to be the most versatile typeface out there. It’s literally suitable for virtually any kind of design application, and looks good at both large and small sizes. It’s used in numerous logotypes (including those for American Airlines, American Apparel, 3M, Verizon Wireless, Motorola, Panasonic, Target, Toyota, Microsoft, and many, many others). It’s commonly seen online for both body copy and headlines, and can be seen in use on signs around the world.

Lucida Sans/Lucida Grande

Lucida Sans is a humanist, sans-serif typeface that is part of the larger Lucida type family (which includes serif, blackletter, console, and other variations). It was designed by Chalres Bigelow and Kris Holmes in 1985 as a complement to the Lucida Serif typeface. Technically, Lucida Grande is part of the Lucida Sans type family (which also includes Lucida Sans Typewriter, a monospaced typeface, and Lucida Sans Unicode, which is based on Lucida Sans regular but with additional characters).

Strengths
Lucida Grande and Lucida Sans are both highly legible, even at small sizes. Because of this, they’re heavily used for body copy and large blocks of small text.

Best Uses
Lucida Grande and Lucida Sans are both commonly seen as the primary typeface for body text on various websites and blogs, Facebook being just one example. It’s most recognizable, though, for its use throughout the user interface of Mac OS X.

Minion

Minion is an old style serif typeface, inspired by late Renaissance-era typefaces. It was designed in 1990 by Robert Slimbach for Adobe Systems. One unique feature of Minion is the support of Regular and Display optical sizes, meant to optimize the legibility by using different stroke contrasts and details, in the Regular and Italic versions of the typeface.

The Minion Expert font package includes small caps, ligatures, old style ligatures, and swash glyphs that aren’t included in the regular Minion package. There’s also a Cyrillic version of Minion available.

Strengths
The different optical sizes available with Minion are one of its greatest strengths, making it considerably more versatile.

Best Uses
Minion is an excellent choice for printed copy, and is used for typesetting books and journals. It has also been used in various logotypes, including MathWorks’ Matlab and Brown University.

Myriad

Myriad is a humanist sans-serif typeface created specifically for Adobe Systems by Robert Slimbach and Carol Twombly. It’s easily distinguishable from other sans-serif fonts because of its special “y” descender and slanting “e”cut.

Originally, Myriad was offered in two weights, with complementary italics for each. Later, a condensed version was released, and then a “Headline” version. Additional variations have since ben released, including Myriad Web and Myriad Pro.

Strengths
Myriad’s greatest strength is the letterforms it includes that set it apart from other sans-serif typefaces, which are often too similar to be easily recognizable.

Best Uses
Myriad is recognizable as the typeface of choice for Apple’s branding efforts. It’s well-suited to modern designs, especially if you want to evoke Apple’s corporate branding.

Optima

Optima is a unique sans-serif typeface, in that it uses varying stroke weights more commonly found in serif typefaces. In addition to the varying stroke weights, it also has subtle swelling at its terminals, reminiscent of a glyphic serif. The italic version of Optima is really just an oblique, without any specialized italic letterforms (like a single-story “a”), which is more typical of realist sans-serif typefaces like Helvetica.

Optima was designed by Hermann Zapf in the mid-50s, for the D. Stempel AG Foundry. Linotype owns the trademark to Optima, though the typeface is widely imitated (Bitstream’s Zapf Humanist is one such example, as well as the free MgOpen Cosmetica).

Strengths
Optima’s similarity to serif typefaces gives it a more classic appearance than most sans serifs. It also improves legibility at some sizes.

Best Uses
Optima is an elegant if conservative type choice, and is well-suited to understated designs. Most famously, it’s been used for the Vietnam Veterans Memorial, and by the 2008 John McCain presidential campaign. It’s also the official branding typeface of Estée Lauder Companies and Aston Martin.

Palatino

Palatino started out as an old style serif typeface designed by Hermann Zapf. It was released in 1948 by Linotype. A revised version was released in 1999, also designed by Zapf, called Palatino Linotype. This new family included extended Latin, Greek, and Cyrillic characters.

The original Palatino was based on humanist typefaces from the Italian Renaissance, and was named after 16th century Italian calligraphy master Giambattista Palatino. Palatino has larger proportions than most Renaissance-inspired type, and because of that is much easier to read.

Strengths
Palatino’s greatest strength is its readability.

Best Uses
Palatino is widely used for body copy, especially in books and similar printed materials.

Rockwell

Rockwell is a slab serif, with no real variation in stroke weight. It was designed in-house at Monotype in 1934, supervised by Frank Hinman Pierpont. It’s a geometric typeface, with upper- and lowercase “O” more of a circle than an ellipse. The serif at the apex of the uppercase “A” is a distinctive feature of Rockwell that sets it apart from many other serif type faces.

Strengths
The geometric forms of Rockwell make it more similar to sans-serif typefaces, making it a good choice for combining with geometric sans serifs.

Best Uses
Rockwell is best-suited for use as a display typeface due to its thick, monoweighted strokes.

Sabon

Sabon is an old style serif typeface designed by Jan Tschichold between 1964 and 1967. It was released jointly by Linotype, Monotype, and Stempel foundries in 1967. It’s based on typefaces designed by Claude Garamond, particularly the one printed by Konrad Berner of Frankfurt, as well as the italics by Robert Grandjon.

One of the distinguishing features of Sabon is that the roman, italic, and bold weights all take up the same width when typeset. It’s an unusual feature, but meant that only one set of copyfitting data is needed for all three styles.

Strengths
Sabon is a highly legible typeface, with moderate contrast between thick and thin strokes. That makes it suitable for use in a variety of sizes.

Best Uses
Sabon is a favorite for typesetting book copy, and is well-suited to any traditional or formal design.

Times New Roman

Times New Roman was commissioned by the British newspaper The Times in 1931 after the paper was criticized by Stanley Morison for being typographically antiquated and poorly printed. It was created by Cameron S. Latham of Monotype, under the supervision of Morison.

The name “Times New Roman” was used because the former font of The Times was called “Times Old Roman”. It was based on another typeface by Morison, called Plantin, but revisions were made to make it more economical in terms of space and to increase legibility. Times New Roman is still widely used in book typography, and it has served as the basis for a number of other typeface, including Georgia.

Strengths
The ubiquitous nature of Times New Roman has made it an ideal choice for situations where fonts can’t be embedded. It’s also highly readable, even at smaller sizes.

Best Uses
Times New Roman is best suited for body copy, both online and off.

Univers

Univers is a neo-grotesque sans serif typeface that was designed by Adrian Frutiger in 1954, and released by Deberny & Piegnot in 1957. It was then acquired by Haas in 1972, and later by D. Stempel AG and then Linotype.

Univers is based on the 1898 typeface Akzidenz-Grotesk, which was also the basis for Helvetica (the two typefaces are sometimes confused). The entire Univers type family consists of 44 faces, with 16 uniquely numbered weight, width, and position combinations. Twenty of these fonts offer oblique characters, while eight support Central European character sets and another eight support Cyrillic characters.

Strengths
The largest strength of Univers is its diversity, which is further enhanced by the number of weights available. It also has some of the same neutral character of Helvetica.

Best Uses
Univers is well-suited to a variety of designs, especially modern designs. It works well as both body copy and display.

Close calls

There are a lot more typefaces that are commonly used by designers the world over. Below is just a partial list of some additional popular choices (feel free to add more in the comments!):

Antique Olive

Avant Garde

Century Gothic

Dax

Didot

Din

Gotham

Meta

Mrs Eaves

Trade Gothic

Trajan

VAG Rounded

Warnock

Written exclusively for WDD by Cameron Chapman.

What do you think of these fonts? Have we missed any of your old time favorites? Go ahead and add them in the comments below.

Never Ending WordPress Business Bundle – only $14!

These kinds of readability enhancements are done either via manual CSS styling or with plug-ins. If you’re not familiar with CSS coding, then plug-ins are definitely the way to go, and this article highlights the top 10 typography-related WordPress plug-ins for enhancing the readability of your blog.

Plug-ins like these are important because they help you better handle hyphens, spacing, character formatting, text enhancements, quotes and much more. By using just a plug-in or two, you can breath life into an otherwise dull layout and keep readers longer.

So, let’s look at how to make your blog come to life with enhancement plug-ins.

1. Drop Caps

Drop Caps increases the readability of your posts through the addition of a stylish drop cap at the beginning of every first paragraph. You can also add drop caps to comments and excerpts. The plug-in comes with a default style sheet, but you can change the CSS as needed.

While you can set the plug-in to automatically insert drop caps at specified locations, you can also manually add them anywhere using the Drop Cap Shortcode plug-in. And if you need support for foreign language characters, wp-dropcaps has you covered.

• Download plug-in (ZIP)

2. WP Typography

Known as a one-stop shop for improved web typography, WP Typography adds some very useful features to your blog. It helps with hyphenation, spacing, character replacement and styling (via CSS hooks). And it supports over 40 languages.

The spacing control is great because it forces internal wrapping of long URLs and email addresses. The character-replacement feature formats things like quotation marks, dashes, and trademark and copyright symbols. And the CSS hooks are great for styling marks such as the ampersand, double quotes, acronyms and more.

• Download plug-in (ZIP)

3. Simple Pull Quote

If you ever wanted a way to set off and emphasize quotes in your posts, then Simple Pull Quote is for you. It adds a “Pullquote” button to your HTML and TinyMCE editor, allowing you to emphasize any text you choose, putting it in its own block to the side of your content, like so:

While the plug-in comes with default styling, you can override it with CSS. Because many themes do not come with a style for pull quotes, this is a great way to accentuate them.

• Download plug-in (ZIP)

4. TextImage

TextImage replaces the full content of your posts with PNG images. If you’re wondering why someone would want to do this, it’s simple: to hide the content from robots and spiders. Converting text to an image makes it unreadable and, therefore, unable to be indexed by search engines.

You can style the image’s background, font and size as needed. Because it is an image, you cannot apply formatting such as bold, italics or underlining (unless it was in the original post). Also, the plug-in strips out all HTML tags from your post.

• Download plug-in (ZIP)

5. CodeColorer

If you use a lot of code snippets in your posts (PHP, HTML, Ruby, JavaScript, etc.), CodeColorer will definitely come in handy. It allows you to add code snippets to posts and comments alike. Customize the look of the snippets with CSS to make them stand out.

The plug-in supports over 20 languages and offers numerous features such as syntax highlighting in RSS feeds, syntax highlighting for single lines of code, line numbering, intelligent scroll detection, and pre-made themes. To add a snippet to a post, simply use the integrated shortcode.

• Download plug-in (ZIP)

6. Censortive

Freedom of speech on the web is often blocked by Big Brother technologies that sniff out “sensitive” words. If you want to take control of your freedom of speech, Censortive can help.

This is an anti-censorship plug-in that simply replaces “sensitive” words with a graphic equivalent, making them invisible to censorship robots. The plug-in changes words into image files that blend right in with your theme and text.

• Download plug-in (ZIP)

7. WP Footnotes

WP Footnotes lets you create and manage footnotes and sidenotes as if your blog post was a Microsoft Word document. Once the plug-in is installed, simply type in whatever text you want for the footnote in double parentheses, and WP Footnotes does the rest.

A nice touch is the ability to repeat footnotes; to refer to a previous one, simply insert the text that you used earlier. Pretty neat, huh?

• Download plug-in (ZIP)

8. Post Typographer

Post Typographer is kind of like WP Typography: a one-stop shop for post typography. When you publish or update a post, it is automatically formatted according to the rules you set for the plug-in.

These rules include: adding non-breaking spaces where needed, converting hyphens to em and en dashes as needed, removing extra spaces, wrapping content in tags where needed, and preserving the contents of pre tags.

• Download plug-in (ZIP)

9. Text Control

Text Control gives you total control of text-related formatting on your blog. You can enable options individually for each post or globally for all posts and comments. When you first install the plug-in, WordPress’ default settings remain intact, and then you can choose from an assortment of syntaxes and encoding options.

Text Control is pretty advanced and has a lot of features. Formatting options include Markdown, Textile 1, Textile 2, nl2br, WPautop and “No Formatting.” Character encoding options include SmartyPants, WPTexturize and “No Encoding.”

• Download plug-in (ZIP)

10. WP Super Edit

Finally, WP Super Edit. This adds functionality to WordPress’ WYSIWYG editor. You can add buttons to the toolbar, add custom TinyMCE plug-ins, and arrange the buttons with a drag-and-drop interface (up to four rows). And if there are some buttons you never use, you can easily remove them.

You can also add features such as tables, layers, advanced image and link properties, emoticons, search-and-replace functionality and more. There are even role-based editor settings and individual user settings, so each user can have an interface tailored to their needs.

• Download plug-in (ZIP)

Lior Levin is an online marketing consultant and a guest blogger in many blogs on the web. He’s an advisor to a psd to xhtml service company from OR and likes to engage in conversations about future web trends.

How have you enhanced the readability of your blog? Which typography-related WordPress plug-ins are your favorites? Do you use any of the ones mentioned here? If so, feel free to share your experience in the comments.

Never Ending WordPress Business Bundle – only $14!

Erik and his wife Joan, revolutionized the world of digital fonts twenty-two years ago when they started FontShop—the first mail-order distributor for digital fonts.

This year, he was awarded the Federal Republic of Germany’s 2011 Design Prize for Lifetime Achievements— a most noble accomplishment. The exhibition, Erik Spiekermann, The Face of Type recently took place at the Bauhaus-Archive Museum of Design in Berlin.

Spiekermann is an Honorary Professor at the University of the Arts in Bremen, the author of the Adobe Press title, Stop Stealing Sheep, and the originator of the colorful map for the Berlin metro system.

He recently took time out of his busy schedule to speak to Webdesigner Depot about typeface design and what he sees next in his future. We thank Mr. Spiekermann for speaking with us and invite WDD readers to comment on how his contributions to typeface design have helped shape your work.

What was the first typeface you fell in love with?
Reklameschrift Block. It was what my neighbour gave me with my first little printing machine when I was 12.

Which of your fonts do you feel should be more popular and why?
FF Info Office because it works well on screen and is really cool but nobody has found it behind the larger FF Info Text and Display families.

FF Info

Being one of the lead font designers in the world, who or what do you learn from in order to keep pushing yourself?
The world out there: technical developments, trends, other designers, other cultures. In other words: by observing what goes on in the visual world.

What are some of your proudest projects ever?
Making the buses and trams in Berlin bright yellow instead of the boring beige they were before. Making it both easy and pleasant to find your way around the Berlin Transit system. And giving Deutsche Bahn (German Railways) their face by designing their corporate design, including all the typefaces which work from the smallest timetable to the largest poster.

What do you think of Apple and their approach to design in general? How does their industrial and web design compare to typeface design?
I bought my first Mac in 1985 and have probably bought every single computer they ever made at one time. I also have a large collection of equipment by BRAUN, most of it designed by Dieter Rams. If you look at the stuff from the 60s now, you see where Apple (i.e. Jon Ives) get their direction. They have learnt to bring objects down to the essentials without making them look boring and purely functional. They know that aesthetics play a big role in function because we do not like to use anything that is ugly. Function also follows form. Perhaps that is the common denominator for my typefaces: I have always designed my faces for a specific purpose, but they always have to look pleasing, whatever purpose they serve.

Can you briefly describe what the current process is like for you to create a new typeface and where do you get your inspiration from?
The question about inspiration is tedious because I work like everybody else. Everything can be inspirational, there is no method or proper process. Like any design process, I look at the brief, take it apart, look at comparable briefs, make analog sketches, discuss with colleagues and the client and then carry on condensing the sketches, at some point digitally.

Please finish this sentence: “In an ideal world, fonts…”
Would be paid for.

FF Meta

What was one of the most challenging typography problems you have ever had to solve?
It is always the same: to find a visual voice for all the communication of a large corporation. It is supposed to express their identity (whatever that may mean), be legible, pleasant to look at, work technically across platforms, and be applicable across the world. I’ve done that for Nokia, Cisco, Bosch, German Railways, Heidelberg Printing and many smaller brands.

What is the plan for rolling out more web fonts on FontShop?
Rolling out more web fonts.

Where are some of the areas where typography is improving and where do we need to see more growth?
Technology is improving for displaying type properly across media.

What are the challenges today for someone getting started in typeface design versus when you first started in the 1970s?
There is more competition out there. While there are fantastic tools available that I would have killed for, it has also become very difficult to master all of them. We are therefore on the way back to share work between people. Some of us are good at sketching, some at programming, some at using production tools. Not one person can do all of it equally well. That is how type used to be made before desktop computers and that is how type is made again today.

How do you view the state of typefaces in the mobile world?
In flux.

Taking into account small sizes, aliasing and browser font rendering engines, which fonts do you think should be used for body text on the web?
The ones that look good.

What’s the most overrated font in the world?
Arial. It totally sucks but has become the standard for many users and even institutions.

Let’s talk a little about the creative process and how you work. Can you describe your ideal work environment?
This is a silly question because I have no fixed formula. Every project is different and the work environment is always different as well. I do not work on my own, ever. (See question “Can you briefly describe what the current process…”)

Which typefaces’ styles do you think will be the most popular in the near future and why?
The ones that express the Zeitgeist, In other words: all the styles that are appropriate, fashionable, legible and cool, how ever that may be defined at the time. We do not have one style or fashion (not even within one culture, let alone globally) anymore but many currents at the same time. Type design has always been eclectic. Type has always mirrored what went on in the visual world. These days it does so as quickly as music does and even more quickly than literature and film because you can design and produce a single typeface in a few days, all on your own. It is only the larger, more professional typographic systems that need weeks and months to complete, but even that is less than what it takes to make a movie.

What’s next for Erik Spiekermann?
Share my time between San Francisco, Berlin and London (to a lesser extent), work less for clients and more for myself. Use digital technology to make analog things.

Exclusive interview for Webdesigner Depot by Debbie Hemley. Debbie is a blogger and social media aficionado. She works with businesses to develop content and social media strategies. Read her blog posts on All the News. You can also follow Debbie on Twitter (@dhemley) and LinkedIn.

How have you been inspired by Erik Spiekermann’s contributions to typography? And, how does the availability of FontShop’s high-quality digital fonts help your work as a designer?

Never Ending WordPress Business Bundle – only $14!

It doesn’t have depth, color, motion. It doesn’t generate feelings or emotions. It provides us with information; line after line of monotonous information. It’s text!

The YouTubes, Vimeos, Flickrs, and Instagrams of today’s generation feed those who want to forget about typography. They want information with visual and audible cues. As one would expect, gobs of text doesn’t exactly inspire them.

But the Web is still young. Things are growing at a rapid pace, much faster than before. We could, in a large part, thank Internet Explorer 6′s demise for this progression. Now we have the freedom to run wild, explore our creativity, and make typography something that does more than present information.

Will we take advantage of this rare opportunity?

Time is of the essence

Remember back to a time before there was broadband. Remember how impressive it was to see big blobs of information after clicking on this thing called a “webpage.” Sure, there wasn’t much in the way of images, sparkly graphics, or video — and also not much in the way of distraction, either — but there was a great sense of appreciation to be had; this is a new world of information, and it’s all accessible with the tap of a fingertip. Sure, it might have taken a bit longer than it does today, but when all was said and done, we were all floating on cloud nine.

That was then.

It no longer has the same magical feel that it once had. I know that I take it for granted. Maybe we all do. We expect images, videos, and visual feedback. We want things to gracefully fade in and out. We want to see the subject matter, in as many pixels as our screens will allow. And we want to see video, just in case the point wasn’t made clear the first time (bonus points if you include cute kittens).

We expect more than we did back then — rightfully so; this is 2011, and we have the technologies available to us as developers and consumers to enjoy information and new and inspiring ways.

Beautiful typography stands out throughout Mattt Thompson‘s personal website.

Designers and developers are producing content for a new age of consumerism. Those consumers don’t have all day to sift through information. There is too much of it. We know that. What we spent hours doing a decade ago, they spend mere minutes, if they can even last that long. They want information, and they want it now, and they want it in easily digestible formats that will get them in and out in the fastest way possible. If this means writing something in three pages that normally required three hundred, then so be it. They don’t have time to watch 10 minute long YouTube videos — they want it in a single minute.

In the battle for attention, the “TL;DR” is the admission that the battle has been lost. Yes, this ADHD-filled world is going to take its toll on the Web. It’s going to get a whole lot worse before it gets any better.

So who has time for text? We have audio and video at our disposal. It can present information much faster than text could. Indeed, whoever said that a picture is worth a thousand words was not lying; people these days prefer it that way.

But what if there was a way to regain their attention using nothing more than typography?

Typography’s resurgence

Thanks to a growing number of improvements in Web typography, we might not have to worry about the fate of the written word. Instead of diminishing the value of typography, we are seeing a resurgence in it. Interest in typography, especially from Web designers, has skyrocketed. The tools used to render typographical elements are improving — from enhancements introduced and continually developing with CSS3 to JavaScript tools like Lettering.js and jQuery. It is now feasible to create a webpages that look beautiful by using nothing more than a little vision, creativity, code, and typographical know how.

CSS3 has introduced a fair share of flair for typographers. A number of new properties have enabled them to radically expand their usage of typographical elements: transform, transition, column, text-shadow, rotate, and blur properties are just to name a few. The @font-face property, in particular, has also done plenty for Web designers that services like TypeKit are now solely geared towards supplying Web designers with beautiful, Web-ready fonts, something that wasn’t even possible a few years ago.

Designing Monsters uses CSS3 to create bold, eye-catching typography.

JavaScript is also contributing to typography’s resurgence. Lettering.js, in particular, is one of a few tools that have been produced to aid in the creation of beautiful typography on the Web. A JavaScript library called jQuery, which is arguably one of the most discussed on the Web these days, is also stirring things up. JavaScript doesn’t have all of the limitations that CSS3 has, particularly when it comes to the Web browser support; it isn’t perfect, but it gives Web designers more abilities to expand their typographical ambitions.

All of this has culminated into a plethora of typographical experiments that look beautiful in native Web browsing environments (if the given browsers support CSS3 and JavaScript); however, many of these impressive experiments lack consistency throughout the browser market. Some experiments result in variances in different browsers, others won’t render at all.

Unfortunately, this leads to questions as to whether or not all of CSS3′s latest features are ready for the primetime. Sure, Web developers will freely explore their creativity on personal websites; however, exploring these advanced features on a site that receives thousands to millions of hits on a daily basis is risky without planning for the worst case scenarios.

There is plenty of optimism, though. It just might take awhile before we see something like this, this, this, or even this appearing on your everyday webpage.

The future

There are many questions about the Web’s future. What impacts will the rise of video have on media consumption. What impact will the drastic increase in media being presented to users have (and will those consuming it be able to manage)? What will the transition to mobile devices bring? How will the open Web compete with application platforms like iOS and Android?

Naz Hamid utilizes the latest techniques to create a stunning typographical experience.

But the question about whether text/typography will be relevant in the future, that is simple: text is one of the best ways to present information. Web typography will continue to make advances that will ensure that the look of text on the websites will remain fresh and beautiful as ever. Also, the way we perceive text will adapt to these improvements.

Embrace all of the various media formats, but remember that typography is still the most important type of media that exists on the Web today. It was there when it started, it’s here now, and it will continue to be for the distant future. So be sure to explore ways to continually maximize its beauty and usefulness.

Written exclusively for WDD by James Mowery. He is a passionate technology journalist and entrepreneur who has written for various top-tier publications like Mashable and CMSWire. Follow him on Twitter: @JMowery.

Never Ending WordPress Business Bundle – only $14!

A designer may look at typography in the way that it will impact their design, considering aspects such as spacing, leading, weight and size.

But let’s put all of that aside as we take a look at typography used as an experimental form of art.

In this post we feature over 100 amazing typographical experiments, crazy compositions and funky fonts that ooze creativity.

These examples were collected from Behance’s Typography Served, a truly amazing resource for all typeface enthusiasts.

You can read more about each piece and their authors by clicking on the respective images below. Enjoy!

What do you think of  experimental typography? Share your thoughts and comments below…

Never Ending WordPress Business Bundle – only $14!

Sure, we have had the likes of Cufon and sIFR for some time now, and they continue to be very useful, but typography has advanced far beyond and is a more natural part of website architectures now.

Along with the huge trend in code-based type through the tools mentioned above, I find the resurgence in finely crafted type, much of it reminiscent of letterpress, to be fascinating.

Most such websites blend modern techniques with traditional and beautiful typographic styles. The combination is stunning and inspiring.

OpenPublic

What a fantastic example to start with. OpenPublic is like a typographer’s dream. It not only uses modern type techniques, but throws in a splash of classic typographic style. The aesthetic is also suited to politics and government.

AlexanderGrahamBell.tel

Unlike OpenPublic, AlexanderGrahamBell.tel uses almost entirely custom type, which evokes traditional typographic layouts. Again, the style suits the historical nature of the website. Almost all of the text is rendered via image replacement, though, which is not usually ideal for SEO, but given the short-term nature of the website, it’s suitable.

Immaculate Confections

Almost nothing about Immaculate Confections fits the norm. Its heavy use of typography does feel traditional and print-like, though. What strikes me is how the entire layout comes across as an interactive menu, while avoiding the annoyingly obvious menu motif. The result is unique and slick.

Ampersand: The Web Typography Conference

Ampersand is no less than a conference on web typography. Naturally, it is full of creative and beautiful type. In this case, only the logo is rendered with an image. The entire website has a print or letterpress feel, while still looking very much “for the web.”

Bally

Bally is a highly unusual website and doesn’t have much in the way of text. But it does clearly fit traditional typographic styles. The focus of this unusual layout is definitely on the photography and products. But if the type didn’t match the classiness of the clothing, the overall website would have really been cheapened.

Burciaga

Burciaga is a beautiful blog just oozing with a classic style. What I love is that the entire website is pretty much built on standard web-safe type; other than the script-based title, all of the text is in Georgia. What really does it for me is how it so fully embraces typical web layout formulas. The designer has brought web-savvy to traditional techniques. No fixed-size layout obnoxiousness to be found here!

Holy Heck

Given that Holy Heck is the portfolio of a confessed lover of vintage typography, it is no surprise to find it built on exactly that. The style so perfectly matches the artist behind it that the website could be featured in a portfolio itself.

Amber Miro

In what seems to be a clear trend, Amber Miro combines modern typographic techniques with traditional elements and aesthetics. The fine lines and ornamentation play into the traditionalism and make the design nothing short of gorgeous.

Forefathers

Forefathers has transformed the simple “Coming soon” page into a work of art. This one feels like a vintage poster, but modernized with the “Coming soon” extras that we have come to expect. It is great to see that age-old skills can be so elegantly applied to the web. A page like this looks so simple and easy and yet requires great skill to pull off.

Gerren Lamson

Pay attention to Gerren Lamson’s choice of color and texture. As in many of the other websites we’ve seen, the colors are spot on and work perfectly with the typographic style. The texture does the same, evoking the organic style of letterpress typography.

Facio Design

As in the last example, color and texture (and type, of course) are vital to the theme and mood on Facio Design’s website. But the ornamentation here makes for a style that is distinct from the others. It somehow combines a typical letterpress-style layout with the ornamentation one would find in custom letter illumination. Unique and memorable.

Anniversary Alert

As a developer, I love that all of the script-style type on Anniversary Alert is set with CSS and editable web-based text. As in so many of the examples here, this designer clearly understands the limitations and opportunities of extraordinary design. The type has been easily set with CSS, it is completely editable, and its implementation presents no complications. A fantastic marriage of style and practicality.

Paradox Labs

It is interesting to see how these websites evoke traditional styles to varying degrees. Paradox Labs has elements of traditional typography (evident in the prominent poster-like layout), while still feeling very much web-centric. This is the kind of design that looks great in Photoshop and even better as an actual web page. All to often, the opposite is true. I dare say, someone stuck in their print ways might have insisted on keeping each bit of content as a separate page.

Lost World’s Fairs

How could I possibly talk about mixing traditional type with modern techniques and leave out the Lost World’s Fairs mini-website. Be sure to hit the three sub-pages, because each is styled with some of the most amazing web-based type you will ever see. In fact, the pages were built to showcase just that. They will certainly challenge your expectations of web-based type.

Conclusion

In the clash of new and old, designers clearly need not abandon their roots. Of course, they must adapt traditional typographic styles to look smooth, but so many of these techniques are invaluable to a beautiful web style.

To say the least, the trend is exploding online. For those moving from print to web, many of the examples here should give you the inspiration you need to harmonize the two worlds.

Written exclusively for WDD by Patrick McNeil. Patrick is a freelance writer, developer and designer. In particular, he loves to write about web design, train people on web development and build websites. Patrick’s passion for web design trends and patterns can be found in his books on TheWebDesignersIdeaBook.com. Follow Patrick on Twitter @designmeltdown.

How have you merged traditional styles with modern technique? Please share your experiences with us!

Never Ending WordPress Business Bundle – only $14!

One of his stronger areas of expertise – as you can tell from the following pieces – is experimental typography.

His unique blend of (usually) clean lines and grungy textures brews a pixel-perfect typographic illustration every time that are always a pleasure to look at.

A lot of Alex’s work is produced for personal and experimental purposes, while some pieces are made into tutorials or sold as stock files.

If you like what you see, you can follow Alex on Twitter, and check out his other work on either his Behance or Flickr profiles.

This post was put together exclusively for WDD by Callum Chapman, the man behind Picmix Store and Circlebox Blog.

What’s your favorite illustrated type piece here, and why? Would you like to see more experimental type like this out in the real world, such as in advertisements?

Never Ending WordPress Business Bundle – only $14!