fonts.com blog
Archive for the ‘Type for Web’ Category

by David Harned

Fonts.com Web Fonts - Group by Font Family
We’ve always worked to ensure Fonts.com Web Fonts is fast, reliable and easy to use. Today I’m excited to announce a new option that many of you (and us) have anticipated for some time. We are now providing the option for Web fonts to be grouped by font family, allowing you to use different weights under one CSS family name. This allows for more standards-based CSS and cleaner HTML within your site.

If you’d rather reference fonts as individual weights, or you’re simply comfortable with the service as it is: don’t worry; we offer this new approach as an option when creating projects – so all of your existing projects haven’t changed. We recommend using this new capability with new projects as you move forward.

I’ll show you how it works.

IN THE EARLIER DAYS OF WEB FONTS

First, a little background if you’re wondering why our service wasn’t architected this way originally. Grouping Web fonts by family isn’t new; this was always the intention based on the W3C spec for CSS. But, back in 2010 when we launched Fonts.com Web Fonts, browser support wasn’t where it is today.

Back then, while you could group fonts by family using @font-face, these configurations frequently caused Safari browsers in iOS 3 to crash – not something we wanted our customers to experience. This was corrected with iOS 4.2. With users now migrating to iOS 7, this issue is in the distant past, so the time is right for us to make this change.

Let’s take a look at our font handling prior to today’s release.

EACH WEIGHT GETS ITS OWN FAMILY

Historically, our Web fonts have been referenced individually, each within its own family. Today, this remains the default option for new projects, and developers using this existing implementation do not need to make any changes to continue using the service.

As always, you would simply include the JS or CSS reference to our service into the <head> of your site as follows:

<script type="text/javascript" src="http://fast.fonts.net/jsapi/8ac15764-9118-4c43-8a15-3fd234faa0e5.js"></script>

We handle the @font-face declarations, so you can just reference fonts individually, with each weight in its own family.

font-family:'Metro Nova W01 Regular';
font-family:'Metro Nova W01 Bold';
font-family:'Metro Nova W01 Italic';

Let’s say you want to use a bold weight to show when using the <strong> tag within a paragraph of text. Let’s assume you also have a section of the paragraph you want to render in the italic typeface within that family using the <em> tag.

Your page code would look like this:

<p>This is a paragraph of text and <strong> this section is bold</strong>, while the rest is not. However, <em>this section is italic</em>.</p>

Assuming you don’t want the browser to distort the regular weight font to create a pseudo bold or italic effect, this would require you to call out a new font family every time you wanted to change a typeface to make it bold or italic, so that the different font would be referenced.

Your CSS code would look like this:

p {font-family:'Metro Nova W01 Regular'; font-size:2em;}
p strong {font-family:'Metro Nova W01 Bold'; font-weight:normal;}
p em {font-family:'Metro Nova W01 Italic'; font-style:normal;}

For the bold weight font, you would need to give it a font-weight:normal value since you’d be using the “normal” instance of the bold font. For the italic font you’d also need to assign a font-style:normal value since you’d be using the “normal” instance of the italic font. It’s a bit awkward but required so that the right weights and styles are applied when each font is referenced within its own family.

The end result would look like this:

Not Family Grouped

That works. Now let’s check out the new option you have.

GROUP THOSE FONTS BY FAMILY!

Now there is another way. Once you enable font family grouping, we group the families together and allow control over the CSS font-weight (100–900) and CSS font-style (normal, italic). We default these to values we think would work best, but you can actually set them to whatever works for you and your project.

First, open the project and then launch the “Add & Edit Fonts” window to “Enable Family Grouping”.

Add and Edit Fonts Modal - Default

Then adjust the CSS Font-weight and CSS Font-style – or just leave them as is!

Add and Edit Fonts Modal - Family Grouping Enabled

Once you have everything the way you like it, save your changes. Take a look at your Publish Options, and you’ll see that now the font families are grouped together and you can reference them within a single family like this, instead of as three.

