The history of typeface dates back to ancient times. Yet the concept truly came into fruition in the mid-1400s when Gutenberg invented the printing press. For the first time metal movable type was used, allowing for books to be printed in large quantities rather than using the laborious process of handwriting. According to scholar Thomas Detrie in his comprehensive work Font Fundamentals, conventional text typefaces occurred mainly in Italy, France, and England from 1469 to 1818.

In the 1890s the invention of the Linotype machine led to the mechanization of typesetting. This allowed for the automated casting of types that could be adjusted in size and length. Detrie states that the next crucial advancement was the creation of phototype, which was a transition between metal and digital type. He refers to it as "post-mechanical and pre-electronic." During the mid-1970s a large variety of techniques were used for typesetting including letterpress, continuous casting machines, computer-automated photo-typesetters, and even early digital typesetters.

In 1984, Adobe launched PostScript, creating digital font as we know it today. With two types of font, Type 1, a more sophisticated higher quality type and Type 3, a simpler functional type, customers had a choice of fonts for the first time in history, according to graphic designer Lauren Leurs. Since Adobe had a stranglehold on the market, Apple and Microsoft teamed up. Apple created a font technology, while Microsoft created imaging technology, resulting in TrueType fonts that were universal in all operating systems. Leurs states that the market became flooded with homemade, poorly designed TrueType fonts, and in combination with several flaws in the program, this led to a bad reputation for the program. Microsoft then allied itself with Adobe, and the companies’ produced OpenType, a system that could house both TrueType and PostScript font data. The system was beneficial to users as it allowed for advanced typographic features and character sets, such as Unicode. Leurs says that every major operating system on the market today supports OpenType.

With the user-friendly aspect and availability of font software and systems, the graphic design industry has grown substantially since the 1980s. In addition, Web sites such as dafont.com house thousands of user-created fonts that are available for free download. The lines between professional typesetters and do-it-yourself font enthusiasts gets increasingly blurred as technology continues to evolve. Font design trends are also shifting to accommodate the mobile Web. Font sizes have become increasingly larger so that content can be viewed on the smaller screens. In addition, stylized font was historically read as an image and did not filter through search engines. Google Web Fonts features hundreds of free, open-source fonts that allow for search engine optimization. For designers and computer users who would like to create fonts from scratch, a host of font design software has made it easier than ever.

Here are some tools:

FontLab Sutdio

The popular FontLab Studio is a professional font editor compatible with both Mac and Windows. FontLab Studio 5 allows users to design unique typefaces and create or modify fonts. The software supports all major outline font formats, including Type 1, TrueType, Multiple Master and OpenType. It includes in-context glyph design, improved metrics and kerning, pixelfont support, Unicode 5.0 support, upgraded OpenType support, new printing modes, improved autohinting, and even opens Mac fonts in Windows. Typeface designer Alec Julian calls FontLab the “industry standard.” However, the software is expensive and geared towards professional font designers.

Font Forge

FontForge is extremely similar to FontLab. However, FontForge is free and open-source. In addition, the software is a powerful tool when designing OpenType layouts. While FontForge has all of the same abilities of FrontLab and is also offered for free, some users have found the software to be difficult to install. A basic knowledge of Unix is necessary as well.

DTL FontMaster

It offers the same features as FrontLab and FontForge. Yet, this extremely expensive software has additional bonuses. The program comes as seven different modules and has built-in batching power and automated OpenType layout table generation. The program makes advanced font design technology user-friendly, while also featuring unparalleled technical quality. Available for Mac and PC, FontMaster is top of the line and created for professional font designers. The cost can be a deterrent for hobbyists.

TypeTool

TypeTool , created by FontLab, is the ideal product for beginners. The company touts it as software “for students, hobby typographers and creative professionals who occasionally need to create or customize fonts.” TypeTool is a simplified, user-friendly version of FontLab. It works on both Mac and PC and has an intuitive user interface and easy navigation features. The drawback of FontLab is that the software cannot be used to edit advanced typographic OpenType layout features. The reasonably priced software is more suited to beginners than the other advanced, professional-grade programs.

With the magic power of the internet usage, the availability of user-created font databases, and a multitude of font design software on the market, typeface design is not just for professionals anymore. Font creation has become more and more common in a world where the web can be  utilized as a powerful means of artistic expression. Font design already has a long rich history  however, in the hands of more people, the art begins to grow and evolve into something new everyday.

