fonts.com blog
Posts Tagged ‘web’

by Darren Glenister

Fonts.com Subscription Extension

The recent integration of our SkyFonts technology into our Fonts.com Web Fonts subscription plans introduced some major new benefits. These included the ability to try fonts before buying them, and the ability to use fonts included with your subscription for website mockup use and even final design use. Now we’re excited to bring you two new tools that make SkyFonts even easier to use. And of course, there’s no additional charge for either of them, since they’re automatically part of all Fonts.com Web Fonts subscriptions, even our free plan. Don’t have a plan yet? Sign up now for free.

Try, install and sync fonts from favorite Adobe design applications

We have an all-new Fonts.com subscription extension for industry-standard design applications including Photoshop, Illustrator, and InDesign. Whether you’re using Adobe Creative Cloud or Creative Suite, you can try, install, and sync desktop fonts from your Fonts.com subscription directly through your favorite design applications.

Fonts.com Subscription Extension

All the functionality of the SkyFonts client for activating fonts is built right into the extension. An unobtrusive window within your application allows you to search for and activate fonts right in your document. Free plan subscribers can use the extension to initiate five minute trials of fonts while higher level subscribers can use the extension to install mockup fonts and desktop fonts included with their plans.

A boon for efficiency, any fonts you trial or activate will automatically be pushed to your authorized machines through SkyFonts. Don’t have SkyFonts installed on one of your devices? Click here to download it at no cost. With our new extension you’re able to focus on your project details instead of managing or installing fonts. Whether choosing type, prototyping designs, or executing production work for digital or print projects, this extension allows you to take full advantage of your Fonts.com subscription benefits with ease.

Download the Fonts.com Subscription Adobe Extension for free.

Easily Browse & Activate Fonts Directly on Your iPad 

Need to make type choices when you’re away from the office, or don’t have access to your primary workstation? Or just want to browse fonts for fun?

We’re also excited to announce the Fonts.com subscription iPad app. With an intuitive touch interface, you can select, compare and activate fonts directly from your iPad. The app will be available for download shortly. In the meantime, you can try it out in your browser.

Fonts.com Subscription iPad App

Filter designs by visual traits such as weight, width and x-height, or browse typefaces by individual foundry. Use the mix feature to easily compare up to three different typefaces at a time, giving you a great way to gauge and establish a visual hierarchy for your project — pick your headline, subhead and body text type system in one simple step.

Find a design you like? Add it to your list of favorites with a touch of a button — a convenient way to save fonts for future projects or to collect type options to present to clients and colleagues. Or already know which designs you’d like to use? You can activate trials, mockup and desktop fonts directly from your iPad — even selections made on the go are automatically synced to all your authorized machines via SkyFonts.

With our new Fonts.com subscription Adobe extension and iPad app, you can now access type in whatever application you are in — be it Photoshop, Illustrator, or InDesign, and from wherever you are — in the office or on the go.

Get them both for free!

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

CustomerSpotlight_SasquatchFestival

Occurring over four days at the end of May, the Sasquatch! Music Festival features an eclectic lineup of musicians performing at the Gorge Amphitheater in Quincy, Wash.

The festival’s site is a typographic delight. Utilizing colossal headlines and navigation elements all in the affable ultra weight of the ITC Kabel family, the site is reminiscent of 19th century broadsides — large, type driven, and visually arresting.

Despite the presentation being set almost exclusively in not only the same typeface, but the same weight of that selection, the use of scale as well as the muted, earthy color palette provides an engaging and navigable hierarchy.

In a slight divergence, the site’s body copy is set in the Futura family’s book weight. While certainly an aesthetic cousin of the ITC Kabel designs, Futura is decidedly more austere, making it apt for longer passages of text where former’s visually boisterous character would be to the detriment of the reader. The pairing works especially well given the contrast in the weights employed.

The ITC Kabel family is available in five weights, from the reserved book style to the hulking (yet charismatic) ultra weight. The Futura family is available in an expansive 20 styles, with weights from light to extra bold, including companion condensed widths as well. Both typeface families are available for desktop licensing, as well as online use through subscriptions to the Fonts.com Web Fonts service.

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

Ireland.com is the online presence of Tourism Ireland, an organization marketing the Emerald Isle as a premiere travel destination.

The layout of the Ireland.com site is quite kinetic, with modular content blocks of varying size overlaid upon large, vibrant photographs. The site utilizes the Rockwell typeface family nearly exclusively; it’s employed not only for headlines, but subheads, body text and primary navigation as well. Italic styles are employed for secondary navigation.

Customer Spotlight: Ireland.com

While the heavier weights of this friendly slab serif design from Monotype are strong and sturdy, its lighter weights are excellent choices for body text. A visual complement to layout of the site itself, Rockwell’s geometric letterforms mirror the gridded, modular construction present on Ireland.com.

The Rockwell family is available in four weights from light to extra bold, along with matching italics. For further flexibility, the family is also available in two condensed styles as well. Try it for yourself through the subscriptions to the Fonts.com Web Fonts service.

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


Xenois

There are common themes that run through each of Erik Faulhaber’s typeface designs: breadth of family size, applicability to a wide range of uses, and a search for character perfection. His Generis design is a system of four compatible families of slab serif, serif, sans serif and a “simple” sans in the spirit of American gothic typefaces. Faulhaber’s goal for Generis was to develop a suite of “generic” designs that could be used for a variety of design projects.