font-family:'Metro Nova W01';

Now, using the example from above, you would reference them this way within your CSS code.

p {font-family:'Metro Nova W01'; font-size:2em;}

The regular (400) weight is used for the default weight. The bold weight (700) is now referenced automatically by the browser when you use the <strong> tag just like the italic version would be referenced when you use the <em> tag. Here is the html again for what gets rendered to the page.

<p>This is a paragraph of text and <strong> this section is bold</strong>, while the rest is not. However, <em>this section is italic</em>.</p>

The end result would look like this.

Family Grouped

Looks the same, but with less code and with code that is more standards based.

Let’s say, however, that the bold weight just isn’t bold enough for your design. Hop back over to the “Add & Edit Fonts” window and change the extra black weight to be “700” and then set the bold weight to something else – not 700 so there is no conflict with the fonts in the family.

Changing the extra black weight to bold

Save your changes and publish your project again. Now the browser will pick up the 700 weight that you assigned and will reference the extra black weight instead. Your page looks like this. Nice!

Family Grouped using the extra black weight

SUMMARY

That’s it. You can enable and disable this feature as you see fit for your different projects. Give it a try!

As with any new technology implementation, it is good practice to not try switching an existing live project to enable this feature without some testing, as it very well could affect the rendering of your site, as it will modify the CSS that gets delivered. To avoid disrupting sites on which you’ve already implemented Web fonts, we recommend that you start using the family grouping options with a new project. For more detail on how this feature impacts your CSS, view this FAQ .

We hope this new feature improves your experience with Fonts.com Web Fonts and makes it easier than ever to bring beautiful typography to the Web.


by Johnathan Zsittnik

OpenType Kerning Features

Since the mass availability of Web fonts, the gap between the typographic possibilities within Web and print design has been steadily closing. Continuing the trend, today we unveil new kerning and letter spacing capabilities to our Fonts.com Web Fonts service that can help take your Web designs one step closer to pixel perfect.

While kerning can be incorporated through standards-based implementations, there are several limitations that Web designers currently face:

  • Kerning settings in the browser may be on or off by default
  • The amount of kerning applied is inconsistent between different browsers
  • Kerning cannot always be controlled via the low level font-feature-setting: “kern” syntax from the CSS3 spec or the high-level, font-kerning syntax from the CSS3 spec
  • Text-rendering-optimizeLegibility, from the SVG spec, has inconsistent effects on kerning across browsers.

A variety of JavaScript libraries exist to enable kerning and overcome the issues described above, however each force the Web designer to specify kerning levels rather than leveraging kerning information specified by the font designer.

I had a chance to chat with Sampo Kaasila, about the technology he helped build and its inspiration. In his words, “The realization that kerning support is inconsistent and sometimes wrong across different Web browsers provided the impetus to develop this technology. It provides Web designers with kerning that is settable, correct and consistent across browsers.”

The new capabilities within Fonts.com Web Fonts allow you to specify letter spacing in a variety of ways. You can use auto kerning to take advantage of kerning pairs designated by the font designer. Or, you can specify your own kerning value for letter pairs. A tracking control allows the adjustment of spacing between three or more consecutive characters.

Kerning can be applied globally to a CSS selector. For example, I can enable auto kerning for all of my subheads by turning the feature on for the selector (i.e. H2) designated for my subheads within my CSS. Alternatively, kerning and tracking can be applied to targeted blocks of texts.

The new letterspacing controls are an extension of our OpenType feature technology that enables OpenType features such as fractions and ligatures to be rendered in all modern browsers – including those without native OpenType feature support. We’ve also enhanced this technology to allow users to specify a preferred glyph when multiple options exist. In the example below, two options for stylistic alternates are presented for the lowercase k  in the Fairbank typeface. This enhancement lets you specify a choice instead of using the default glyph.

