fonts.com blog
Posts Tagged ‘type’

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 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 Johnathan Zsittnik

Fonts.com serves a global audience. As such, we feel it’s important that our website ‘speaks’ more than just English. Today, you may have noticed the addition of two new languages to Fonts.com: German and Japanese. Both are among the most commonly spoken languages of our customer base and represent two of our fastest growing customer segments.

A look at the Fonts.com homepage in German

The next time you visit Fonts.com, if the language preference of your browser is set to German or Japanese, you will automatically be redirected to the German or Japanese version of the site. You can also use the language dropdown menu in the site’s upper right hand navigation to manually switch between languages. While the entire site has not yet been translated, just about everything you need  to browse fonts, purchase fonts or use our Fonts.com Web Fonts service is available in both German and Japanese. This includes the Fonts.com home page, the typeface family and product pages, the browse fonts pages, the Web fonts homepage, the Manage Web fonts page and the shopping cart. Content that has not yet been translated remains available in English, even when surfing in other languages.

Fonts.com's Manage Web Font Page in Japanese

A peek at the Web Fonts homepage on Fonts.com displayed in Japanese.

Over the coming weeks, we’ll continue to roll out many of the content pages in German and Japanese. If you’re wondering if additional languages will be added down the road, well, we’re considering that, too. For now, we invite our German and Japanese speaking friends to explore Fonts.com in their native language. We hope you enjoy this enhancement. But if you notice something doesn’t look quite right, please let us know.

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 Ryan Arruda

For nearly 80 years, MGM has been a staple of motion picture creation and distribution. Founded in 1924, Metro-Goldwyn-Mayer Inc.’s oeuvre has spanned not only generations of moviegoers, but also the gamut of film genres; the company is responsible for seminal Hollywood classics such as Gone With the Wind and The Wizard of Oz,  as well as contemporary releases, such as the upcoming James Bond installment – Skyfall – which it co-produced.

The MGM website features the Albertina typeface family: the medium weight for main navigation, as well as the typeface’s bold weight for sub navigation. Originally designed by Chris Brand as a metal type offering, designer Frank E. Blokland utilized Brand’s original drawings as the cornerstone of this digital interpretation of the family. As a dignified old style design, Albertina is a befitting typeface for a company with such a rich cultural heritage as MGM.

Albertina is available through the Fonts.com Web Fonts Service in regular, medium, and bold weights, each with a matching italic design. For desktop licensing, Albertina is also available as a suite of complementary small caps designs.

Ryan Arruda
Ryan Arruda is the Web Content Strategist at Monotype Imaging. Ryan holds a bachelor’s degree in film studies from Clark University, and an MFA in graphic design from RISD.



by Ryan Arruda

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

Neue Helvetica
Trade Gothic
Helvetica
Neue Frutiger
Univers
Gill Sans
Avenir Next
Futura
Avenir
Frutiger
DIN Next
ITC Avant Garde Gothic
Linotype Univers
Neo Sans
Trade Gothic Next
PMN Caecilia
Agilita
Arial
New Century Schoolbook
ITC Garamond
Linotype Didot
ITC Franklin Gothic
Monotype News Gothic
Frutiger Next
Century Gothic
Garamond 3
ITC Lubalin Graph
Rockwell
Twentieth Century
Abadi
VAG Rounded
Adelle
Optima
ITC Officina Sans
ITC Century
DIN 1451
News Gothic No.2
Trade Gothic Next Soft Rounded
Bauer Bodoni
Eurostile LT
Soho
ITC Conduit
Neue Helvetica Arabic
Laurentian
Sackers Gothic
Harmonia Sans
Frutiger Serif
Soho Gothic
Biome
Univers Next
Times
ITC Fenice
Museo Sans
Yakout
Neue Helvetica eText
Memo
Eurostile Next
Neue Haas Grotesk
Glypha
Georgia Pro
Calibri
MSung
Futura T
Sassoon Sans
Slate
ITC American Typewriter
Candara
Helvetica World
Clarendon
Albany
Rotis II Sans
Heisei Kaku Gothic
Novecento
Akko
Cachet
ITC Officina Serif
Sabon
Iridium
Monotype Grotesque
Neuzeit Office
News Gothic
Bembo
Monotype Garamond
Plantin
Amasis
ITC Blair
Compacta
ITC Legacy Serif
Aeris
Museo Slab
Basic Commercial
Franklin Gothic
Aachen
Egyptian Slate
Serifa
MHei
Camphor
Bodoni LT
Georgia
Baskerville

Ryan Arruda
Ryan Arruda is the Web Content Strategist at Monotype Imaging. Ryan holds a bachelor’s degree in film studies from Clark University, and an MFA in graphic design from RISD.



by Ryan Arruda

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

