fonts.com blog
Posts Tagged ‘web’

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.



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.



by Ryan Arruda

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

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


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

With just a roman and italic design, the Titanium Motors™ typefaces make about as small as a typeface family you can get. Compounding this, the design has no lowercase. But don’t let this lull you into thinking that the face is anything less than a commanding and powerful communication tool. Titanium Motors is retro and modern, built like a Mack® truck on steroids – and surprisingly versatile.

 Titanium Motors’ muscular weight creates powerful headlines, logos and signage – all with attitude and swagger. Its geometric character shapes, and distinctive letterforms speak to the modernity of the typeface, while the high-waisted counters and stressed strokes give Titanium Motors’ a subtle Art Deco flavor. Words like “bold,” “dynamic” and “authoritative” immediately come to mind.

Check out the “hero image” on Fonts.com’s home page, created by The Heads of State, or the image accompanying this post to see just how formidable a graphic statement this typeface can make. If Vin Diesel were a typeface, he would be Titanium Motors.

A collaboration of Steve Matteson and Jim Ford’s design talents, Titanium Motors was initially drawn as a custom font for a computer game. Since then, it has been used in a bevy of applications. Consider it for posters, flyers, packaging, publication design or Web banners.

The Titanium Motors family is available as desktop fonts from the Fonts.com and Linotype.com websites. It is also available as Web fonts through the Fonts.com Web Fonts service.

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

For over three decades, Timberland has been a premier designer of foot and outdoor wear. Employing over 5,000 people, Timberland products are sold in specialty stores worldwide, including through their own retail locations.

The company’s website features an excellent implementation of display typography: overlaid upon photographs, a rotating carousel of large headlines are set in the bold weight of the ITC Lubalin Graph family, while supporting text employs the Bold Condensed No. 20 weight of the Trade Gothic collection.

Both faces are exceptionally structural in their design, yet quite complementary. ITC Lubalin Graph – with roots in the Herb Lubalin–inspired ITC Avant Garde Gothic family – possesses an overt kindly charm.

Subheadings are set in Trade Gothic Bold Condensed No. 20. Despite being a slightly more stoic typeface, the diminutive use of the family on the Timberland site prevents it from undoing ITC Lubalin Graph’s cheerful disposition.

ITC Lubalin Graph is available in 18 styles, from a delicate extra light weight, to a industrial strength bold. A condensed width featuring the same weights round out this versatile collection. The Trade Gothic family is available 14 styles, and is comprised of  both regular, condensed, and extended widths. In addition to online use, both type families are available for desktop licensing through Fonts.com 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

Jovica Veljovic was living in the former Yugoslavia when Aaron Burns, the president of ITC, met him in the mid 1980s. Upon seeing the young calligrapher’s work, Burns immediately realized that he was in the presence of exceptional talent and encouraged Veljovic to take up typeface design. The ITC Veljovic typeface family was first of many he drew for ITC.

In his storied career, Veljovic has gone on to develop typefaces for Adobe and Linotype – as well as ITC. Although he spends much of his time today teaching typography and type design near his home in Hamburg, Veljovic has continued to draw new typeface designs. All started out as brush and pencil sketches.

None of Veljovic’s designs were first imagined as constructed outline drawings. It was only after the basic shapes and proportions were finalized in brush form, that Veljovic would construct letters as digital outlines.

Early Sketches for Agmena

“For me, it is important to begin a new typeface by drawing with a brush or pen,” says Veljovic. “This is especially true when I am making a new text typeface. The first text faces grew out of calligraphic writing and I think it is important to maintain this tradition.”

Agmena Swash Italic Sketches

The Agmena family, announced this week, is no exception. The first sketches for the design were roughed-out by Veljovic with a broad-edged brush. These became the basis for more refined drawings, which were then transferred to the computer for yet further development. The end result is a distinctive family of four weights – each with complementary italics – based on calligraphic, Renaissance “old style,” design traits and proportions.

Agmena

The complete Agmena family is available as desktop fonts from Fonts.com, as well for Web use through the Fonts.com Web Fonts Service.

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.