fonts.com blog
Archive for January, 2013

by Sampo Kaasila

Last week we announced the availability of a technology that allows Web designers to use OpenType features more easily and reliably. The technology which is incorporated into our Fonts.com Web Fonts service ensures that OpenType features such as ligatures, fractions and alternate characters are rendered, even when a visitor’s browser does not inherently support OpenType features.

If you’re new to OpenType features, have a look at this demo page . Simple on / off buttons allow you to preview text with and without the use of OpenType features, helping to illustrate the impact they can make.

We’re charting new territory with this capability. As such, we consider this an experimental feature and hope that you can provide us with your feedback to help us evolve it.

When you’re working on your project, the OpenType Feature control appears on the Add & Edit Fonts utility if your project contains a font with OpenType features. If you’ve had a chance to try it out, you’ll now notice that the tools introduced last week have been placed on a basic tab. Here you can activate OpenType features for a particular CSS selector. The first of our enhancements to the technology can be found on an advanced tab. This tab can be used to specify which portions of your text you want to apply OpenType features to, instead of turning them on or off for all text associated with a particular CSS selector. The advanced tab also features a simple online text editor to streamline the creation of Web content using these features.

The editor works inside the browser so you do not have to install anything. It shows what the text will look like as it is being edited, and it helps you see what features are available in the selected font and what features are available in the selected text.

This example shows the Fonts.com Web Fonts OpenType Feature control and illustrates use of ligatures and fractions. The code below was output from the text editor while creating the example shown below. This code may be a handy starting point when building your CSS or HTML, or when using OpenType features for targeted blocks of texts.

We’ve also been hard at work releasing more OpenType fonts for you to use. You can now refine Web font search results to display just those containing OpenType features as shown below. We’ve also provided a list of great choices here to help you get you started using OpenType features on the Web.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="http://fast.fonts.com/jsapi/74c1c08e-9c2a-4701-8328-4748e42bc503.js"></script>

<style>
.class-with-otf-main {
font-family: Ayita W03 Black; line-height: 01.5em;text-align:left;
}

.class-with-otf-0 {
font-size: 03.0em;
color: rgb(0, 0, 0);
text-decoration: none;
–moz-font-feature-settings : ‘dlig= 1′,‘calt=0′;
–moz-font-feature-settings : “dlig” 1,“calt” 0;
–webkit-font-feature-settings : “dlig” 1,“calt” 0;
–ms-font-feature-settings : ‘dlig= 1′,‘calt=0′;
–o-font-feature-settings : “dlig” 1,“calt” 0;
font-feature-settings : “dlig” 1,“calt” 0;
}

.class-with-otf-1 {
font-size: 03.0em;
color: rgb(0, 0, 0);
text-decoration: none;
}

.class-with-otf-2 {
font-size: 03.0em;
color: rgb(0, 0, 0);
text-decoration: none;
–moz-font-feature-settings : ‘liga= 1′,‘calt=0′;
–moz-font-feature-settings : “liga” 1,“calt” 0;
–webkit-font-feature-settings : “liga” 1,“calt” 0;
–ms-font-feature-settings : ‘liga= 1′,‘calt=0′;
–o-font-feature-settings : “liga” 1,“calt” 0;
font-feature-settings : “liga” 1,“calt” 0;
}

.class-with-otf-3 {
font-size: 03.0em;
color: rgb(0, 0, 0);
text-decoration: none;
}

.class-with-otf-4 {
font-size: 03.0em;
color: rgb(0, 0, 0);
text-decoration: none;
–moz-font-feature-settings : ‘frac= 1′,‘calt=0′;
–moz-font-feature-settings : “frac” 1,“calt” 0;
–webkit-font-feature-settings : “frac” 1,“calt” 0;
–ms-font-feature-settings : ‘frac= 1′,‘calt=0′;
–o-font-feature-settings : “frac” 1,“calt” 0;
font-feature-settings : “frac” 1,“calt” 0;
}

.class-with-otf-5 {
font-size: 03.0em;
color: rgb(0, 0, 0);
text-decoration: none;
}

</style>
</head>
<body>
<div><span>st</span><span>acks of wa</span><span>ffl</span><span>es</span><span>1/2</span><span>off</span></div>
</body>
</html>

 


by Ryan Arruda

With over 20 million active users, Spotify is an emerging leader in the field of streaming music services. With a robust collection of companion apps available, Spotify music can also be accessed through a litany of digital devices — from computers, to smartphones, to tablets.

The Spotify website features utilizes Linotype’s Neue Helvetica typeface family quite extensively — the site’s navigation is set small in the stout, bold weight of the design, while body text is set in the extremely legible light style.

Customer Spotlight: Spotify

The site employs visually impressive parallax scrolling — full screen photographs contrast nicely when alternated with quiet swaths of white space and nicely set type.

Headlines set the thin weight of the Neue Helvetica family provides a nice balance of scale and proportion in relation to the other type elements on the site. Additionally, setting the headlines in a bright lime green reveals that even supposedly humorless neo-grotesque typefaces can, indeed, possess a more ebullient spirit.

The Neue Helvetica family is an indispensable tool for all designers, and is available in over 50 styles — from ultra light to black weights, as well as regular, condensed, and extended widths.