However, if you’re a designer, it’s essential for you to at least know the basic anatomy of type to begin using typography more effectively or at least to heighten your appreciation for the typography profession. The following are a few basic type anatomy elements you should be familiar with to advance your design career.

Character

Before diving into the various anatomy elements of type, you should be familiar with the definition of a character. A character is an individual typographic element such as a letter or a numeral. Now that you understand this basic element, we can move onto the various character anatomy elements.

Arm/Leg

The arm or leg of a character is its stroke that is attached on one end but isn’t attached on another. An arm or a leg can be horizontal such as the middle stroke extending from a lowercase “t” or diagonal such as the strokes coming from a lowercase “k.”

Cap line

A cap line is an imaginary line spanning the top of a capital character. The cap size is the distance between a character’s baseline and the cap line.

Ascender

An ascender is the upwards stem of a lower-case character that rises above the x-height. Characters with typical ascenders are h and b.

Baseline

The baseline is an imaginary line upon which all of your type characters rest. In most designs, the aim is to have all type characters in line along a baseline. However, many designers choose to break this rule with non-symmetric designs.

Descender

A descender is the portion of a lower-case character extending below the baseline. Common characters with descenders include “g” and “y.”

Sans Serif

Sans Serif fonts are characterized by their non-varying stroke widths. They are often considered more modern type options and are optimal for most online environments.

Serif

Serif fonts are characterized by their varying stroke widths and decorative elements on the end of each character. These fonts are viewed are more classic type options and are traditionally used in novels and other print reading materials.

X-height

The x-height is the middle portion of a character minus any ascenders and descenders. An easier way to determine the x-height in a string of text is to set it at the height of a lowercase “x.”

The post image is via PixelLogo

These basics type elements should help advance your appreciation for typography and the typographer’s profession. Most commonly, you can expect to use this terminology when working with a typographer on the development of a unique type for your design projects.

While learning about the anatomy of type can cause your brain to glaze over, the process doesn’t need to be so painful. By at least learning the basics of type anatomy, you’ll be a stronger designer and will sound much more knowledgeable the next time you’re conversing with a typographer.

Once upon a time on the web, the only way to include these non-standard types, was to build them into or simply plug them in as images. Some even went so far as converting all of a site’s body text into an image, much like we do with headers. Without realizing that they were compromising the site’s SEO and search capabilities, given that the keyword rich content that generally steers people in your site’s direction was no longer searchable. Search engines saw these sites as merely images, no text to check against relevant queries. So there was a time that effective, stylish typography was a rarity on the web, but the times they are a changing!

Now as doors are starting to open for designers in the typography arena affording us more opportunities to turn to making our web designs standout through well used and styled type. Now with more people able to turn the bulk of their site’s style in more of a typographical direction, the beauty of the web is growing. However, when turning to type in this way there are some considerations to be made to make sure your type is aiding your design and not taking away from it. It is not as simple as just plugging in a font and that’s that. So below is gathering of helpful hints and resources, terms and tools, and more, to help you make the most of the typography in your web designs.

Web Safe Fonts

Web-safe fonts are fonts likely to be present on a wide range of computer systems, and used by web content authors to increase the likelihood that content will be displayed in their chosen font. If a visitor to a website does not have the specified font, their browser will attempt to select a similar alternative…

With the future of web typography and its promise of an expanding landscape through services like Typekit and developments like @Font-Face, both of which will be talked about more later in the post, web designers are hoping for a day when they will not have to concern themselves much with the issue of only having a handful of web safe fonts to work with. However, though this new day is working its way onto the horizon, that time is not quite here yet. So for the time being, designers need to be aware of what web safe fonts are currently available for use. While again, this does still have its limitations, it still allows for a bit more flexability of font choice to complete your design.

For more on web safe fonts check out dustinbrewer.com. Fonts on the web and a list of web safe fonts. This site gives you a graph of all web safe fonts as well as which OS you will find each on.

Font Stacks

Font stacks are a great use of CSS and allow desigers to expand the font options that they have at their disposal when they are building their sites. Font stacks allow you to expand upon and go a bit farther in your design than just being limited to the web-safe fonts listed above. There are a number of other fonts that most users have on their computers that can be called on by your design, and with font stacks you are able to essentially establish a font hierarchy for your design to scan through. You are basically building a virtual wishlist of font choices for your design to look for, and if the user viewing the site has those fonts stored on their machine, your code will plug the font in. And the font stacks are even stackable, so multiple stacks can be employed in one design, allowing for even more flexability.