Custom Kerning

To give users a sense of what’s going on ‘under the hood,’ I had Sampo provide an overview of how the technology operates. “Our service works in conjunction with client side JavaScript code. Runtime adjustments are made to the inter-character spacing to ensure correct spacing, depending on if the style in the external CSS or inline style attributes has enabled or disabled the kerning. Additionally, a consistent default on or off setting will be applied if there is no style information regarding kerning. Our service reads all the kerning information within the font’s kern and GPOS tables. This is then compiled to JavaScript code in the cloud. At run time, before the page is drawn, a rule application engine applies the kerning by injecting style information, which then correctly positions the characters when the browsers draw the text.”

Here’s a quick how-to for using these new capabilities

  1. Login to your Fonts.com account. You’ll need a Fonts.com Web Fonts subscription, but even a free plan will work. Free plan subscribers have access to the technology and compatible fonts.
  2. Search for fonts containing kerning support. Use the kerning support filter like this to narrow your Web font search.
  3. Add the font to your project. Be sure to grab the variant with “OT features” in the name. To be certain you have this option, don’t add an entire family to your project. Adding one weight at a time will allow you to specify the version you want – in this case, the version with OpenType features.
  4. Visit the Manage Web Fonts page to work on your project.
  5. Open the Add & Edit Fonts control for your project.
  6. Select the OpenType Features tab (If you don’t see it, your project does not contain a font with OpenType features).
  7. Select the Basic panel to apply kerning and OpenType features globally to a CSS selector, or the Advanced panel to apply kerning, tracking or OpenType features to targeted text.

Applying kerning or OpenType features to a CSS selector

  1. From the basic panel of the OpenType Features control, enter the selector name you wish to style.
  2. Selecting the font you want to use for the CSS selector from the Choose a font menu.
  3. Click Add.
  4. Click the CSS selector you just added form the menu below.
  5. Check Apply Auto kerning box to enable kerning. Preview the impact in the preview pane at the bottom of the control.
  6. Click the icons of any OpenType features you wish to apply to your selector. Again, you can preview the impact in the preview pane at the bottom of the control.
  7. Make sure you are using the JavaScript publishing method. This will not work through the non-JavaScript (CSS linking) or self-hosting publish methods.

Auto kerning Web Fonts

Applying kerning, tracking and OpenType features to targeted text

  1. From the advanced panel of the OpenType Features control, enter the text you wish to stylize in the “test your own text here” pane.
  2. Make sure you’ve highlighted the text you wish to stylize.
  3. Use the Auto Kern check box to enable auto-kerning.
  4. Use the Kerning slider or menu to kern two consecutive characters.
  5. Use the tracking slider or menu to adjust the spacing of three or more consecutive characters.
  6. Click the icons of any OpenType features you wish to enable for your text.
  7. Click the Select HTML button to view and copy the HTML you’ll need to add to your site.
  8. Make sure you are using the JavaScript publishing method. This will not work through the non-JavaScript (CSS linking) or self-hosting publish methods.

Custom Kerning

We hope you enjoy using this new technology. You can provide any feedback or tell us how you’re using it in the comments section.


by Alyson Kuhn

Jim Wasco loves to talk about type, and when he does, he enthuses equally about highly specific details on the one hand, and the typographic big picture on the other. It’s not an either/or discussion – it’s a seamless interplay of influences and inspirations. With Wasco, you can indeed have it both ways. His newest typeface design, the Harmonia Sans family, is a perfect example.

Harmonia Sans

The name Harmonia Sans alludes to harmony in two realms, music and typography – and on two levels, the individual and the collective. Each musical note must be ‘right’ on its own, to ring true with the other notes in the phrase, and it must add to the composition as a whole. (Wasco, by the way, plays jazz piano every week as part of a sextet.) The letterforms of a typeface are even more inter-dependent, in that they must achieve visual harmony in almost infinite combinations. On the ‘collective continuum,’ Harmonia Sans also blends what Wasco describes as his “favorite aspects of the different sans – grotesque, humanist and geometric” in a new geometric design. He adds, “Harmonia Sans is geometric because the letters are based on a square, circle and triangle, just like architecture.”