Neue Helvetica
Futura
Trade Gothic
Neue Frutiger
Avenir Next
Gill Sans
Avenir
Univers
Frutiger
DIN Next
Helvetica
ITC Avant Garde Gothic
Neo Sans
PMN Caecilia
Linotype Univers
Trade Gothic Next
New Century Schoolbook
Linotype Didot
Arial
Century Gothic
Monotype News Gothic
Frutiger Next
ITC Garamond
Times
Garamond 3
ITC Century
Twentieth Century
VAG Rounded
Neue Helvetica Arabic
ITC Officina Sans
News Gothic No.2
Eurostile LT
Memo
Rockwell
ITC Lubalin Graph
ITC Franklin Gothic
Harmonia Sans
Frutiger Serif
Bauer Bodoni
Soho
DIN 1451
Soho Gothic
ITC Conduit
Yakout
Compacta
Biome
Optima
Sackers Gothic
Slate
Eurostile Next
Glypha
Georgia Pro
ITC American Typewriter
Trade Gothic Next Soft Rounded
Calibri
Laurentian
Clarendon
Cachet
Akko
Heisei Kaku Gothic
Bembo
ITC Officina Serif
Iridium
Amasis
Monotype Grotesque
ITC Legacy Serif
Egyptian Slate
News Gothic
Monotype Garamond
Janson Text
Plantin
Adelle
Neue Helvetica eText
Univers Next
Agilita
Neuzeit Office
Aachen
Klint
Museo Slab
Museo Sans
Plate Gothic MT
Aeris
ITC Fenice
Futura T
Basic Commercial
Bodoni LT
Abadi
Neue Haas Grotesk
Serifa
M Hei Simplified Chinese
M Hei Traditional Chinese
Franklin Gothic
TB Kaku Gothic
FB Cham Blue
Azbuka
Camphor
ITC Franklin
ITC Stone Sans
ITC Bodoni Seventytwo
P22 Underground

Ryan Arruda
Ryan Arruda is the Web Content Strategist at Monotype Imaging. Ryan holds a bachelor’s degree in film studies from Clark University, and an MFA in graphic design from RISD.



by Johnathan Zsittnik

Over the past few months, we’ve unveiled several new tools for type enthusiasts including the redesigned Fonts.com, our Fonts.com Web Fonts Extension for Adobe Photoshop and our FontGazer plug-in. All three were designed to make it easier to browse, experiment with and license type. FontGazer was introduced first, premiering as the first plug-in to enable font trialing and purchasing within Adobe InDesign. Three months later, we’re happy to announce a new version of FontGazer and to officially take it out of beta.

FontGazerWe gathered plenty of feedback from our users during the beta – valuable insights that have helped shape the direction of the product. It’s clear the community loves the concept of in-app font trialing. We also received plenty of suggestions for things to work on. Enhancements found in the latest build include a cleaner, more intuitive UI, a revert button that allows you to return to your default text after applying a font, integration of the new Fonts.com shopping cart, and a revamped, stable architecture. Best of all, FontGazer remains free. Download your copy today and stay tuned for more enhancements to come.

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 Matt Brinkerhoff

If your lover gets more excited by contextual alternates than flowers and chocolate, take a look at these design-oriented gifts this Valentine’s Day. Guaranteed to tighten the kerning between you and your mate.

LOVE Print by Robert IndianaLOVE Print by Robert Indiana
Robert Indiana’s iconic “LOVE” image has appeared all over, most notably in Philadelphia’s JFK Plaza. The image, featuring hand-drawn letters inspired by Linotype’s Clarendon Bold has become ubiquitous with the word ‘Love’ throughout the world.
Shop Robert Indiana’s LOVE Print from MOMA

 

Typographic Rugs from Linus DeanTypographic Rugs by Linus Dean
While conventional wisdom states that giving a rug as a Valentine’s Day gift may leave you in the doghouse, give these Typographic Rugs a look. Fans of vintage typography, hand-drawn scripts and strong sans serif fonts are about to discover they can do much better than the bear skin rug.
Shop Typographic Rugs from Linus Dean

 

Designer Temporary Tattoos from Tatt.lyTatt.ly Designer Temporary Tattoos
Tatt.ly represents a collaboration between Tina Roth Eisenberg of SwissMiss Design and various designers to create temporary tattoos you’d actually consider putting on your body (no offense to the vending machines at the supermarket). Tatt.ly’s Love and Hug let you wear your heart on your sleeve. Perfect for those afraid of commitment!
Shop Designer Temporary Tattoos from Tatt.ly

 

Typocolate by DynamoTypocolate
I know, I know. Chocolate on Valentine’s Day is as cliché as it gets. That said, Dynamo’s typographic chocolate straddles the line between gourmet candy and art. With two designs available, these 240g bars of dark or milk chocolate are sure to please even the most jaded Valentine’s Day veterans.
Shop Typocolate from Dynamo

 