The generic font stack is typically: Ideal, Alternative, Common, Generic which will look like the example below.

h2 {font-family: helvetica neue, helvetica, arial, sans-serif;}

Further font stack reading

The Unit Blog gives a great explanation of font stacks and the correct way to use them, as well as some sample stacks you may want to give a try in their post, Better CSS Font Stacks.

Inspiration Bit also has a really good article on font stacks that points to many must read posts on the topic. They also give you examples of a few sites with outstanding web typography, and fill you in on the font stacks that are used on them. Striking Web Sites with Font Stacks that Inspire.

Areas to Consider

Here are a few tips for you to consider on ways to make your type shine, and some of the main text areas of your site where you will want to choose your fonts carefully.

Body Text

Choosing the appropriate body text could very well be the most important part of the typography process. This is the main content of your site and if your visitors can’t read it well, they most likely won’t be back.

Headlines

Styling a great headline is one of the best ways to add a bit of flare to your site. It is not always enough to find the right font, you also need to take time to adjust the spacing, etc, to make it perfect.

While CSS image replacement and sIFR can be used for headlines, I am not going to cover them here since they are not always ideal. However, if you would like more info on both, here are some links.

• Wikipedia article on sIFR
• http://www.mikeindustries.com/blog/sifr/
• Implant sIFR3 – A Healthy Alternative to Browser Text
• Nine Techniques for CSS Image Replacement
• Is CSS Image Replacement OK for SEO?
• Using non standard fonts with CSS image replacement

Quick Tip

Combine serif & sans-serif fonts to break up the monotony of the page. For example, use one for headlines and the other for body text. Here is a great post about the mixing up of fonts. 7 Rules for Mixing Multiple Fonts in Good Web Design

BlockQuotes

Blockquotes provide a great opportunity to add some style to your page and break up long spans of text. Styling them apart from the rest of the body text, and in fact including style for them in the CSS at all, can be an effective means of highlighting certain areas of your web presentation.

Readability

Above all, the main thing to keep in mind as you reach for new ground and dare to be different with your typography, is readability. There is no point in putting words on your website if, by and large, most people will not be able to read them. Consider your fonts carefully for this reason. Maybe there is a reason no one else is using that font you are salivating to have for your design.

If there is any element that you add, or just any characters within your font family that interfere in any way with the readability of your typography choice, you may seriously want to reconsider. With so many sites populating the web, surfers are not going to take the time to try to decipher exactly what it is they are reading, they will simply move on to another site covering the same information with a much more readable presentation.

Quick Tip

Don’t underline text that isn’t a link. It’s better to use strong or em to highlight text, to help avoid any confusion for your readers.

Contrast

One area to look at when you examine readability which can impact the overall presentation, is contrast. You don’t want your readers to have to strain their eyes trying to read pale pink text and a pale blue background for one hideous example. An easy way to check for the proper contrast for your site is to look at it in grayscale. This is a sure fire way to reveal any areas where the type may not have enough contrast to be easily read.

If you can read it fine via grayscale, then chances are, your readers will not experience any issues with contrast readability either. GrayBit is an online accessibility testing tool designed to visually convert a full-color web page into a grayscale rendition for the purpose of visually testing the page’s perceived contrast.

Size

In this case, size does matter. Try not use smaller than 12-14pt type for body text. Maybe stay closer to 14 than 12 so that once again, you do not make your readers strain their eyes just to read your content. I also suggest you set your type using em instead of px so that the user can resize the font themselves to a pleasant reading size.

A List Apart has a fantastic and very in-depth article on how to reconcile the designer’s requirement for accuracy with the user’s need to resize text on demand, arriving at a best practice that satisfies designers and users and works across browsers and platforms. How to Size Text in CSS

Font Eligibility

Just because you can, does not always mean that you should. Steer clear of using all uppercase fonts for body copy. This goes back to some of the basics of design theory concerning the way we visually scan for variance between the letters in a word in order for our eyes to take it in. Using all caps has a tendency to disrupt this variant flow.