Alignments

The alignment comparison above illustrates Wasco’s decision to use calligraphic cap to x-height proportions for Harmonia Sans. The ITC Avant Garde Gothic design has a larger x-height, and relatively short ascenders and descenders, while the Futura family has a smaller x-height, with elongated ascenders and descenders. Wasco determined that the calligraphic proportions would serve to increase both legibility and typographic harmony.

Calligraphy instruction sheet from Paul Standard (circa 1950)

Calligraphy instruction sheet from Paul Standard (circa 1950)

Wasco neatly sums up his ‘calligraphic lineage’: “Dad went to The Cooper Union in the ‘50s. His calligraphy teacher was Paul Standard, who was a friend of Hermann Zapf’s. When I met Hermann, I mentioned Paul – and his face lit up. Many people credit Paul with popularizing calligraphy in America in the ‘50s.” Standard’s calligraphy instruction sheet above is based on a cap to x-height ratio of 7.5 to 5.

Calligraphy by Jim Wasco:  banner on a piano recital invitation (2007)

Calligraphy by Jim Wasco: banner on a piano recital invitation (2007)

Wasco has always favored a ratio of 7:5 for his own calligraphy, and the Harmonia Sans proportion is close to 7:5 as well. Click here to learn more about – and to license – the Harmonia Sans family.

 

Alyson Kuhn
Alyson Kuhn (a.k.a. Kuhncierge) writes frequently about paper and printing, including typography and postage stamps. On occasion, she teaches envelope-folding workshops. She lives in Carmel, California.

 


by Ryan Arruda

Here’s a listing of the top 100 most used fonts from the Fonts.com Web Fonts service for September 2013:

Trade Gothic
Neue Helvetica
Avenir Next
Gill Sans
Univers
Avenir
Proxima Nova
Gill Sans Infant
Helvetica
Futura
Frutiger
Rockwell
Linotype Univers
Classical Garamond
DIN Next
Klint
Century Gothic
ITC Avant Garde Gothic
Courier PS
Museo Sans
VAG Rounded
Myriad
Bree
Arial
ITC Franklin Gothic
Harmonia Sans
Univers Next
Neue Frutiger
Chaparral
ITC Legacy Serif
Museo Slab
Swiss 721
Eurostile LT
ITC Lubalin Graph
ITC Caslon No. 224
Optima
Amasis
Motoya Birch
Neo Sans
Trade Gothic Next
Neue Helvetica eText
ITC Century
ITC Legacy Square Serif
Frutiger Next
Slate
ITC American Typewriter
Linotype Didot
ITC Conduit
Adobe Garamond
Soho
Helvetica World
ITC Officina Serif
Bodoni LT
Humanist 777
Lexia
ITC Officina Sans
ITC Charter
Calibri
PMN Caecilia
Delima
Droid Sans Mono
Swift
ITC Fenice
Soho Gothic
Neue Helvetica Arabic
Adobe Caslon
Bookman Old Style
Linotype Sketch
Bembo
ITC American Typewriter Hellenic
Monotype News Gothic
Francker
Egyptienne F
Auriol
Sackers Gothic
Linotype Feltpen
Baskerville Classico
ITC Stone Informal
Novecento
Brandon Grotesque
Rotis Sans Serif
Twentieth Century
Monotype Goudy
Glypha
Agilita
Andale Mono
Droid Serif
ITC Eras
C Hei 2 PRC
News Gothic
Neue Haas Grotesk
DIN 1451
Akko
M Elle PRC
C Hei PRC
M Lady PRC
M Stiff Hei PRC
ITC Garamond
Heisei Kaku Gothic
Rotis Semi Sans