Generis was followed by the Aeonis family; a very large collection of typefaces inspired by Greek lapidary inscriptions and modern industrial design. Again, minimalist character construction and a variety of weights and proportions provide for typographic versatility. The newest offering from Faulhaber, his Xenois design, is the beginnings of a large super family of typefaces aimed at solving a diversity of typographic problems.

According to Faulhaber, “I melded the basic design characteristics of Generis and Aeonis to create the foundation for the Xenois family. The result is a typeface collection that is sufficiently large enough to be used in a multitude of design projects, distinctive in its individual character designs – yet minimalist in structure.”

The sub-families within the Xenois series interrelate perfectly. Proportions and underlying character shapes are completely compatible within all the designs. They have a common and obvious design bond, yet each is able to stand on its own as a distinct typestyle.

Simple shapes, a large x-height and squared shoulders, mark Xenois. Each sub-family is comprised of five weights from light to heavy, and all have companion italics. Xenois Sans is a design reduced to its simplest character shapes. Xenois Serif has serifs – but they are small, and only the most essential to ease of reading have been included in the design. Xenois Semi echoes the shapes and proportions of Xenois Sans but stroke weights have been modulated.

The complete Xenois family is available as desktop fonts from the Fonts.com and Linotype.com websites. It is also available for online use through subscriptions to the Fonts.com Web Fonts service.

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

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

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

Neue Helvetica
Trade Gothic
Helvetica
Gill Sans
Avenir
Univers
DIN Next
Futura
Avenir Next
Neue Frutiger
Frutiger
Optima
ITC Avant Garde Gothic
Linotype Univers
News Gothic
Trade Gothic Next
Century Gothic
Monotype News Gothic
Futura T
Arial
ITC Franklin Gothic
Neo Sans
PMN Caecilia
Agilita
DIN 1451
Rockwell
Linotype Didot
Soho
ITC Lubalin Graph
New Century Schoolbook
ITC Garamond
ITC Conduit
Neue Haas Grotesk
VAG Rounded
Frutiger Next
News Gothic No.2
Soho Gothic
Univers Next
Abadi
Palatino
ITC Officina Sans
Sabon
Adelle
ITC Century
Gill Sans Infant
Eurostile LT
Calibri
Laurentian
Sackers Gothic
Trade Gothic Next Soft Rounded
Twentieth Century
Neue Helvetica Arabic
Garamond 3
Harmonia Sans
Frutiger Serif
ITC Fenice
Camphor
Bauer Bodoni
Neue Helvetica eText
Optima nova
ITC American Typewriter
Times
Candara
Eurostile Next
ITC Officina Serif
Helvetica World
Novecento
Yakout
Plantin
Gazette
Clarendon
MSung
Monotype Baskerville
Museo Slab
Cachet
Biome
Corporate S
ITC Franklin
Slate
Sassoon Sans
Bembo
Museo Sans
Albany
Compatil Text
Klint
Georgia Pro
Huxley Vertical
Baskerville
Monotype Garamond
Akko
ITC New Baskerville
Corporate E
Amasis
Alternate Gothic
Museo
Memphis
Egyptian Slate
Neuzeit Office
ITC Bodoni Seventytwo
MHei

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.
Ryan ArrudaRyan 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 Allan Haley

Italics are the aristocrats of type: elegant, beautiful, and dignified. Their history can be traced back to a time before there were fonts of type, when only scribes and the most educated communicated with the written word.

Traditional typographic history would have us believe that italic types were invented by Aldus Manutius in the late 15th century as a space saving device. The story is told that Manutius hired Francesco Griffo da Bologna to develop a cursive type for a new series of small books that he was planning to produce. It is said that Manutius’ goal was to reduce paper costs and thus make his publications less expensive. Then, as now, paper was expensive, but saving paper was not the goal in the creating of italic type – and Manutius never sold an inexpensive book.

Mantika Sans Italics

Printers of the time spoke of “writing” a typeset page as if it were a letter to a friend. As this somewhat unusual terminology implies, the typeface provided a much closer link between printer and reader than it does today. Certain styles of type were reserved for specific groups of readers. Manutius was not so much trying to save space with the development of his italic, than he was appealing to the educated, worldly, and wealthy readers of the early Italian Renaissance (who’s handwriting style the italic type mimicked). As for the books’ size, Aldus’ goal was to sell books that were portable.

Jürgen Weltin also had something special in mind when he drew the italics for his Mantika™ Sans typeface family. The characters are inclined at only 4.5° (the usual angle for italics is between 10° and 12°) and, as a result, appear to be almost upright. In contrast to this, character shapes are quite fluid and reminiscent of brush-drawn scripts. The overall effect is enhanced by the script-like terminals. “Within the variety of forms of the italics there are many contrasting elements that create dynamism,” Weltin explains. “The result is a pleasant, but distinctive, interaction between the rounded and almost upright forms.” Mantika Sans Italic, in addition to being a perfect complement to the Roman designs, can also be used on its own to set display headlines and short text passages.

Mantika Sans is available in two weights; regular and bold, both of which have corresponding italics sets. It has been designed so that the widths of the four related cuts are identical, meaning that a change of font within a single layout will have no effect on line length or layout consistency.

Click here to learn more about – and to license – the Mantika family

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

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

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

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

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


Great type makes sites stand out