BLOG

News and information related to Webtype, including new fonts, technology, and general observations on the state of online typography.

New from MVB Fonts: MVB Solano Gothic

MVB Solano Gothic webfonts

MVB Solano Gothic was originally designed as a display face for the City of Albany, a small town on the east edge of the San Francisco Bay. Named for the city’s main street, the typeface needed to work on signage in proximity to early 20th-century buildings, as well as in contemporary settings. Mark van Bronkhorst’s design is a strong, condensed sans serif that references pre-digital letters of all sorts, from metal architectural lettering to hand-painted signs. The style is not overtly retro, however. It sits comfortably on contemporary-styled web pages, and the straight-sided forms are especially well-suited for the pixel screen where MVB Solano Gothic is recommended for use at sizes 14px and up.

Since the initial commission, issued only in Bold, Solano Gothic has been expanded to a family of five weights, all the way down to a crisp Light. The fonts are also equipped with optional simplified forms for ‘a’, ‘g’, ‘l’, ‘M’, and ‘Q’ which can be accessed through the Stylistic Sets feature in OpenType. Small caps (with matching figures), fractions, and a variety of arrows are also included.

You can use MVB Solano Gothic’s alternate glyphs, small caps, fractions, and ornaments via font-feature-settings in your CSS.

You can use MVB Solano Gothic’s alternate glyphs, small caps, fractions, and ornaments via font-feature-settings in your CSS. Read more about using OpenType features. Some ornaments (see gray labels) are accessible via HTML entities in the style of &#xUNICODE;.


Underware Is Now on Webtype

We are pleased to welcome Underware to Webtype, along with three of their most popular and expressive typefaces.

At the end of the 20th century, not long after a decade dominated by the Grunge aesthetic, a new group of young designers entered the type scene, producing accomplished, versatile families. Digital type design had reached a new maturity in which well-trained but independent boutique shops made fonts as professional as those issued by the large, established foundries.

Underware was at the head of this new class. Fresh out of grad school at KABK’s Type and Media program in The Hague, Akiem Helmling, Bas Jacobs, and Sami Kortemäki infused their typefaces with a youthfulness combined with rich influences from their backgrounds in Germany, The Netherlands, and Finland. 15 years later, Underware is still setting trends and delighting audiences with inventive and useful fonts.

Now Underware type will be available via the reliability and convenience of the Webtype service. The first batch of the foundry’s fonts to hit our collection is Bello, Auto, and Fakir.

Bello webfonts

Bello is Underware’s first hit, favored by designers for the effortless way it conveys energy and joy. While informed by traditional handwriting and brush scripts, Bello is rendered in a undeniably contemporary way. It translates the work of a traditional sign painter into the here and now. This ebullience is especially effective on the web, where we are accustomed to seeing plain and sober stuff. The inky Caps font offers a toned down companion to the script.

Here are a few of the many ligatures and swashes that give Bello a hand-lettered flow. Ligatures improve connections and reduce duplicate shapes, while Titling and Swash alts add flourishes to the beginning and ending of words. Learn how to use these OpenType features on the web.

Here are a few of the many ligatures and swashes that give Bello a hand-lettered flow. Ligatures improve connections and reduce duplicate shapes, while Titling and Swash alts add flourishes to the beginning and ending of words. Learn how to use these OpenType features on the web.

Auto webfonts

Auto is not a handwriting typeface, but it is unmistakably made by the same hand(s) that wrought Bello. Amiable and lively, yet still clean and readable, Auto is a friendly sans that can do the corporate, white-collar work usually reserved for duller types. It is armed with the extensive language support, small caps, and figure sets required for editorial and corporate uses, but what makes it unique is its three – yes three! – kinds of italics. These variants present the opportunity to choose a specific style for standard emphasis, or — for the more adventurous — use more than one italic style to distinguish content types without changing typefaces.

Auto Italics