by Johnathan Zsittnik

Plans-3-Yr

Attention Web typographers: here’s your chance to try that Fonts.com Web Fonts subscription you’ve been eyeing – and save a bundle in the process! Now through September 27th, save up to 50% off any 3 year plan from Fonts.com Web Fonts: the exclusive service offering the renowned Monotype, Linotype and ITC foundries and coveted designs such as the Helvetica, Frutiger, Avenir, Trade Gothic, Gill Sans and ITC Franklin Gothic families.

To take advantage of this limited time offer, simply choose any 3 year plan and enter coupon code SAVE3 at checkout to get your subscription for 50% off the cost of renewing monthly for 36 months. Pick a plan with the benefits you need:

Fonts.com Web Fonts Features

Whether you’re new to Web fonts and looking to take the plunge, an existing Fonts.com subscriber who’s ready to up your commitment, or a user of another service who wants to try Monotype fonts or our exclusive technology, there’s no better time to do so. Sign up now!

coupon_code_blog

 


by Ryan Arruda

Here’s a listing of the top 100 most used fonts from the Fonts.com Web Fonts service for August 2013:

Neue Helvetica
Trade Gothic
Gill Sans
Helvetica
Avenir
Futura
Univers
Proxima Nova
Avenir Next
DIN Next
ITC Avant Garde Gothic
VAG Rounded
Swiss 721
Neue Frutiger
Frutiger
Frutiger Next
Linotype Univers
Trade Gothic Next
Humanist 777
Adobe Garamond
Soho
Adobe Caslon
Arial
ITC Conduit
Century Gothic
ITC Lubalin Graph
Museo Sans
Baskerville Classico
ITC Franklin Gothic
Rockwell
Univers Next
Neo Sans
Optima
Bembo
Linotype Didot
Agilita
Myriad
PMN Caecilia
Linotype Feltpen
Bodoni LT
DIN 1451
Helvetica Monospaced
Heisei Kaku Gothic
Joanna
Brandon Grotesque
Neue Haas Grotesk
ITC Garamond
Monotype News Gothic
Memo
News Gothic
News Gothic No.2
ITC Century
Gill Sans Infant
Sabon
Adelle
Abadi
Twentieth Century
Soho Gothic
New Century Schoolbook
Harmonia Sans
Trade Gothic Next Soft Rounded
Bauer Bodoni
Aachen
Corporate S
Neue Helvetica eText
Letter Gothic
Bembo Infant MT
Eurostile LT
ITC Officina Sans
Times
Frutiger Serif
Sackers Gothic
Slate
Laurentian
Eurostile Next
Akko
Neue Helvetica Arabic
Calibri
Novecento
Palatino
Museo Slab
Klint
Camphor
Minion
Helvetica World
Clarendon
Sassoon Sans
New Caledonia
ITC Fenice
Futura T
Strayhorn
Museo
Monotype Baskerville
Garamond 3
Glypha
Basic Commercial
Yakout
Smart Sans
Alternate Gothic
Plantin

 


by Steve Matteson

Monotype recently announced a collection ‘eText typefaces’, designed to facilitate the best on-screen reading experience. These typefaces extend the palette of text choices available for Web and EPUB designers and developers. Our eText typefaces are part of the Monotype Portfolio for Digital Publishing, tailored for high-quality immersive reading on e-readers, tablets and other devices.

eText Fonts

Our first update to the eText collection features four new families:

GeorgiaPro — The GeorgiaPro design includes 20 weights and styles (including light, black and condensed weights), making GeorgiaPro an ideal choice for rich typographic pages where performance and readability are key across a variety of screen resolutions and technologies. Georgia Pro also includes small caps and OpenType features for setting full-height figures in addition to the figures which range above and below the baseline (old style figures). The extensive character set covers Greek, Russian and Eastern European languages.