Hardwood Typography by the LetterHardwood Typography by the Letter
This wouldn’t be a post for designers without the chance to create your own Valentine’s Day gift. Craftcuts offers hardwood typography by the letter, in your choice of woods & typefaces. With some careful typographic consideration, a designer can create a thoughtful, one-of-a-kind gift. And hey, you can use them to keep the fireplace going if they aren’t well received.
Shop Hardwood Typography from CraftCuts

Matt Brinkerhoff
Matt Brinkerhoff holds a bachelor’s degree in E-Business from Champlain College and has experience in user experience, multivariate testing, design and Web development. Through his work as a freelance designer, Matt developed an affinity for typography years before joining the team.



by Vikki Quick

“You don’t have an ounce of rhythm in your entire body! You should get out of here, go home, put on some Mozart, dance around for an hour, then try this again.”

Those were the words of a calligraphy teacher berating a student in front of a class some 40 years ago. No, the student was not Steve Jobs. But as you read, you’ll undoubtedly recognize a connection that explains Jobs’ affinity for type, and how he opened it up to the world and then some.

The story begins with Lloyd J. Reynolds, who founded a calligraphy program back in 1949 at Reed College in Portland, Ore., the same school Jobs would briefly attend years later. At the time when Reynolds ran the program, his class was the hottest ticket on campus, achieving standing-room-only status. So how could this course, which was taught until 1984, captivate students so powerfully? No other one-credit elective seemed to engage its attendees to the same degree.

According to an excellent article from the August 2003 edition of Reed magazine, from which much of this post is based, the “rise, reign, and fall of calligraphy at Reed is a tale of charisma, discovery, Zen, jealousy, spirituality, body vs. mind, the hand linked to the heart, a Trappist monk, the white paper between the lines – and, yes, above all it is the legacy of one brilliant, caring and cranky teacher: Lloyd J. Reynolds.” His course stretched beyond calligraphy to include typography, book design and printmaking using woodcuts. A passionate instructor, Reynolds sometimes blurted cutting remarks, like the ones at the beginning of this article.

Working for a brief time at a greeting card and sign company earlier in his career, Reynolds once said, “I asked questions about the letters and got no answers. There was technical skill there but no substance. There had to be more than empty mechanical knowledge.” Reynolds absorbed himself in calligraphy. Although he was self taught, he eventually became one of the best calligraphers in the country.

Reynolds became known for professing far beyond calligraphy, tying in the whole of the human condition and reaching into philosophical realms. As his students created works that could serve real purposes, he pushed them to extend themselves and to see below the surface. Imagine a room full of 20-year-olds, focused on the rhythms of their pen strokes while Reynolds took them on mental journeys spanning themes from Michelangelo to Zen Buddhism.

Reynolds spoke of change. He questioned why people feared or denied it when change also brought things that people value most. “Change being what it is,” he once said, “we’re going to lose everything anyhow; so what do we have to lose? Why don’t we, then, drop the hostilities and just live?”

Of course, change came to Reed College’s calligraphy program. Steve Jobs dropped in on the course in the early 1970s, but Reynolds had already left.

Reynolds retired at the beginning of the decade after his wife died. To take his place, he hired Robert Palladino, a former Trappist Monk and monastery scribe. Reynolds saw that Palladino believed clearly there was more to calligraphy than drawing letters.

Jobs famously described what he learned from his calligraphy class at Reed during his Stanford University commencement speech in 2005. “Throughout the campus every poster, every label on every drawer, was beautifully hand calligraphed.” He went on to say, “I learned about serif and sans serif typefaces, about varying the amount of space between different letter combinations, about what makes great typography great. It was beautiful, historical, artistically subtle in a way that science can’t capture, and I found it fascinating.”

In that same speech, Jobs recalled that when connecting the dots of one’s life, you can only look backward. He said if he hadn’t dropped in on Palladino’s calligraphy class, he never would’ve introduced the Macintosh computer with multiple typefaces or proportionally spaced fonts. Jobs said that while the course seemed impractical at the time, it turned out to be one of the most priceless experiences of his life.

Although they probably never met, Jobs and Reynolds had much in common. Each found professions where they excelled and loved unconditionally.  Each was relentlessly driven. Each used their gifts to make connections and do great things, despite being at times cantankerous. In one case, the whole world benefitted, and in the other, a small student community became profoundly impacted.

If it weren’t Lloyd J. Reynolds, who died in 1978, Steven P. Jobs may never have had the opportunity to make typography matter to the world. Likewise, there’s most certainly someone out there today who never met Jobs, someone who’s a lot like him who will take the same passion and somehow change the world, again.