Auto 1 Italic leans gently but the forms remain spare. Auto 2 Italic adds elements of a traditional oldstyle italic, with tails, serifs, and other turns of stroke. Auto 3 Italic is nearly upright in stance, but almost ornamental in shape — it’s as calligraphic as a modern monolinear sans serif can get.

Fakir

Fakir is another prime example of what Underware does best: add life and accessibility to a long established (and often antiquated) category of type. In this case, the target was the Textura blackletter. Fakir contemporizes the old gothic form by transforming less familiar Textura forms into romanized forms. This makes it more readable to a wider audience than most typefaces in its category. For moments that call for more flavor, Fakir Display brings back more blackletter character.

It is something of an anniversary for these three Underware families, as they were all introduced to the print world about ten years ago. Webtype is honored to introduce Bello, Auto, and Fakir to a new audience on the web, where they offer a lively alternative to more mundane and poorly designed options in each of their categories. Stay tuned — we’ll be adding more Underware fonts in the coming months!


New from Font Bureau: FB Big Caslon

FB Big Caslon on Webtype

FB Big Caslon is a significant update to Matthew Carter’s handsome headline face based on the largest sizes of William Caslon’s metal type. Released in 1994 and bundled in OS X for many years, Big Caslon is familiar to anyone with a Mac. It quickly gained favor among designers, gracing the pages of publications like Wallpaper and Boston magazines, and it even secured a place at the Museum of Modern Art in 2011. But users were limited to a single style. Now there are six: Regular, Bold, and Black weights, each with an Italic. This new variety of styles makes the family suitable for web designs that require flexibility and contrast in their headlines. That’s why Font Bureau is simultaneously releasing FB Big Caslon at Webtype along with the desktop edition.

FB_Big-Caslon_WT-specimen1

As the name implies, use FB Big Caslon big (48px+). Most default “web-safe” fonts were designed for text sizes, so one of the more exciting advantages of webfonts is the opportunity to deploy display typefaces in all their fine detail. When most of us think display type, we think brash, quirky, or ornamental, but Big Caslon is big type of another sort: striking in a classic, graceful way.

The versatility of FB Big Caslon is demonstrated by its ability to combine with a wide variety of type styles. Here it is paired with Georgia, Poynter RE, and Helsinki/Fort.

The versatility of FB Big Caslon is demonstrated by its ability to combine with a wide variety of type styles. Here it is paired with Georgia, Poynter RE, and Helsinki/Fort.

Big Caslon presents the opportunity to dress up a design without ostentation. It can be Georgia’s more delicate counterpart for grand heads, or serve as a harmonious companion for an oldstyle serif like Poynter RE. And, of course, it can bring a sense of warmth and elegance to a sans-seriffed screen that might otherwise feel too technical or cold.

While the roman styles are fairly reserved, FB Big Caslon lets loose in its italics, where web users can access a range of decorative alternates via OpenType features.

A sampling of the various alternative glyphs and ligatures available in FB Big Caslon Italic. Small caps, figure options, fractions, and other accessories are also included. See this document for a complete list of glyphs.

A sampling of the various alternative glyphs and ligatures available in FB Big Caslon Italic. Small caps, figure options, fractions, and other accessories are also included. See this document for a complete list of glyphs and features.

Along with these ornamental niceties, FB Big Caslon offers a more complete typographic arsenal than we have grown to expect from most webfonts: small caps, both lining and old style figures, fractions, and a complete set of case-sensitive punctuation (so your questions and exclamations are always in alignment). Perhaps most valuably, FB Big Caslon has an Extended Latin character set supporting languages of Central and Eastern Europe. This is more than a pretty face.

The Webtype debut of FB Big Caslon, by the way, follows on the heels of Carter’s other display serif Big Moore, which has a more antique feel.

Give FB Big Caslon a try — all fonts on Webtype can be tested on your own sites at no charge for 30 days.


New from Monokrom: Mønster

WT_Monokrom-Monster-Specimen1