Another eligibility concern that effects readability, is also an area of contention in the design community. There are ongoing debates about which is better for the body text of a website, serif or sans-serif. IMO it is all a matter of personal preference, and so long as the readability remains uneffected, it is okay to use either.

The Size of Text Blocks

Especially with more text heavy areas of the site, you want to establish an easy flow for the type to keep from turning anyone away. Keep text blocks short and easily scannable for the sake of both your readers and your content.

Spacing

Another element of your selected font to consider, especially with regards to readability and appearance, is the spacing. For example. New Times Roman doesn’t make a great headline font until the spacing is adjusted. All around, not just between words, but between individual letters. Sometimes certain letters line up oddly next to one another in your chosen font, and it can impair the readers ability to quickly scan your words, breaking their flow. Be it for your body text or headlines, whatever the type may be for, pay attention to the spacing.

• letter-spacing – The spacing between each individual letter
• word-spacing – The space between each word
• line-height – The space between each line of type.

Use Hierarchy Effectively (h1 – h6)

There are a number of different headers that you can use in your stylesheet, six in fact. You can assign each different sizes and styles in order to steer your reader through the site. This heirarchy of the page is an important guide for the readers eyes, essentially letting them know what’s important. Use this hierarchy stylishly to the advantage of your content and design.

CSS Globe has a very helpful article listing the dos and don’ts of using headers. How to use headings in HTML.

Code Symbols Correctly

Below are the most common offences but make sure you check out this complete list of special HTML characters to make sure you are not committing any other type crimes.

• Quotes – use “ at the beginning of the quote and ” for the end.
• Apostrophe – ’
• Dashes – use – for an en dash and — for an em dash
• Elipses – …

For a Beautiful Web tells you how to improve elements such as parentheses, copyright symbols, bullets, etc using baseline shift in, Improve your web typography with baseline shift.

Future of Web Typography

We mentioned before that things are changing and options are opening up for designers as we continue to move forward. Two very important facets to that changing landscape are @Font-Face and Typekit. Hopefully these door openers will continue to expand the font base for designers in the future.

@Font-Face

At first glance @font-face seems like it would be the answers to all of our web typography prayers, by allowing you to embed the font in your design. However, the main drawback is that to use a particular font with @font-face, that font has to be licensed for @font-face linking & embedding, because the font is then available for users to download. So while this is moving us forward, the movement is still slow going. Below is a sample of the code used to embed @font-face fonts.


@font-face {
font-family: FontName; /* Define font-family name (can be anything you like) */
src: url(font.ttf); /* Point to the font file on your server */
}

body {
font-family: FontName, serif; /* Sets the uploaded font as the primary font for the site (make sure you use the name defined above) */
}


George Butler gives an in depth look at the state of @font-face along with its strengths and limitations in the post, 10 Years Later – The Current State of @Font-Face.

Theme Forest not only gives a description of @font-face but also gives a list of 15 fonts whos licenses allow for its use in, CSS @Font-Face and 15 Free Fonts You Can Use Today.

Typekit

Typekit is another way that the font well is expanding its reach for designers, though not a free one. Much like with @Font-Face, especially since it is uses the @font-face CSS, certain fonts are registered with Typekit which makes them available in your design through a CSS link to the Typekit servers if you are a subscriber.

For A Beautiful Web offers a little insight into Typekit with the post, First Impressions of Typekit.

Also be sure and check out this interview with Typekit creator Jeff Veen via Sitepoint’s Podcast #23 – Web Fonts With Jeff Veen.

Useful Tools for Web Typography

• Typetester allows you to compare three different type settings side by side.
• Typechart lets you flip through, preview and compare web typography while retrieving the CSS.
• What The Font allows you to submit an image and find the closest matches in the WTF database.
• CSS Typeset is sort of a WYSIWYG editor for type. Put in your type, select the settings you want and get the CSS automatically.
• PXtoEm offers an easy way to convert px to em.

So here is the list of most recommended and visited sites to download free fonts.

1. DaFont

2. 1001 Fonts

3. Urban Fonts

4. Simply The Best Fonts

5. Font Stock

6. Font Cubes

7. Fonts 101

8. Search Free Fonts

9. Free Mac Fonts

10. Daily Free Fonts

11. Show Font

12. Get Free Fonts

13. Font Space

14. Font Fox

15. Abstract Fonts

16. Fontica

17. Wonder Fonts

18. Fontation

19. Font Reactor

20. Fonts 500