VerdanaPro – The Verdana typeface has been a standard in screen legibility for 18 years. This release continues to improve upon the performance and readability of the design across both screens and languages.  With 20 weights added to the family, Verdana is now more versatile than ever. Light to black and condensed styles of Verdana will offer new capabilities for hierarchical typographic layouts. The extensive character set covers Greek, Russian and Eastern European languages.

Dante eText — Already shipping in some OEM reader products, the Dante eText family has brought old-world charm to immersive reading on screen. Originally designed by Giovanni Maerdersteig for fine book printing, Dante eText now brings the artistic touches of a great printer and book designer to the e-publisher’s toolbox.

Linotype Didot eText — The world of high-fashion publications would not be complete without the high-contrast thick and thins of a Didot-styled typeface. Toshi Omagari revisited the classic Didot family to make it possible to use at screen sizes. The elegance of the original is not lost in the Linotype Didot eText design, which stands up to screen display, unlike many modern serif styles.

 

 


by Ryan Arruda

Here’s a ranked listing of Fonts.com Web Fonts’ top 100 most used Web fonts for July 2013:

Neue Helvetica
Trade Gothic
Proxima Nova
Futura
Gill Sans
Helvetica
Avenir
Univers
DIN Next
Avenir Next
Neue Frutiger
Frutiger
Linotype Univers
ITC Avant Garde Gothic
Trade Gothic Next
Frutiger Next
Humanist 777
ITC Franklin Gothic
Arial
Adobe Caslon
Century Gothic
Museo Sans
Baskerville Classico
Optima
Univers Next
Bembo
Linotype Didot
Neo Sans
News Gothic
Agilita
Soho
VAG Rounded
PMN Caecilia
Rockwell
Myriad
Monotype News Gothic
Bodoni LT
DIN 1451
ITC Lubalin Graph
Brandon Grotesque
Helvetica Monospaced
Gill Sans Infant
Futura T
ITC Century
News Gothic No.2
Trade Gothic Next Soft Rounded
ITC Garamond
ITC Officina Sans
Twentieth Century
Soho Gothic
Aachen
Sabon
New Century Schoolbook
ITC Conduit
Abadi
Neue Haas Grotesk
Adelle
Neue Helvetica eText
Eurostile LT
Bembo Infant MT
Letter Gothic
Times
Corporate S
Memo
Eurostile Next
Harmonia Sans
Bauer Bodoni
Sackers Gothic
Frutiger Serif
Calibri
Laurentian
Franklin Gothic
ITC Franklin
Palatino
Camphor
Helvetica World
ITC Fenice
Neue Helvetica Arabic
Adobe Garamond
Akko
Slate
Museo Slab
Klint
Heisei Kaku Gothic
Strayhorn
Novecento
Garamond 3
Clarendon
New Caledonia
Swiss 721
M Sung PRC
Minion
Ascender Serif
Yakout
Monotype Baskerville
Plantin
Thud
ITC Officina Serif
Effra
Albany


by Dr Hermann Püterschein

Bill Dwiggins got me hooked on type. His marionette shows were what attracted me to his studio, but it was his passion for calligraphy, type and typography that lured me into a life of letters. Serious stuff, but I was a pretty serious kid back then. I guess that’s how I got my “Doctor” nickname. Bill also gave me my start in the type business – but that was much later.

Toshi Omagari’s re-envisiong of Dwiggins’ original Metro

Toshi Omagari’s re-envisiong of Dwiggins’ original Metro

I believe that the Electra typeface was the first of Bill’s that I wrote about. (I wasn’t around when he drew the Metro design back in 1930.) But I did write a review of Metro Office when Linotype released the small family for, well, office use, in 2006. If memory serves, I gave it a “36 point” rating (“worth the ticket price”).