Here is Mønster from Monokrom. Designed by Sindre Bremnes, this typeface has a playful sense of power — sharp teeth but a friendly smile. In Norwegian, “mønster” means “pattern”, so it’s no accident that it leaps out from the screen with a decorative shriek. Monokrom even calls it a “freak of culture” as it refutes the Wild West connotations that reversed-stress fonts confront.

If your webpage needs an ornamental touch, string these letters together. Mønster is intended for the most dominant text: titles and headlines, 48px or bigger. The tight spacing is intentional, so uppercase doesn’t demand extra letter-spacing; but there are few hard rules here. Unleash it.

Stylistic Set 1 (SS01) removes the bottom left serif from each h, k and l when they follow an a. For help with implementing stylistic sets, please read this post.

Monokrom is a small, independent type foundry based in Norway, founded by Frode Helland and Sindre Bremnes. They joined Webtype in November 2013 and we maintain their full catalog.

As with all fonts on Webtype, Mønster can be tested free of charge for 30 days.


New styles: Italics for Nitti Grotesk

Nitti-Italic specimen

With our release of Nitti Grotesk in February, we promised you that Italics would follow shortly. Well, here they are available in the same seven finely graded weights along with alternate characters for a and g so you can choose between the default “cursive” style italic or a more oblique style one (see line 2 and 5 in the specimen above).

alternates

You can use alternate glyphs and other OpenType features of Nitti Grotesk via font-feature-settings in your CSS. More info on how in this blog post.

Nitti Grotesk has its roots in the early English Grotesques, with their quirky and idiosyncratic shapes, that lend it humanity and warmth. The relatively short uppercase letters make Nitti Grotesk particularly suitable for applications with frequent use of caps, like title case and abbreviations. Alongside Nitti, the new sans became widely known through its use in the Writer Pro application and on the app’s accompanying website that launched in December 2013, underlining the clear, straightforward approach of Writer.

Nitti Grotesk is optimized for text sizes down to 14px and easy to combine with just about all serif faces. For instance, try Turnip RE and Benton Modern RE for body copy, or Belizio, Farnham Display, and Shift if you need a companion for larger sizes. As with all fonts on Webtype, Nitti Grotesk can be tested free of charge for 30 days. For more details, see the Nitti Grotesk webfont page.


New from Font Bureau: Input

Two variants of many: Input Sans and Input Sans Compressed

Two variants of many: Input Sans and Input Sans Compressed

Input is a new extensive type series designed for code and other texts less ordinary. David Jonathan Ross was looking for fonts better-suited to his programming needs: unambiguous letterforms, clear punctuation, large word spaces for fast skimming, and more options to highlight code syntax. What started as an explorations into possibilities resulted in a comprehensive system with sans-serif, serif and monospaced families in four widths and seven weights.

Input sans-serif-mono

Input Sans, Serif and Mono bold weights of the normal width

Design Variants
Input Sans and Input Serif might look monospaced at first sight, but they are not. Critical characters like m and W are given more room while letters like I, i or l are not forced to stretch. The two families make a great pair in texts and headlines, or provide slightly different flavors on their own. Numerals and punctuation are still designed on the same set-width so they easily line up in tables and strings of numbers. And of course there’s a monospaced variant of Input for when you want one, e.g. terminal commands or just the pure look of code and correspondence.

Terminal

Widths
All variants of Input are available in normal, narrow, condensed and compressed widths to best meet your preferences and space constraints: normal and narrow styles are dependable choices for small copy, the Compressed and Condensed work well in headlines, narrow columns or lists. For example, short lines of text in portrait mode on mobile devices benefit from rather condensed styles while wider styles suit longer lines — a great feature to experiment with in responsive design.

The four widths of Input Serif, regular weight

The four widths of Input Serif’s regular weight

Weights
Input’s seven weights take into account that text on screen isn’t always set black on white. The Thin to Regular styles act like grades, meaning they share the same spacing and show a rather subtle weight difference from one weight to the next. This can be utilized to compensate for lighter and heavier rendering on high- vs. low-res screens, or the halo effect of backlit reversed type. Similarly, Medium and Bold make two grades with identical spacing, and complement the Light and Regular respectively.

