fonts.com blog
Posts Tagged ‘css3’

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


by Sampo Kaasila

The fact that all major Web browsers now support Web fonts is of course a great step forward for typography on the Web. However, not all Web browsers support the ability to use advanced typographic  features that are part of OpenType fonts, such as standard and discretionary ligatures, contextual alternates, small caps, fractions, swashes  and more. For this reason, it is important to know that OpenType font support is different from OpenType feature support.

OpenType fonts are supported by wrapping them into a WOFF container, or sometimes directly without the WOFF container.

The following example demonstrates text with and without standard ligatures.

standard ligatures

 The next example uses discretionary ligatures on the common ‘st’ letter combination.

discretionary ligatures

The text strings and character codes in the HTML stay the same no matter what OpenType features are used or not used. Instead, these features are simply controlled with the style, typically from the CSS file .

Unfortunately, the support for OpenType substitution features is not yet broadly available in Web browsers. The good news is that nearly all of the most recent releases of browsers offer some level of support for OpenType features or are expected to add support soon. This means that Web browsers are moving in the right direction. However, as of now, good support is missing from the most commonly used browsers. Moreover, it takes years to flush out old browsers from the market. All this has prevented the wide use of these OpenType features on the Web, until now .

Monotype is pleased to announce the beta release of a new cloud font technology solution within the Fonts.com Web Fonts service that makes it possible to immediately use these features in any browser that supports Web fonts.  For browsers that do not have solid support for OpenType substitution features, the cloud takes the information from the GSUB table in the font and compiles it into compact JavaScript code that these browsers can handle. The JavaScript code automatically transforms the glyph shapes into new, beautiful and typographically correct shapes.

As a Web designer, you can simply use standard CSS techniques for controlling these OpenType features, while relying on our service to ensure the page renders beautifully and as intended no matter what browser the visitor is using.

Fonts.com Web Fonts OpenType Features Control