When Monotype invited me to have a preview look at Toshi Omagari’s re-envisioning of Bill’s original Metro, I jumped at the chance. The new design, Metro Nova, is quite a nice piece of work. Bill’s Metro had to make do with just four weights – and only three of them had italic complements. Omagari’s design offers a full range of seven weights of roman designs – each with an italic companion – plus six weights of condensed designs with italic counterparts as well. Now that’s an excellent enhancement.

Seven weights with italic counterparts, and six condensed weights—also with italic counterparts.

Seven weights with italic counterparts, and six condensed weights—also with italic counterparts.

Omagari also made improvements to some of the original Metro’s character designs. Not that Bill wasn’t a good designer – he was, but he had to put up with Linotype’s antiquated unit system and the firm’s insistence that every typeface family under the sun duplex – you know, share common character width values. Bill worked around these mechanical restrictions pretty well, but Omagari’s design is digital. And what a dramatic difference that makes! You won’t find any compromises in proportions or spacing in Omagari’s Metro Nova.

The new design is also available as OpenType Pro fonts, allowing for automatic insertion of ligatures and those alternate characters Bill drew for his original design. Pro fonts also have extended character sets to support most Central European and many Eastern European languages. Omagari even added the alternate Icelandic ð to the character suite! (He has friends in Iceland.)

Metro Nova Pro alternate accented Latin characters; alternate umlaud, accent “a” and Icelandic “eth” characters

Metro Nova Pro alternate accented Latin characters; alternate umlaud, accent “a” and Icelandic “eth” characters

While it’s not the second coming of Garamond, I really like the new Metro Nova. Omagari has done a terrific job of building on Bill’s original design. Metro Nova is a rock solid typeface family that’s not going to gather dust on anyone’s hard drive.

Click here to learn more about – and to license – the Metro Nova family.

Alternate and Standard setting of capital M

Alternate and Standard setting of capital M

 

Dr. Hermann Püterschein is President of the Society of Calligraphers and a noted typeface & typographic critic. He can be reached at HermannPuterschein@gmail.com

 


by Chris Roberts

Here’s a ranked listing of Fonts.com Web Fonts’ top 100 most used Web fonts for June 2013:

Neue Helvetica
Proxima Nova
Trade Gothic
Futura
Gill Sans
Helvetica
Univers
DIN Next
Avenir
Avenir Next
Neue Frutiger
Frutiger
Linotype Univers
Frutiger Next
ITC Avant Garde Gothic
Trade Gothic Next
Humanist 777
Century Gothic
Futura T
Museo Sans
Univers Next
News Gothic
Adobe Caslon
Neue Helvetica
Neo Sans
Optima
Linotype Didot
Avenir Next
Baskerville Classico
Bembo
Arial
Agilita
Rockwell
Monotype News Gothic
DIN 1451
PMN Caecilia
ITC Franklin Gothic
VAG Rounded
Bodoni LT
Soho
Myriad
Brandon Grotesque
ITC Garamond
ITC Lubalin Graph
Corporate S
Helvetica Monospaced
ITC Conduit
News Gothic No.2
New Century Schoolbook
Twentieth Century
Soho Gothic
Neue Haas Grotesk
Sabon
Abadi
Gill Sans Infant
Adelle
Trade Gothic Next Soft Rounded
ITC Officina Sans
Times
Bembo Infant MT
ITC Century
Palatino
Neue Helvetica eText
Sackers Gothic
Klint
Frutiger Serif
Eurostile LT
Letter Gothic
Calibri
Neue Helvetica Arabic
Laurentian
Eurostile Next
Harmonia Sans
Bauer Bodoni
Camphor
Helvetica World
Garamond 3
Akko
Museo Slab
Memo
Adobe Garamond
ITC Franklin
ITC Fenice
Clarendon
Yakout
Effra
Minion
Novecento
MSung
New Caledonia
Monotype Baskerville
Plantin
Sassoon Sans
Museo
Ascender Serif
Compacta
Slate
Cachet
ITC Officina Serif
Aachen

Great type makes sites stand out