Here’s another collection of stunning sites from the Fontdeck showcase.
Here’s a great use of Din Display on this website promoting a book about unicycling by Gradient Press. In addition to the cool parallax scrolling effect, Din’s solid lines and precise angles are perfect for this context.
This site for Bulgarian photographer utilises the beautiful Bliss Cyrillic for its headings and body text.
DaDaFest is a disability arts organisation based in Liverpool. Their site uses the characterful and accessible FS Me in bold and light weights.
Toronto based graphic design studio Rough Work have used Monosten for a stylish, stark & functional look.
Do you have a site using Fontdeck that you would like us to showcase? Get in touch in the comments or on twitter and tell us about it!
Here’s another round up of gorgeous new websites from the Fontdeck showcase.
Smashing Magazine, the world’s most popular online web design magazine, was recently responsively redesigned by Elliot Jay Stocks. With a focus on simple, readable typography, the design features the stylish and highly legible pairing of Skolar and Proxima Nova.
Avios (the new Airmiles service) also launched their website recently. It uses FontSmith’s distinctive FS Joey Web for its bold navigation and strong headlines.
Another site which has recently undergone a responsive redesign is Kensington Academy of English. The slick new site designed by Jon Aizlewood uses both Museo Sans and Proxima Nova along with some cool CSS3 techniques – check out the rotation transforms demonstrating how web fonts can be manipulated.
Do you have a site using Fontdeck that you would like us to showcase? Get in touch in the comments or on twitter and tell us about it!
Tagged: Museo Sans, Proxima Nova, showcase, Skolar, FS Joey Web, .
Our latest foundry partner, Typejockeys, is based in Vienna, Austria and was established in 2008 by Anna Fahrmaier, Thomas Gabriel and Michael Hochleitner. It currently boasts three fabulous typefaces, Aniuk, Premiéra and Ingeborg.
Aniuk
Aniuk has been designed to be used in large sizes, boasting five robust weights of Regular, Medium, Bold, Heavy and Black. Aniuk is playful with characteristic curves and edgy details make this the perfect font for eye-catching headlines and creative editorial work.
Top to Bottom: Aniuk Black, Medium and Regular.
Premiéra
Premiéra is a text face designed to be used in small sizes and is available in three styles: Book, Bold and Italic. The tall x-height and short ascender/descender makes Premiéra perfectly suited to on-screen reading.
First usage of Premiéra in a booklet printed at Drukkerij Jan de Jong in Amsterdam.
The rendering across all platforms is excellent thanks to the manually hinting of Premiéra’s text weights.
Rendering in IE8 on Windows XP with ClearType turned on
Ingeborg
The Ingeborg family was designed with the intent of producing a readable modern face. Its roots might well be historic, but its approach is very contemporary. Ingeborg’s text weights are functional and discreet. This was achieved without losing the classic vertical stress and high contrast of a Didone typeface.
The display weights on the other hand are designed to fulfil their job and catch the reader’s eye by individual form and the luxurious shapes of a great fatface. Nevertheless both styles are of one origin and work together in harmony. Ingeborg won a TDC award of excellence in Type Design.
The full range of Ingeborg in use.
The Ingeborg block fonts in the family offer a stylistic range of all caps Block and Striped letters, providing that eye opening distinctive edge to your creations.
Take Typejockeys for a free test ride
All three of these fabulous typefaces are now available on Fontdeck, so go and give them a try for free.
Tagged: Typejockeys, Foundries, New Fonts, .
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.