To use this capability, sign in to your Fonts.com Web Fonts account and follow these steps

  1. Add one of the fonts listed here to a project. Be sure to select the version containing OT Features in the name. This list will grow rapidly, but for now, it will provide you with a few options to play around with.
  2. Open the Add & Edit Fonts control within your project on the Manage Web Fonts page.
  3. Click the OpenType Features tab and Use the Selector field to enter the names of the CSS selectors you would like to display using a font containing OpenType features.
  4. Choose the font containing OpenType features from the Select a font dropdown menu.
  5. A list of icons representing the OpenType features contained in the font will appear.
  6. Click the icon of any OpenType features you would like to use on your website.
  7. The preview text will change based on the OpenType features you select. (If nothing happens, modify the sample text in the ‘Test your own text here’ field to ensure your text string contains the necessary characters.
  8. Publish your project.

Check out this technology and start using OpenType features on the Web!


by Johnathan Zsittnik

Today Monotype announced the acquisition of Design By Front, makers of Typecast – a browser-based tool for designing Web pages with Web fonts. Design By Front has been a valued partner of the Fonts.com team and we couldn’t be happier to have them as part of the family.

We welcome a talented group of individuals with intimate knowledge of creative markets and the challenges Web designers face. Over the past year, we’ve worked closely together. We’ve helped integrate our Fonts.com Web Fonts service into Typecast and participated in its private beta. We’ve also collaborated on speaking sessions and interviews about Web typography. This move ensures that these collaborations will continue, and we think you’ll like the outcome.

Typecast TeamTypecast was born out of the desire to make Web fonts easier to use. We’ve shared that aspiration at Fonts.com, yet our focus in achieving this goal has been limited to the usability of our own Web font service. With Typecast in the fold, we can ensure Web fonts are easy and fun to use throughout the entire design process – from ideation to implementation.

Typecast allows designers to work more efficiently with Web fonts. So it only makes sense that we make this powerful tool readily available to Fonts.com Web Fonts subscribers. While we won’t disrupt Typecast’s compatibility with other services, we also intend to make it easier for Typecast users to select our own Web fonts.  We believe this relationship will benefit users of Typecast and Fonts.com Web Fonts. We also hope it will help inspire more designers to choose Web fonts for their next project, resulting in a more beautiful and readable Web.

Johnathan Zsittnik
Johnathan Zsittnik is the eCommerce Marketing Manager at Monotype Imaging. Johnathan holds both a bachelor’s degree in marketing and a master’s degree in business administration from Bentley University.



by Chris Roberts

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

Neue Helvetica
Futura
Trade Gothic
Neue Frutiger
Avenir Next
Frutiger
Helvetica
Avenir
Gill Sans
DIN Next
Univers
ITC Avant Garde Gothic
PMN Caecilia
New Century Schoolbook
Neo Sans
Trade Gothic Next
Linotype Univers
Memo
Times
Frutiger Next
Harmonia Sans
Arial
Neue Helvetica Arabic
Garamond 3
DIN 1451
Linotype Didot
ITC Officina Sans
VAG Rounded
Twentieth Century
Slate
Monotype News Gothic
Yakout
Frutiger Serif
Century Gothic
Soho
Bauer Bodoni
Rockwell
Sackers Gothic
ITC Lubalin Graph
Glypha
Calibri
Soho Gothic
Eurostile LT
ITC Garamond
Aachen
Laurentian
MHei
Egyptian Slate
Agilita
Plate Gothic MT
Optima
ITC Franklin Gothic
Heisei Kaku Gothic
Cachet
Plantin
Clearface Gothic MT
Clarendon
Monotype Garamond
Futura T
Akko
ITC American Typewriter
M Hei Simplified Chinese
ITC Conduit
Serifa
ITC Officina Serif
Klint
Abadi
Monotype Grotesque
ITC Stone Informal
ITC Legacy Serif
M Hei Traditional Chinese
News Gothic
Stymie
Neue Helvetica eText
TB Kaku Gothic
FB Cham Blue
Neuzeit Office
Neue Haas Grotesk
Ocean Sans
Amasis
Monotype Modern
Eurostile Next
Camphor
Bell
Adelle
MSung
Baskerville
ITC Franklin
Georgia
Bembo
Gazette
Consolas
Andale Mono
Droid Sans Mono
Museo
Calvert
P22 Underground
Wiesbaden Swing
Rotis Sans Serif
Mitra


by Chris Roberts

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

Neue Helvetica
Trade Gothic
Futura
DIN Next
Frutiger
Gill Sans
Avenir
Helvetica
Univers
ITC Avant Garde Gothic
Neue Frutiger
Futura T
Slate
Trade Gothic Next
New Century Schoolbook
PMN Caecilia
Avenir Next
Neo Sans
DIN 1451
Linotype Didot
ITC Lubalin Graph
Linotype Univers
Frutiger Next
Arial
Garamond 3
VAG Rounded
Neue Helvetica Arabic
Harmonia Sans
Times
Monotype News Gothic
Yakout
Bauer Bodoni
Soho
Heisei Kaku Gothic
Laurentian
Soho Gothic
Gothic
Rockwell
Eurostile LT
Egyptian Slate
Cachet
Glypha
ITC Franklin Gothic
Memo
Century Gothic
Monotype Grotesque
Plantin
Akko
Camphor
Neue Helvetica eText
Sackers Gothic
Plate Gothic MT
News Gothic
ITC Officina Sans
Clarendon
ITC Stone Informal
Monotype Modern
Aachen
Ocean Sans
Amasis
FB Han Gothic
Bell
ITC American Typewriter
Azbuka
Consolas
Andale Mono
MYuppy
Droid Sans Mono
Frutiger Serif
Eurostile Next
Linotype Feltpen
Walbaum
Optima
ITC Garamond
Mitra
Wiesbaden Swing
Baskerville
Neue Haas Grotesk
Adelle
ITC Conduit
Bembo
Monotype Garamond
Impact
ITC Kabel
ITC Franklin
Neuzeit Office
Calibri
Rotis Sans Serif
Gazette
ITC Legacy Serif
Klint
ITC Officina Serif
Abadi
ITC Caslon No. 224
Loft
Museo
Neo Tech
Calvert
P22 Underground
Bodoni LT


by Ryan Arruda

Employing over 168,000 people across the globe, Sony is a worldwide electronics manufacturer, specializing in computer, video, and audio products for both consumer and professional audiences.

The Sony homepage employs the ITC Avant Garde Gothic typeface family, using book and medium weights for its headlines and subheads. This classic geometric sans is quite appropriate for an electronics purveyor, as its inherent structure projects a demeanor of modernity. However, with its large x-height, ITC Avant Garde Gothic remains grounded and relatable, conferring warmth where other geometric faces might offer colder personalities.

Customer Spotlight: Sony

 


by Johnathan Zsittnik

Today we unveil a brand new Fonts.com. If you’re a regular reader of the Fonts.com blog, you’ve probably already noticed a new aesthetic right here. The actual site offers plenty more to take in: In addition to a revamped design, you’ll discover additional ways to browse and search for fonts, fresh approaches to UI, and loads more typographic imagery. Despite all that’s new, the story of this site actually dates back quite a while.

In mid-2010, we took stock of the existing Fonts.com and drew up a lengthy list of areas to improve. Our wishlist included changes to the overall aesthetic, the organization of articles and other content, the way our products were presented and the tools we provide for discovering and trying fonts. In short: it was time to redesign.

We approached Happy Cog to help at the end of 2010. We’re big fans of executive creative director and renowned standards proponent Jeffrey Zeldman. So, the decision to work with his agency was an easy one. Jeffrey, Creative Director Chris Cashdollar and others from the Happy Cog team came out for a kickoff meeting in January of 2011. The Happy Cog team posed challenging questions regarding our vision for the new Fonts.com. ‘Should content focus more on searching or exploration and inspiration.’ While there were no easy answers, the ensuing conversation shaped the direction of the redesign and let us know it was a good fit between agency and client.

We came out of that initial kickoff meeting inspired and charged up with the following objectives and vision for Fonts.com:

  • Create a new Fonts.com home page featuring inspiring executions of fonts, an increased focus on search, and thoughtfully chosen interfaces that balance the most popular purchases, new and promoted products, and original content that is compelling and educational.
  • Integrate the Web font service into the Fonts.com experience.
  • Offer an improved search experience that makes smart choices about what to present and when, using the latest techniques for increasing engagement and conversion including things such as suggestive search and faceted results.
  • Release a re-envisioned font browsing experience, that focuses on font presentation, decreases steps to experimenting and purchasing type.
  • Refine the structure of content types to make it more accessible without getting in the way of getting to font products.
  • Tightly integrate social features.

An intense collaboration ensued, taking us from the objectives stated above, to sitemap, to wireframes, to the creation of the primary visual design elements to page design and eventually to the site we premier today.

With that, let’s take a tour of the new Fonts.com.

Home: Modernized aesthetics; loads of real estate for type

Fonts.com Inspiration

We think you’ll agree – the new Fonts.com homepage makes an impression. Big, bold type showings demonstrate type in use and provide in-depth looks of families. The stage premiers with showcases of Massif – a new design by our own Steve Matteson in addition to showings of the Akko, Gibson and Salvo Sans families. Hero images were designed by Monotype Imaging creative director Dennis Michael Dimos (Massif) as well as external designers Bethany Heck (Akko), Mark Weaver (Gibson) and Naz Hamid (Salvo Sans). Keep an eye on this area as we’ll rotate in fresh new showings from graphic designers and type designers on a regular basis. Beyond the hero images lies a variety of type showcases and discovery tools. Explore rich previews of hot new releases and established designs through the best selling new fonts and featured font sections. The “Find Your Type controls” allow you to search, browse, or identify fonts without ever leaving home. You’ll also find a selection of the latest articles on Fonts.com. We’ve always put out great, informative and educational content, but now the best content is far easier to find.

The decision to incorporate Web fonts for all of the type was an easy one. Picking the typefaces families and optimizing the fonts for the Web took a little more time.

“We really enjoyed working with the type and implementing it through the Fonts.com Web Font service,” said Christopher Cashdollar, creative director at Happy Cog. “We were able to implement a smart, legible and well-structured type system using the Neue Frutiger and Frutiger Serif families. We knew we could trust the integrity of the type because of the level of scrutiny that Monotype Imaging puts into the screen optimization of its fonts.”

Search: Sort, Filter and Discover; Desktop fonts and Web fonts Side by Side
Our new search results pages introduces sorting and filtering options that will help you navigate through our vast inventory and zero in on the design of your choice. Oh yeah, typefaces results are (finally) grouped by family.

As I mentioned, integrating our Web font service into Fonts.com was a primary goal of the redesign. The new search results page is just one place where you can find desktop fonts alongside side of Web fonts. Our search tools will return results for desktop fonts, Web fonts and articles. When you rollover a family that’s available as a Web font, a control will display that will allow you to add it to a project right from the search results page.

Family pages: Try, learn and share

Our new family pages feature a prominent showing. We’ve hand designed showings for many top families and will continue to expand this inventory over time. But we’re also counting on you. Showcase your design skills by designing and submitting images for your favorite typefaces.  Just click the ‘+’ to add your work to our gallery.

These robust new family pages gather all of the family members in one place. Type historians will appreciate the detailed descriptions – available for many of our most popular and newest families. And font enthusiasts of all kinds will enjoy rating and sharing their opinions with the Fonts.com community and through social avenues.

Cart: Quick, convenient shopping

The new Fonts.com features a mini shopping cart that is accessible from the header nav of every page. Click the shopping cart to view or delete products in your cart, without leaving the current page. This is convenient for those working their way through a lengthy shopping list and those with items remaining in their cart from a previous visit to Fonts.com.

Manage Web Fonts: Your new Web font command center

Fonts.com Web Fonts subscribers will notice a dramatically different set of controls for managing their Web fonts projects. Our new Manage Web Fonts page acts as a dashboard, providing virtually everything you need to build, edit, deploy and share Fonts.com Web Fonts projects.

Learn About Fonts & Typography: Even more great, educational content

Fonts.com FontologyLearn About Fonts & Typography is home to the original content we produce. Here you’ll find a new series called Fontology – an ever-expanding academic resource for educational institutions, design students and those with an interest in the typographic arts. This section is also home to the Fonts.com blog which features topical content that will keep you up to speed with the latest from Fonts.com and the type design community. Lastly, our popular series, For Your Typographic Information, lives on within Learn About Fonts & Typography. This longstanding series remain an excellent source for those in search of typographic tips and tricks.

Best Sellers: Insight into typographic trends

If you’re curious to know what’s hot, look no further than our best sellers pages. View the New Best Sellers page for a look at the top new releases or the All Best Sellers page to see the typefaces whose popularity has stood the test of time. For further looks into what’s trending, note that you can sort search results by popularity. You can also access the highest rated typefaces (as determined by your ratings submitted on family pages) through the “Find Your Type controls” on the home page.

Fonts.com Best Selling Fonts

FontGazer: Try thousands of fonts directly in Adobe InDesign
The new Fonts.com isn’t the only thing in beta.  As you may have seen, we recently announced FontGazer – a free InDesign plug-in that allows you to browse, try, and buy fonts from Fonts.com directly from Adobe® InDesign®. Download FontGazer and be sure to let us know what you think by sharing your raves, gripes and feature requests in the FontGazer Feedback Forum.

Fonts.com FontGazer

If you’d like a more interactive tour, you can check out this video. It will give you a more detailed look at many of the features described above, plus many more — including an overview of how to manage your Fonts.com Web Fonts projects on the new site.

The new Fonts.com is out. But that doesn’t mean we’re done. We’re hard at work on additional enhancements that will arrive during and after beta. In the meantime, we want to know what else you’d like to see. We’re not there yet, but you can help us make Fonts.com everything you want it to be. If you notice something that’s missing or that can be improved upon – let us know. See something you like? We want to know. Click the red feedback bar on the side of the site to share your thoughts.

Now get out there on the new Fonts.com, and find your type.

Johnathan Zsittnik
Johnathan Zsittnik is the eCommerce Marketing Manager at Monotype Imaging. Johnathan holds both a bachelor’s degree in marketing and a master’s degree in business administration from Bentley University.



by Chris Roberts

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

Trade Gothic
Neue Helvetica
DIN Next
Futura
Avenir
Frutiger
Helvetica
Trade Gothic Next
Gill Sans
New Century Schoolbook
Neue Frutiger
Univers
PMN Caecilia
ITC Avant Garde Gothic
DIN 1451
ITC Lubalin Graph
Avenir Next
Neo Sans
Camphor
Futura T
Heisei Kaku Gothic
Linotype Didot
Monotype News Gothic
VAG Rounded
Harmonia Sans
Garamond 3
Soho Gothic
Gothic
Frutiger Next
Slate
Baskerville
FB Han Gothic
Bauer Bodoni
Linotype Univers
Soho
Laurentian
Rockwell
Neue Helvetica eText
Eurostile LT
Sackers Gothic
ITC Franklin Gothic
Egyptian Slate
News Gothic
Gill Sans Infant
Charlotte Sans
Clarendon
Glypha
Ocean Sans
Cachet
Plantin
Century Gothic
Plate Gothic MT
ITC Officina Sans
Bell
MYuppy
Eurostile Next
Monotype Grotesque
URW Franklin Gothic
ITC American Typewriter
Calvert
ITC Franklin
MSung
Adelle
Impact
Bembo
Abadi
ITC Bailey Sans
Wiesbaden Swing
Mitra
Amasis
Serifa
Klint
Optima
ITC Kabel
Neuzeit Office
ITC Adderville
Goudy
ITC Conduit
Walbaum
Fette Engschrift DIN 1451
Akko
ITC Officina Serif
Monotype Modern
Basic Commercial
Tahoma
Rotis Sans Serif
Neo Tech
Arial
Caslon
ITC Stone Sans
Georgia Pro
Times
Nazanin
ITC Caslon No. 224
Palatino
Alternate Gothic
New Caledonia
Neue Haas Grotesk
Monotype Garamond
Basilia


by Chris Roberts

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

Futura® Bold
Neue Helvetica® 45 Light
Neue Helvetica® 35 Thin
Neue Helvetica® 55 Roman
Neue Helvetica® 75 Bold
Univers® 57 Condensed
Garamond 3 Regular
Bauer Bodoni® Black Italic
Garamond 3 Italic
Avenir® 85 Heavy
Neue Helvetica® 46 Light Italic
Avenir® 35 Light
Helvetica® Condensed Bold
DIN 1451 Engschrift
Futura® Bold Condensed Oblique
Sackers™ Gothic Heavy
Sackers™ Gothic Medium
Futura® Medium
Neue Helvetica® 25 Ultra Light
Linotype Didot® Bold
Linotype Didot® Italic
Avenir® 65 Medium
Linotype Didot® Roman
Avenir® 95 Black
Trade Gothic® Bold
Trade Gothic® Condensed Bold #20
Avenir® 55 Roman
DIN Next™ Condensed Bold
Neue Helvetica® 77 Condensed Bold
Laurentian™ Semi Bold Italic
Linotype Univers® 620 Condensed Bold
Trade Gothic® Roman
Neue Helvetica® 65 Medium
Futura® Book
Neue Helvetica® 47 Condensed Light
Linotype Univers® 420 Condensed
Futura® Heavy
Avenir® 45 Book
ITC Avant Garde Gothic® Book
DIN Next™ Bold
Trade Gothic® Bold #2
Linotype Univers® 320 Condensed Light, Extended
PMN Caecilia® 75 Bold
Univers® 47 Condensed Light Oblique, Extended
Neue Helvetica® 77 Condensed Bold, Extended
PMN Caecilia® 85 Heavy
PMN Caecilia® 76 Bold Italic
Trade Gothic® Condensed #18
Futura® Bold Condensed
Futura® Medium Condensed
VAG Rounded™ Bold
DIN Next™ Regular
Monotype Grotesque® Condensed
Neue Helvetica® 37 Condensed Thin
Neue Helvetica® 45 Light, Extended
Neuzeit® Office Bold
Neuzeit® Office Regular, Extended
ITC Avant Garde Gothic® Medium
DIN Next™ Condensed Regular, Extended
Neue Helvetica® 63 Extended Medium
Neue Helvetica® 65 Medium, Extended
Neue Frutiger® Light
Neue Frutiger® Book
Helvetica® Bold
ITC Avant Garde Gothic® Bold
Neue Frutiger® Bold
Trade Gothic® Condensed Bold #20, Extended
Soho® Regular
Trade Gothic® Bold, Extended
Neue Helvetica® 55 Roman, Extended
Neue Helvetica® 67 Condensed Medium
Univers® 67 Condensed Bold Oblique
Soho® Bold Italic
VAG Rounded™ Light
Helvetica® Bold, Extended
Gill Sans® Book
Neue Helvetica® 53 Extended, Extended
Neue Helvetica® 57 Condensed
Neue Helvetica® 73 Extended Bold, Extended
Baskerville Italic
Frutiger® 65 Bold
Helvetica® Condensed Light, Extended
Neue Helvetica® 67 Condensed Medium, Extended
Helvetica® Rounded Bold
Trade Gothic® Condensed #18, Extended
Neue Helvetica® 87 Condensed Heavy
Rockwell® Bold
Avenir® 55 Roman, Extended
Nazanin® Bold
ITC Avant Garde Gothic® Demi
Cachet™ Medium
Clearface Gothic™ 55 Roman
Clearface Gothic™ 45 Light
Helvetica® Light, Extended
DIN Next™ Medium
VAG Rounded™ Black
Trade Gothic® Next Regular
Neo® Sans Arabic Regular
Cachet™ Bold
Nazanin® Light


by Jason Cranford Teague

Last year, 2011, was the year that Web typography finally came of age as Web fonts have grown in popularity. The history of Web design has been full of inspiration and innovation, but little of that has been around typography, in large part due to the lack of font choices available. To be sure, typography is about far more than just the font, but when you only have five fonts to choose from for most of your work, imagine a culinary world where you could only choose from five ingredients.

Web designers are finally coming out of the type coma of the last 15 years and using a variety of typefaces in their compositions. With the wide adoption of the @font-face CSS rule and the rise of Web font service bureaus, there are now close to 50,000 fonts available for your designs that will work on virtually all Web browsers – yes, even the Internet Explorer® platform. IE has supported Web fonts since version 4.

We’ve entered into a renaissance of the visual appearance of pages all over the Web. Designers are now experimenting with new ways of displaying text that were previously impossible or only achievable through the use of text in images.

2011 was a period of intense experimentation – some more successful than others – but there are some clear trends emerging in how Web typography will evolve and how it will differentiate itself from print typography.

1. Typographic Voice Diversity

Kitchen Sink Studios website using Web fonts

Kitchen Sink Studios uses five different typefaces in their home page, but it works to create a unique voice, showing off their services.

 

Type is to text what voice is to speech. The fonts you choose have a dramatic impact on the tone and emotion of the message you are presenting. As the famed book designer Richard Bringhurst put it, “When the type is poorly chosen, what the words say linguistically and what the letters imply visually are dishonest, disharmonious, out of tune.” Now that we are no longer limited to the “Fatal Five” families – the Arial®, Georgia®, Trebuchet® MS, Times®, and Verdana® faces – we are free to explore, mix and match a wider variety of typographic voices.

Some worry that this will lead to an explosion of fonts in designs, with inexperienced designers mixing a smorgasbord of typefaces, creating a cacophony of voices rather than a chorus. Time will tell, but at least the era of monotone typographic voices is finally at an end.

2. Larger Font Sizes

Information Architects website

Information Architects website, informationarchitects.jp speaks softly, but carries a big font.

Text on the Web has been too small for far too long. For a variety of reasons  including the “above the fold” myth and the belief that small type looks more sophisticated, most type on the Web is set on the screen at 12px or lower. However, as a clever yet simple experiment by Information Architects has shown, 12-point printed type is visually the same size as 16-pixel screen type

I start all my projects with a base font size 100 percent, which uses the browser’s default size, generally 16px unless otherwise set by the user. I then use sizes set using the em unit to scale text larger or smaller as needed.  Smaller text – like footer text and notes – can go as low as .625em (~10px assuming the base size is 16px), but body copy should be a minimum of .875em (14px) to 1em (16px) and headers start at one em and go to two em, three em, and even four em or larger. If you need help converting to PXs or PTs, PXtoEM.com is a great resource.

The transition to larger text may seem awkward at first – I’ve actually had to convince clients that the text is not too large – but once you adjust, small text will begin to feel cramped and amateurish.

3. Slab Serifs Fonts

Slab Serif Fonts

German Website Pixelbäker uses the popular Museo Slab™ slab serif font (Exljbris).

 

One important concern for Web typography is legibility, making sure that characters are as easy as possible to discern. There are a lot of factors that go into making a legible font, but two of the most important are consistent strokes and either thick serifs or no serifs at all. Thinner serifs tend to get fuzzy at the edges, as they are blurred for anti-aliasing. For this reason – as well as general style reasons – we are seeing a  lot of slab serif fonts being used in Web designs over the last year.

EgyptianSlate

Egyptian Slate (Monotype), already popular in print, base become a popular slab serif Web font.

Slab serif fonts have serifs that are square and of generally uniform width, thus with little or no tapering at the ends. These fonts can have a strong typographic voice. Often feeling heavy and constructed, but because of this they are clear, stand out on a page and are easy to apply typographic effects to using text shadows, especially the letterpress effect.

4. Letterpress and Other Text Shadow Based Effects

Facio Design Website

British Design Firm Facio Designs Blog uses a paper texture background with a light letterpress effect.

A long time coming, text shadows are now available to Web typographers using CSS. Even better, since you can add multiple shadows to a single text block, there are a variety of new effects that are quickly becoming common on the Web, most notably the letterpress effect.

Letterpress effect

The letterpress effect up-close

The letterpress effect is achieved by placing text on a contrasting, but not 100 percent contrast background color (i.e. not 100 percent black or 100 percent white), and then offsetting a text shadow with a color lighter than the background down and to the right and a darker drop shadow up and to the left. The offset should be only slight – one to three pixels depending on the text size – to avoid having the corners show a gap. Smaller type will not need any blur, but larger type may need a slight blur added to soften the effect slightly.

Text Effects

I put together a list of some interesting text-shadow effects

 

Aside from straightforward text shadow effects, letterpress is the effect I see most frequently, but there are many others, all achieved through the judicious application of text shadows.

5. Color Contrast

Contrast Rebellion

Contrast Rebellion is a site with a cause: fight low contrast text.

There’s debate in the design community about the need for contrast in type – whether it’s acceptable for the font color to be closer to the background color. Several argue that this is bad design, harming legibly and readability. However, many designers believe in reducing contrast in text, feeling that it adds an understated sophistication to the appearance, also allowing them to better guide the viewer’s eye by mixing contrast on the page.

Recent studies support the notion that decreasing legibility can actually increase viewer focus and cognition. The logic goes something like this: if you force the viewer to take more time to read something by decreasing the legibility, then they are forced to pay more attention and retain the information longer. This argument is something of a mixed bag, however, since some of the studies have used the Comic Sans® face to prove the point.

Designers intuitively know that perfect contrast can be visually dull. Black text on white background is much like making everything bold; everything is important so nothing stands out. You need contrast to engage the viewer’s eye and help them prioritize what they are looking at, and one way to do that is with different color contrasts.

Still, there’s a point at which low contrast goes from forcing readers to focus to just becoming unreadable. Colour Text Legibility is a great resource for testing foreground and background combinations, and will alert you based on the W3C’s guidelines for color readability and Web accessibility guidelines to ensure you do not stray too far.

6. Mixing Font Weights

Aspen Ideas Festival Website

The Aspen Ideas Festival mixes different weights of the Futura® typeface (Neufville).

A lot of Web designers I meet think that “bold” is the font weight, but bold is actually a font weight. Although certainly the most common, bold is not the only weight available for fonts. There are also thin, light, medium, heavy, black and many others. For example, the Neue Helvetica® design includes weights ranging from ultra light to black.

Neue Helvetica Type System

The Neue Helvetica font family with weights ranging from ultra light to black

Additionally, many fonts use a base 100 number scale to indicate weight, with 100 being the lightest, up to the heaviest at 1000.

CSS, though, only has limited capabilities to directly access these weights. The font weight includes values for regular, bold, as well as 100, 200, 300, 400, 500, 600, 700, 800, 900, and 1000. However, if you use the @font-face rule, you can still use any of the font weights available by simply assigning each weight its own font-weight value or, alternatively, a unique font name for each weight.

7. More Space

Future of Car Sharing Website

The Future of Car Sharing site uses a lot of space and a horizontal scroll.

Along with larger font sizes, there is a trend toward more white or negative space in Web designs. This is partially in response to the realization that the above-the-fold rule was actually a myth (people do scroll and expect to, as explained in 2007 by Melissa Tarquini) as well the fact that larger monitors have become ubiquitous over the last several years.

More space in designs is a very good thing, allowing for easier scanning and cleaner, less cluttered designs. Many designers have started playing around with layouts that really only work on screens that scroll, and this trend will only continue as we begin to master the new powers that @font-face and CSS3 provide.

8. Responsive Typography

Boston Globe Website

The Boston Globe reformats its layout and typography to fit desktop screens, tablets, and smartphones.

Although desktop monitors have gotten larger, the display screens on which we expect our design to be viewed are getting smaller, as more people view the Web through tablet devices and smartphones. The good news is that rather than returning to tight designs for our Web pages, we can create designs that “respond” to the device on which they are displayed.

Responsive Design (sometimes called “Reactive Design”) is a development methodology which forgoes the one-size-fits-all philosophy of the past, and instead leverages CSS media queries and the JavaScript™ language to deliver designs that are tailored to the capabilities of the user’s device. This means not only resizing images and interface elements but also tweaking the typography of designs so they scale up or down as needed. This applies to font sizes as well as column widths, line height and even justification in some instances.

Although it might seem like a pain at first to have to consider your designs as scalable, it will soon be a necessity. It is predicted that by 2015, mobile use of the Web will surpass desktop use and desktop use will begin to decline.

In addition to mobile, there are future screen types to consider. Although the fabled WebTV seems to be always just on the horizon, there is some very real movement in that arena with Google and Apple working hard to find the right formula. It may not be too much longer until you need to consider how your designs will look in a 62″ HDTV.

9. Handwritten Fonts

Lilac Creative Website

Lilac Creative uses the Coral™ Regular handwriting font (Scholtz Fonts) to give the site a friendly appeal.

Handwriting fonts are another design type that’s becoming increasingly popular. Despite how many feel about Comic Sans – the most notorious handwriting font of them all – type that looks as if it were written by hand gives a friendly, open, and approachable feel.

Handwritten Font

JasonSpeaking01 is my own homegrown handwriting font I created using the iFontMaker™ app. Download it free and let me know what you think.

In addition to the numerous commercial and free fonts available, it’s also now relatively easy to make your own handwriting font, using the iPad® app, iFontMaker, vLetter’s custom handwriting font service or other options.

10. Dingbats Instead of Images

Although the Webdings® font is one of the Microsoft® core Web fonts preinstalled on virtually every computer in existence, using this font for icons in Web pages has never caught on. There is a simple reason for this: the font will not display in the Firefox® browser. The reason has to do with how the font is encoded, but the upshot is that you can’t use them.

Frames and Borders Font

The Frames and Borders Font (Outside the Line) contains a variety of images and symbols and is available as a Web font.

However, if you are using @font-face to embed properly encoded fonts, there is a close to 100 percent chance the font will be used. The advantage of using a font for a dingbat, in place of an image is scalability and styles. Whereas image-based icons are a fixed size, fonts can be quickly scaled up or down to any size, altered in color or have other styles changed on the fly without any loss of fidelity.