Input weights

The Regular and Bold weights are optimized for dark text on a light background, while the Light and Medium are designed for light text on a dark background.

Input is ruggedized for the roughest conditions and smallest sizes as reflected in the wide proportions, the extremely high x-height and the generous spacing. Ross began by designing a bitmap font and then drew Input’s letterforms on top of it to ensure excellent rendering on screen. The Light, Regular, Medium, and Bold were manually hinted for font-sizes down to 9px in all browsers and platforms. The Thin, Extra Light and Black styles are meant for medium sizes and display applications. When used large, you might want to set Input with a bit of negative letter-spacing for more vigor.

code conf sample

Several styles of Input combined: Input Sans Condensed, Italic, and Bold, with Input Sans Black and Thin for headlines. The code snippet is set in Input Mono.

All these different variants, widths and weights make Input versatile far beyond just code editors. Don’t be overwhelmed by the number of styles (168), they’re only there to give you maximum flexibility. A handful might already be enough, depending on scope and complexity of your work: responsiveness, space, line-length, font-size, positive or reversed text, etc.

Input is all about options, also within the character set. Alternate glyphs for often ambiguous letterforms let you choose via stylistic sets which form of i or l you prefer. All fonts cover the WGL character set (Western and Eastern Latin, Greek, and Cyrillic scripts) and include a full set of Unicode box drawing characters, as well as fractions, arrows and ornaments (accessible via HTML entities in the style of &#xUNICODE;). We put together a dedicated Input brochure site to show all features of Input in detail and tell the full story behind the design.

Input glyphs

And the best: Input is available free of charge for private / unpublished usage. This includes things like use in your personal coding app or composing plain text documents. Customize and download your preferred set on the Input brochure site. On Webtype, we offer all styles under an inexpensive publishing license, starting from $5 per style. As with all fonts on Webtype, you can try any style of Input free of charge for 30 days. For more info see the Input family pages.

minisite


New styles in the Nobel family: Nobel Condensed

Nobel specimen
Font Bureau’s Nobel family is now available in even more styles on Webtype. We added condensed widths and extra light weights for large headlines from elegant to punchy.

Designed in 1993 by Tobias Frere-Jones, Nobel is based on Sjoerd Hendrik de Roos’ original from 1929 for the Amsterdam Typefoundry in which Roos tried to enliven the basic forms of Futura. With its subtle warmth and less rigid geometry, Frere-Jones fondly refers to Nobel as “Futura cooked in dirty pots and pans”. Most notable differences are the double-storey ‘a’ and tailed ‘t’ in Nobel which make it more legible than Futura. The low x-height however doesn’t put it (nor Futura) forward for body copy. Especially the delicate extra light weights need ample size to shine (we recommend 60+ px).

Extra Light
All styles of Nobel look particularly good in all-caps settings. The large and wide uppercase letters lend it a noble presence (sorry for the pun but it’s true). The condensed styles are comparably narrow and best suited for headlines. For small body copy, you could combine Nobel with Apres RE, or a serif typeface like Poynter Serif RE or Giza RE. As with all fonts on Webtype, Nobel can be tested free of charge for 30 days. For more details, see the Nobel family page.

UI symbols

Nobel in use on Origin of Common UI Symbols, a small site made with Readymag, a service that also uses Nobel on their website.

Readymag

onsbergs3

Nobel on Örnsbergsauktionen.se. For more uses of Nobel on the web see Fonts In Use.


New from Font Bureau: Apres

Apres Specimen

Apres is an extensive sans-serif series by David Berlow originally designed for the Palm Pre smart phone in 2009 (now HP WebOS) for use both on screen and in their printed material. Initially, Berlow developed a family of six fonts for the Palm user-interface, which were subsequently expanded with the help of Richard Lipton and Dyana Weissman into a versatile family of 40 styles: five weights, four widths, plus italics.

The simple, open letterforms of Apres provide a clear and inviting experience for UI navigation, app development and readability on screen. For small-sized body copy or captions, Berlow drew a special version of Apres — Apres RE. It has a larger x-height and wider proportions for excellent rendering in font-sizes down to 9px across all platforms and browsers. (You can see the two families in action as typefaces for body copy on Slate if you change the window size: normal Apres for large viewports, Apres RE for phone and tablet screen sizes.) Read more about the history of Apres and Apres RE on the Font Bureau blog.

Apres and Apres RE (right) on Slate.

Apres and Apres RE (right) both in 15px on Slate. Apres RE has a much larger image on the body to stay legible in the smallest font-sizes.

Naturally, Apres is an ideal choice for complex user interface design, but the series is also well-suited for other applications such as editorial or shopping websites. Its modest nature makes it very easy to combine with other typefaces. For example, you can dress Apres up with elegant serif typefaces such as Harriet or Whitman, go casual by combining it with a sporty script like Mascot, or follow the forthright route and pair it with plain-spoken Brando.

As with all fonts on Webtype, Apres can be tested free of charge for 30 days. For more details, see the Apres and Apres RE family pages.

Apres as seen on ScientificAmerican.com, which also uses the typeface in its print edition. For more examples of Apres and Apres RE in the wild, check out Fonts In Use or the Webtype Gallery.


New from MVB Fonts: Mascot

Mascot

Even if sports aren’t your thing, you might find script varsity lettering from years past to have a certain appeal, perhaps conjuring simpler times. Naive and uneven, jaunty and legible — such casual scripts, with their requisite underline swooshes, were standard equipment for baseball teams from one-horse towns to the major leagues. To bring this aesthetic to the digital arena, Mark van Bronkhorst began with a vintage iron-on alphabet, redesigning the flocked, overlapping letters to behave as a script typeface, and expanding the character set to support all Latin-based languages. Despite its professional skill set with many ligatures and OpenType features, MVB Mascot retains the unvarnished spirit of its inspiration.

MascotOT

Alternate glyphs, e.g. for G, J, p and þ, as well as many ligatures (activated via the “liga” property) contribute to Mascot’s lively appearance. A set of swooshes can be added at the end of a word via the “ornm” feature. For a full overview see the Glyphs tab on the Mascot family page.

Mascot plays well with all text typefaces, certainly with sans-serifs with a slight retro touch. Try van Bronkhorst’s Sweet Sans for a bit of added calmness, or Nitti Grotesk, or Scout RE for body copy. As with all fonts on Webtype, Mascot can be tested free of charge for 30 days. For more details, see the Mascot family page.


New from Ludwig Type: Riga and Riga Screen

Riga

Riga by Ludwig Übele is a space-saving humanist sans-serif series, designed to work particularly well onscreen. Its personality is clear and practical; small caps and true italics give it a warm, somewhat sophisticated touch. Economical proportions, large x-height and open letter forms make Riga fit for long body copy, narrow columns and compact headlines. The family is suited for a wide variety of applications such as complex corporate design projects, editorial, information graphics, and branding.

Riga Screen

The four styles of Riga Screen, optimized for sizes down to 9px.

Riga Screen has been adjusted and optimized to complement the Riga family in font-sizes down to 9px. It is slightly lighter to compensate for the often richer rendering with subpixel-antialiasing, and wider than Riga to provide better legibility in body copy. Complex letter forms like the lowercase g have been simplified.

Riga comparison

A comparison of Riga (top) and Riga Screen (below)

Both Riga and Riga Screen combine well with a variety of serif families on Webtype, for instance Brando, the Harriet Series, or Übele’s Marat. As with all fonts on Webtype, Riga can be tested free of charge for 30 days. For more details, see the Riga and Riga Screen webfont pages.


Categories

Webtype on Twitter