The vast majority of fonts contain lowercase and uppercase alphabets, numerals, punctuation and accents. But there can be much more to fonts than this basic set of characters. Many professionally-designed fonts also contain ligatures, alternative characters, smallcaps, different kinds of numbers, and sometimes much more besides.
Discretionary ligatures in Magneta · Stylistic alternate in Raisonne · Swash alternate in Trilogy Fatface
Nowadays these additional font features are all included in the same font file and accessed through OpenType, a technology jointly developed by Adobe and Microsoft in the late 1990s. Web designers have had access to OpenType features for a year or so, through properties proposed in the CSS 3 Fonts Module. Firefox has supported this since version 4, and but until recently it was the only browser do so. Now Microsoft has joined the party by announcing OpenType support in Internet Explorer 10, along with Chrome on Windows (not Mac yet).
Introducing font-feature-settings
The CSS 3 Fonts Module proposes many properties to access popular OpenType features. For example this is the proposed syntax for turning on common ligatures:
font-variant-ligatures: common-ligatures
At the moment there is no support for that or any other font-variant- properties. However there is one property which is supported: font-feature-settings. This one property can be used to access just about all OpenType features. It takes values which map to the somewhat cryptic four-letter OpenType features names. For example, to turn on common ligatures, we would use:
font-feature-settings: "liga"
To turn on discretionary ligatures as well, we would add a second property:
font-feature-settings: "liga", "dlig"
To keep common ligatures but turn off discretionary ligatures, we follow the OpenType feature name with a zero:
font-feature-settings: "liga", "dlig" 0
To make this work in Internet Explorer 10 you need to add the -ms- vendor prefix as follows:
-ms-font-feature-settings: "liga", "dlig" 0
Webkit uses the same syntax as above, but unfortunately Firefox currently uses a slightly different (older) syntax:
-moz-font-feature-settings: "liga=1, dlig=0"
Assuming Opera will join in sometime too, a full CSS rule to turn on both and discretionary ligatures would look like this:
h1 {
-moz-font-feature-settings: "liga=1, dlig=1";
-ms-font-feature-settings: "liga", "dlig";
-webkit-font-feature-settings: "liga", "dlig";
-o-font-feature-settings: "liga", "dlig";
font-feature-settings: "liga", "dlig";
}
See this example of turning on common and discretionary ligatures using Magneta by Positype.
Common OpenType Features
Here’s some common, but by no means all, OpenType features mapped to their font-feature-settings values:
| Common ligatures | “liga” |
| Discretionary ligatures | “dlig” |
| Small caps | “smcp” |
| Lining numerals | “lnum” |
| Old-style numerals | “onum” |
| Swash alternates (index number) | “swsh” n |
| Styleset (01–20) | “ss01–20” |
For more details on OpenType features see FontShop’s Introduction to OpenType. We’ll be adding more tutorials over the coming weeks showing how to use these properties in detail.
Many fonts from Fontdeck include OpenType features, particularly common ligatures. We’re going through the process of tagging them with opentype. The list isn’t complete at the time of writing, but should give you a starting point – remember you can try all Fontdeck fonts for free, for as long as you like.
Of course using OpenType features is fine if you’re taking a progressive enhancement approach to your web typography, but what if you really want support for browsers other than Firefox, Chrome/Win and Internet Explorer 10? We’ve got a solution for that too: it’s called expert subsets and we’ll be talking more about in a post very soon.
Tagged: opentype, CSS, CSS 3, font-feature-settings, ligatures, .
A massive Christmas list of fabulous gifts for the type geek, letter lover or font fan in your life.
Typographic Time Zone Clocks by Goodwin and Goodwin. £54.95. Made in England out of matt black steel, these feature New York, London or Paris.
Typography Is Everything poster designed by Simon C Page. $15.00. Fine art print on natural white, matte, ultra smooth, 100% cotton rag, acid and lignin free archival paper using an advanced digital dry ink method.
Ampersand Sign by Signs for Homes. £95. Well you can’t beat a good Ampersand, in this is pretty awesome (in the true sense of the word). This huge hand-painted Ampersand is fitted on the back are 2 circular hooks to hang on the wall. Satin red egg-shell finish.
Cast Iron Ampersand from House Industries. $250. More than just a pretty shelf sitter, these heavy ligatures can be deployed in a wide variety of household and office applications such as bookends, door stops, paperweights, dumbbells for power-walking or self-defense mechanisms. Each sculpture is hand picked, numbered, signed by the artist.
Ampersand fine art print by Teagan White. $15.60. While we’re in the mood, how about this?
The Big Lebowski by Jerod Gibson. $17.00. Fine art print, also available as an iPhone case, laptop skin, hoodie and t-shirt.
8 Faces magazine. $8. Pressed at just 2000 limited editions, each issue is a true collector’s item. The magazine has one core question at its heart — if you could only use eight typefaces for the rest of your life, which would you choose? — and poses this to eight leading designers from the fields of web design, print design, illustration, and type design.
Codex magazine, the journal of typography. $27. 164 glorious pages of articles, book and type reviews, interviews, type history, new and notable faces, essays, type design, from typography experts.
Helvetica Mad Men screenprint. $150. Inspired by one of the original Stempel promotional posters for Helvetica (as seen on “Mad Men”). Numbered edition of 100 copies, each signed by Helvetica director Gary Hustwit.
Whitelines notepad by Papernation. £1.95. A stylish A5 sized notebook with soft saddle stitch cover containing the revolutionary new Whitelines paper, that improves your writing and drawing experience - traditional dark lines on paper interfere with your content, white lines don’t!
Type Sketcher by Ian Lynam. $12. Cap height, ascender, bowl, serif, baseline: there are a lot of things to keep track of when designing letterforms! The Type Sketcher trio of pocket notebooks helps you stay on track as you design. This set features one book for uppercase, one book for lowercase, and one book for numerals, punctuation and symbols. Each book comes with a brief but informative guide to the basics of type design that serve as gentle guides for beginners and helpful reminders for seasoned type designers.
A World Without Type…. $30. An I Love Typography special edition: a magnificent A2 print designed by Swedish graphic & type designer Stefan Hattenbach. Screen-printed in Tokyo on beautiful red Plike paper with gold, white, and black inks. A limited edition of 200. Use the discount code FONTDECK to get $10 off!
Brighton Font Map by Unlimited Editions. £125. Limited edition foil embossed typographic map of our favourite city!
Punctuation bags by Alphabet Bags. £12. Each heavy weight cotton tote bag has been lovingly screen printed and stitched in the UK.
Optimism/Pessimism Double-Sided Print. £45. Philosopher and writer Alain de Botton and graphic designer Anthony Burrill collaborated on a double-sided poster produced exclusively for the first GraphicDesign& event, held at the Design Museum. The event’s subject was Generalia, Phenomena, Knowledge. Alain sees classification as an opportunity to reorganise knowledge so that it might be more helpful to us in everyday life, while Anthony finds his ability to classify his own life is a route to happiness. Their double-sided collaborative poster addresses stereotypical perceptions of seemingly opposing approaches to life.
Centaur letterpess print by our favourite printer, Blush. £20. The first in the ‘Assorted Types’ series of letterpress prints showcasing classic typefaces. Designed by Jim Williams, an award winning typographer & graphic designer who has a lifelong passion for the craft of typography and letterforms. The prints have been lovingly printed to perfection on our vintage Heidelberg cylinder press onto 300gsm Somerset Velvet 100% cotton paper. Limited to 100 prints and individually numbered.
SOGO Japan Charity Print by Ligature, Loop & Stem. $100. This very special limited edition print by type designer and lettering artist Neil Summerour is a true labour of love and respect for Japan, a country that transformed his outlook on the world at age 16. Every exquisitely lettered Kanji on this 18”×24” silkscreen print represents a Japanese city affected by what has been called the 2011 Tōhoku earthquake. 100% of the proceeds from each print will go directly to SOGO Japan, a charitable organization created by Neil that feeds directly to indigenous relief and aid organizations in Japan
Gutenburg Bible replica page signed by Stephen Fry in aid of St. Bride Foundation. £25. A limited edition of 100 copies. The pages were printed on Alan May’s one-pull press that featured in the Stephen Fry BBC documentary about Gutenberg.
And that’s yer lot! Hope you were inspired. Let us know in the comments of any other type-related gifts were might like to know about.
Tagged: gifts, Christmas, .
Siri was designed by Göran Söderström, a talented young Swedish designer. It is a labour of love and a true super-family with a total of 24 styles.
The Siri family was designed from the start to perform well on screen, and Siri Core includes four hand-hinted fonts tuned for use at body text sizes. Siri has a large x-height, modest contrast and slightly condensed letter forms, giving great readability and a strong identity. The result is a typeface which is original and bold, practical and beautiful.
Siri
Siri has eight weights plus italics, providing flexibility from thin to black. As a web font, it’s perfect for use at headline and display sizes.
Siri’s terminals are gently curved and flared for a subtle touch at larger sizes
Siri is a female Nordic name (in fact the name of Göran’s baby daughter), comprising the words Beauty and Strength; qualities nicely reflected in the typeface.
Siri Core
Siri Core has four styles each of which were designed and spaced for optimum screen performance at body text sizes.
Siri Core’s terminals have been straightened for simplified rendering at smaller sizes
Design and outline quality is arguably the most important factor in a successful screen font, but font engineering is important too, and all the Siri Core fonts are hand-hinted for improved rendering on Windows.
Rendering on Windows XP with ClearType turned on
By designing with TrueType outlines, Göran was also able to make use of glyph components to reduce all of Siri’s file sizes by 35%.
Siri Core Schoolbook
Siri Core Schoolbook is Siri Core with some simplified letterforms, making it suitable for younger readers and those with reading difficulties, or when a subtly different flavour of the typeface is needed.
Expert subsets
Siri also comes with a new feature we’re calling Expert Subsets (more details soon). These are tiny font files which contain a small number of characters usually only available as OpenType features. Siri’s Expert Subsets contain small caps and the alternative old-style numerals. Expert Subsets are used in conjunction with (effectively overriding) the regular font something like this:
.smallcaps {
font-family: "Siri Expert Subset Extra Bold", "Siri Extra Bold", sans-serif;
}
We love the attention to detail that Göran has put into Siri. Its superb performance in web browsers was designed in from the start, and with the wealth of weights and styles available, we fully expect Siri to become a staple of all web designers looking for a reliable, flexible and unique sans-serif. Siri is available exclusively from Fontdeck.
PS. If you like the look of Siri, and you’re quick, you might like to check out door 6 of the Adfont Calendar.
Tagged: New Fonts, Siri, Letters From Sweden, .
The Adfont Calendar has returned for a second year! It’s not your ordinary advent calendar - each day we showcase one of our favourite typefaces of the year and give away a free web font license from the family. That’s 24 free fonts in all.
And if that wasn’t enough we’ve scattered some great (and maybe just cheeky) visual treats throughout the rest of the calendar So what are you waiting for? Visit the Adfont calendar now, and be sure to return every day until Christmas!
Tagged: adfont calendar, .
Here are some more fabulous designs in our series showcasing web sites using Fontdeck.
Aston Martin was recently voted Britain’s coolest brand for the fifth time in six years. Using Hermann Zapf’s Classico throughout, the site conveys that sharp sense of cool and quality magnificently.
4AD is one of favourite indie record labels. Their redesigned site makes great use of DIN 1451 Mittelschrift in all their headings to enhance the low-key look which sums up the label beautifully.
The Plant is a London-based branding agency. They use Fontsmith’s FS Clerkenwell Web throughout the site to give a contemporary look with a hint of the traditional.
Have you used Fontdeck web fonts on any new sites recently? Let us know in the comments or drop us a tweet.
Tagged: showcase, DIN 1451, FS Clerkenwell Web, Classico, .
The Fontdeck team was delighted to hear the news that Adobe has acquired fellow web font service, Typekit.
The web font world is a small and friendly one, and we know many of the folk at Typekit well, from both their work there and prior to the web font revolution. We talk regularly, have worked together on projects like the WebFont Loader, and we’ve had Typekit folk as guest speakers at our Ampersand web typography conference. So we’re extremely pleased for them, and wish Jeff Veen and his team the very best in their new careers at Adobe.
The acquisition of Typekit by a large company like Adobe has sparked a lot of discussion on Twitter. Much of this has been positive, but some people have raised concerns about the deal, particularly individuals who have had negative experiences with Adobe and are worried about the future development and stability of Typekit’s service. We suspect this concern is unjustified – at least in the short term – as Adobe will have most likely have secured the core Typekit team for a few years.
Some designers and foundries have also expressed concerns about Adobe wielding too much power in the web typography space. After all Adobe is a type foundry and font reseller, as well as a software vendor. As such, some people are worried about a loss of competition or being tied into particular services. We’re not too worried by these concerns. We believe that Adobe’s investment can only be a good thing for web typography and web fonts in particular. It goes to prove that what was once considered a niche technique for those on the cutting edge, will be the way to go for the majority of web designers.
Many people are asking about our plans for Fontdeck and whether we’re also looking to be acquired. While an acquisition isn’t something we’d ever rule out, it’s not something we have plans to pursue. Unlike some companies that were deliberately set up to be sold, Fontdeck has always been about pushing the field of web design forward. That’s why, with the help of our partners at OmniTI, Fontdeck has been incubated from the start by Clearleft and why we’ve never chased funding, and with our tight-knit team, who live and breathe the web and typography, we have some incredibly exciting partnerships and products just around the corner.
We are proud to remain resolutely independent. We know many of our foundries partnered exclusively with us because of that ethos, and we are committed to keeping Fontdeck the leading independent web font service for the foreseeable future.
In this latest showcase post, we look at some more websites with outstanding typographic design.
Australian-German designer Brent Riddell makes excellent use of the highly distinctive typeface Adso, a contemporary gothic script font by Bureau des Affaires Typographiques . Pairing the font with an electric yellow breathes contempory life into a design that is edgy, distinctive, exciting and bold.
Penny Black is an exclusive property buying agency, based in London. They have chosen Serifa, Adrian Frutiger’s wonderful slab serif. The light weight used here sets off the display heading very nicely indeed.
Hidden History Belfast is a website introducing a book by the same name. For this site, the design very effectively brings the past to the present by pairing a contemporary font family in Bliss typeface originally designed in 1757 — Baskerville. This font pairing is used in the book itself, and through the magic of web fonts, these same fonts are being used on the website too.
Have you used Fontdeck web fonts on any new sites recently? Let us know in the comments or drop us a tweet.
Tagged: showcase, adso, serifa, bliss, baskerville, .
Abril is a fabulous new font family from Type Together. Abril is a font family of two worlds: 8 text styles and 10 display styles.
Abril Display superimposed on Abril Text
Abril Text
The four main text weights of Abril Text have been manually hinted ensuring superb rendering across all platforms.
Abril Text on in IE8 on Windows XP
The text styles are inspired by 19th century slab serifs and ‘scotch’ roman types. They maintain consistency with the display styles, and at first glance may appear to have the same shapes only with lower contrast. However, in reality the letter forms of Abril Text were engineered from scratch to achieve a colour, texture and overall width that allow using the font comfortably for continuous reading.
Abril Display
The Abril Display weights, perfect for eye-catching headlines, are based on a contemporary revamp of classic Didone styles, and manage to convey both neutrality and strong presence on the page. They attract the reader’s attention with measured tension in the curves and eye-catching but equally legible high contrast.
Top–bottom: Abril Fatface regular, Abril Display semibold, Abril Display extrabold italic
What’s more, we’re giving away the fabulous Abril Fatface Regular for free, for up to 1 million page views per month!
Tagged: Abril, New Fonts, Type Together, .
The first installment of a ongoing series of posts highlighting fabulous typographic website designs which have caught our eye.
Park & Bond is a high quality online men’s store mixing top brands with inspiring editorial content. The all-caps Futura Bold provides that stamp of quality for the shopping experiences. This is offset by p.s.type’s Quatro Slab Ultra Black providing stand-out headings for the editorial.
Birmingham is England’s second largest city and Business Birmingham has been set up to attract investors to the region. The vibrant, innovative nature of modern-day Birmingham is reflected in the bold use of Jonathan Barnbrook’s classic Bourgeois Ultra Italic, creating an immediate impact on the home page.
Published by Haymarket, Stuff is the world’s best selling gadget magazine. The print incarnation shows off the in-depth reviews and witty editorial with immaculate, modern typography that is an intrinsic part of the Stuff brand. Design agency (and Fontdeck partners) Clearleft recently redesigned Stuff.tv to enable the web copy to shine as much as in print. A combination of Parachute’s Square Sans Pro and Insigne’s Sommet Slab sets off the headings and editorial very nicely indeed.
Do tell us in the comments about your favourite sites using web fonts.
Tagged: Bourgeois, Futura, Quatro Slab, showcase, Square Sans Pro, Sommet Slab, .