The Neue Helvetica collection is available through the Fonts.com Web Fonts service, and for desktop licensing as well.

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

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 Allan Haley

Rounded sans serif typefaces carry the authority and clarity of typical sans – and add a sense of approachability. They are not “cute” – but they are amiable. Rounded sans also maintain all the legibility of their more traditionally designed brethren while being more personable.

Sans serif typefaces have been the mainstay for branding, signage, wayfinding, and advertising for well over a century. While the story is told that early designs were called “grotesques” because they were perceived as, well, ugly; sans serifs have firmly established themselves in the typographic pantheon as straightforward, no-nonsense graphic communicators. Recently, however, rounded sans have become popular alternatives as more friendly – more human – typographic spokespeople. Everything from logos to ad campaigns have benefited from these affable designs.

Creating a rounded sans serif typeface, however, is not an easy task. It entails much more than rounding off the edges of stroke terminals. In some instances stroke lengths must be lengthened to look correct, while in other cases they must be shortened for the same reason. Small parts of characters, like the ear of a ‘g’ or flag of an ‘r,’ may also need to be adjusted. The list goes on.

Designed by Akira Kobayashi, Avenir Next Rounded is the third generation of Adrian Frutiger’s Avenir typeface. Although a consistently popular and exceptionally versatile design, Kobayashi saw the potential for a new, softer interpretation of the Avenir Next characters. The rounded terminals he incorporated into the design infuse it with a more complex – and genial – quality. Kobayashi has maintained the modified geometric structure of Frutiger’s original design, and added to it a softness that transforms the typeface.

As an additional benefit, you can save over 75% on the entire Avenir Next Rounded family until January 15th. Be one of the first 1000 customers to purchase and you can get the entire Avenir Next Rounded for only $99. Make sure to take advantage of this promotion before it expires or sells out!

Allan Haley
Allan Haley is Director of Words & Letters at Monotype Imaging. Here he is responsible for strategic planning and creative implementation of just about everything related to typeface designs.



by Darren Glenister

Today, we are excited to commercially release SkyFonts – the first of its kind font rental service. As we say goodbye to a beta period that spanned more than 3 months and provided us with invaluable insight into your interests surrounding a new way of discovering and using fonts, we welcome a handful of new aspects of the SkyFonts experience that we’re confident you’ll enjoy.SkyFontsAs part of the release, we are revealing the full details of the SkyFonts credit system. As our beta participants know, credits are used in SkyFonts to rent fonts. A single credit is used to rent a font for a day. Three credits will allow you to rent a font for a month (30 days). Credits are available in packs of 15 or more at a price of $3 per credit – a price that was determined in part by your feedback. For short term projects that will be completed in a day or a month, we think that paying $3 — $9 to use a font is a nice alternative to paying for a perpetual font license. You can save a little on SkyFonts credits if you purchase them in larger quantities.

SkyFonts

Utilize the SkyFonts website to browse thousands of quality typeface families

Unlike the ‘beta credits’ which expire after 30 days, any credits purchased can be used for one year before expiring. The entire SkyFonts inventory will be available for free trial. Simply select the ‘try for 5 minutes’ option for access to the actual font data.

Once you’ve loaded up your account with credits, we’ve got plenty of options for you to spend them on. The SkyFonts catalog now boasts a selection of more than 8,000 fonts. You’ll discover designs from a broad range of top sources including our own Monotype, Linotype, ITC, Ascender and Bitstream foundries in addition to many of our foundry partners such as Mark Simonson, TypeTogether, Laura Worthington, Typodermic, the Chank Company, Yellow Design Studio, Emboss Fonts, Bean and Morris, Type Associates and Mint Type.SkyFonts

So what’s next for SkyFonts? We’re currently working on some additional enhancements to the website that will make it easier to explore the inventory. We’re also exploring options to allow you to browse and activate fonts in other places including design applications and other websites and services from Monotype.

As a thank you to the valuable feedback you’ve provided, we’ve topped off the accounts of our beta participants with 110 beta credits which can be used for the next 30 days. For those that haven’t signed up, we have something for you as well. Create your free account now and receive 10 free credits (good for one year). But do so quickly. This introductory offer won’t last.

 


by Ryan Arruda

Founded in Southern California nearly four decades ago, Mongoose is a recognized authority in the biking world. With an extensive collection of rugged mountain, BMX, and street bikes in their product line, it’s fitting that the company’s website is indeed peppered with a distinctly kinetic and visceral visual spirit.

Bold, prominent typography contrasts seamlessly with imagery overlaid with bright, saturated colors. The site’s top navigation features the DIN 1451 typeface for its main elements, as well as the stocky, bold weight of the ITC American Typewriter family for secondary items.

The body of the site follows in a similar vein — headlines are generously set in the EngSchrift style of DIN 1451, while subheadings and body copy are set in the bold and medium varieties of ITC American Typewriter, respectively. The friendliness of the ITC American Typewriter family is an especially nice foil to the seemingly pragmatic demeanor of DIN 145.

DIN 1451 is available in both a regular and condensed weight. ITC American Typewriter is available in three weights — light through bold — and features matching italic designs as well as three condensed styles. Both designs are available through subscriptions to the Fonts.com Web Fonts service.

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.


Great type makes sites stand out