fonts.com blog
Posts Tagged ‘metro’

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 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 Dr Hermann Püterschein

I first met Bill Dwiggins when I was quite young. I grew up in Hingham, Mass., and was one of the neighborhood kids who attended his marionette shows. Later on, I started dropping by Bill’s studio every now and again to watch him carve the marionettes.

First Showing of Metro

Today is Bill’s birthday. If he were still around, he’d be 133 years old. Bill was always a bit of a kid about his birthday. It was a special day for him. So, Monotype invited me to write this post for two reasons: to toast Bill’s birthday and to share the news that they are almost finished working on a revival of one of Bill’s most important typeface designs.

Monotype’s suggestion that I write a note honoring my friend falls happily with my mood. Moreover, It also gives me the opportunity to clear up a point about his association with me. From time to time, it’s been implied that Bill and I were the same person. This is complete nonsense and was disproved some time ago. Bill and I submitted our individual thumbprints to a prominent Boston typographer for scrutiny. When enlarged, one could clearly see that the whorls of my thumbprint were composed of Fraktur letters, while those of Bill’s were fleurons joined in an engaging pattern.

Metro Nova

Bill drew a raft of typefaces during his years as a freelance designer for Linotype. A goodly number of them have been pressed into service as popular digital fonts. The one that most deserves a makeover, however, is Bill’s first: the Metro typeface. Not that it wasn’t a good design. It was indeed, but it’s always been a small family, and Bill was hamstrung by Linotype’s penchant for duplexed fonts. (This is where a pair of styles – such as roman and italic – were cut within the same mold for use in the printing process.) This meant that all characters were required to have the same width. I certainly anticipate that Monotype’s designer for the revival project will have resolved these limitations.

Metro Nova

Something I hope Monotype doesn’t eliminate is the profusion of alternate characters Bill drew. Bill liked to have fun with his work, and his playfulness was apparent in several characters of the original Metro design. The cap Q and lowercase g and e come to mind – but I know there were more. They were pretty lively, and didn’t look like anything you might find in the Futura or Erbar families, which were designed around the same time.

It seems that some pompous printers back in the 1930s didn’t like this aspect of Bill’s design. These were hard-pressed folks who persuaded Linotype to replace the characters in question with ones that were about as stuffy as these people were. After that, you could only get the original characters by special order.

Well, Happy Birthday to Bill – and the best of luck to Monotype. I’m looking forward to seeing that new design.

Click here to learn more about the new Metro family.

 

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