Fontdeck Blog

In the Showcase: Gradient Press, Svilen Dimchevski, DaDaFest & Rough Work

Tue, 24 Apr 2012 17:16:45 +0100

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!

In the Showcase: Smashing Magazine, Avios & Kensington Academy of English

Thu, 01 Mar 2012 12:51:00 +0000

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!

Typejockeys are up and running!

Tue, 07 Feb 2012 16:54:00 +0000

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.

Using OpenType font features with CSS 3: Part 1

Fri, 13 Jan 2012 15:50:00 +0000

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.

24 Fab Fonts as Featured in the Adfont Calendar

Thu, 12 Jan 2012 09:35:00 +0000

Happy New Year to all you font fans! Hopefully you all thoroughly enjoyed the festivities and had a great break.

In the run up to Christmas, we at Fontdeck offered up our Adfont Calendar for the second year running. Each day we gave away a free web font license from some of our favorite typefaces of 2011. It was a massive hit again, but just in case you missed it, here’s a recap of all 24 fonts featured:

Dec1st

FS Albert Web

By Fontsmith
Dec2nd

Enigma

By Jeremy Tankard Typography
Dec3rd

Justus Pro

By URW++
Dec4th

Claremont

By Red Rooster
Dec5th

Brokman

By The Northern Block
Dec6th

SIRI

By Letters from Sweden
Dec7th

Magneta

By Positype
Dec8th

Kyrial Display Pro

By Mostardesign
Dec9th

Barber

By Fenotype
Dec10th

Abril Text

By TypeTogether
Dec11th

Qargotesk 4F

By 4th February
Dec12th

Rubrik

By Newlyn
Dec13th

Oblik Serif

By Tour de Force
Dec14th

Altis

By Typolar
Dec15th

Kirimomi Geometric Sans

By Wordshape
Dec16th

Familiar Pro

By CheapProFonts
Dec17th

Laramie Pro

By Profonts
Dec18th

Calluna Sans

By Exljbris
Dec19th

Tarocco

By MAC Rhino Fonts
Dec20th

Insider

By Characters Font Foundry
Dec21st

Line44

By Fontschmiede
Dec22nd

Uni Sans

By Fontfabric
Dec23rd

Faricy New Web

By Moretype
Dec24th

Din Text Pro

By Parachute

Which fonts were highlights for you in 2011?

Xmas presents for type fans

Thu, 08 Dec 2011 15:03:00 +0000

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.

Introducing Siri – a new sans-serif font from Sweden

Tue, 06 Dec 2011 07:45:05 +0000

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.

Fontdeck Adfont Calendar Returns

Thu, 01 Dec 2011 00:00:00 +0000

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!

In the Showcase: Aston Martin, 4AD and The Plant

Wed, 09 Nov 2011 17:10:09 +0000

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.

Our Thoughts on the Typekit Acquisition

Wed, 05 Oct 2011 11:26:00 +0100

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 the Showcase: Brent Riddell, Penny Black and Hidden History Belfast

Fri, 23 Sep 2011 13:00:00 +0100

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.

Introducing Abril Text & Display

Wed, 21 Sep 2011 21:11:00 +0100

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!

In the Showcase: Park & Bond, Business Birmingham and Stuff.tv

Wed, 24 Aug 2011 07:00:05 +0100

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.

Hyphenation arrives in Firefox and Safari

Wed, 17 Aug 2011 13:34:00 +0100

Pretty much the only forms of Western literature that don’t use hyphenation are children’s books and websites. Until now. Yesterday’s release of Firefox 6 and last month’s release of Safari 5.1 on OS X Lion mean that two browsers now support CSS 3 hyphenation.

Turning on hyphenation is easy. Just add this rule to your stylesheet:

p { hyphens:auto; }

Well, almost. In reality Firefox and Safari still only support vendor prefixes of the hyphens property (which is fair enough as the spec is still a working draft) so the code you’ll actually need is this:

p {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

To turn hyphenation off, replace the auto value with manual. This will ensure that automatic hyphenation is turned off, but manually inserted soft hyphens (the entity) are still respected.

Why Hyphenation?

Hyphenation has been in use since Gutenberg’s invention of moveable type nearly five hundred years ago. It has two main uses: saving paper, and improving justification and evenness of typographic colour.

By virtue of enabling more words to fit on a page, hyphenation means less paper need be used. Paper is generally not an issue with the web, but screen real estate certainly is.

Justified text (where words line up on both the left and right margins) generally looks terrible on the web because ‘rivers’ of white are introduced through the text as words are spaced apart to make lines touch both margins. These rivers make reading harder as the eye is drawn down them instead of along the line of text. If justification is not applied then lines of text can still appear overly ‘ragged’ at their ends. This tends to prohibit use of narrow measures (short lines). Hyphenation helps alleviate both these issues.

An Examples Paragraph with Long Words

This is text is not for reading. It features an unusual preponderance of lengthy words to increase the probability of hyphenation. Enormous elephants perambulating amiably. Mississippi alligators organising confrontations. Overbearing hippopotamuses swimming languidly. Precocious octopuses constructing dodecahedra. Disastrous rhinoceroses exacerbating situations.

LocalStorage in use on the Fontdeck Website

Thu, 04 Aug 2011 14:34:12 +0100

We are now using LocalStorage to store and update sample text on the Fontdeck website.

This HTML5 API is very useful, it allows you to store data locally on a user’s machine and we thought we’d take the time to explain how we’re using it.

Here are some useful resources for those interested in using LocalStorage:

How to Use Chromatic Fonts on the Web

Tue, 02 Aug 2011 14:29:00 +0100

Chromatic font families are collections of fonts which are designed to be used together in different colours and positioned on top of each other to create special effects with text.

At its most basic, a chromatic font family contains a fill and an outline font. Sometimes a complex version of a font can be used with a basic version. By varying the colour of these fonts and putting one over the other an original combination can be created.

We’ve seen this technique used in print, and with flattened images, but we wondered if it could be used with web fonts. By using just a few hundred bytes of JavaScript, we were able to progressively enhance text to be rendered with two fonts instead of one, thus enabling chromatic fonts to be used.

See this technique in action »

A function setOverlay() is responsible for making this technique work. The function sets the attribute ‘data-content’ to the contents of each targeted element. A CSS rule is added which specifies that the :after pseudo class for this element has content: attr(data-content), so that the text essentialy appears twice on the page. The :after element is then positioned over the parent element so that it becomes combined with the text underneath.

Once the function setOverlay() has run, the text can all be styled using CSS. This is the CSS to style the Cooper Black example above:

/* Fallback styles */
#demo .cooper-black {
    font-family: 'Cooper Black WS Regular', 'Arial Black', Arial, serif;
}
/* Additional styles when under the overlay */
#demo .cooper-black.overlay {
    color: #DF7F6C;
}
/* Overlay styles */
#demo .cooper-black:after {
    font-family: 'Cooper Black WS Hilite', 'Cooper Black WS Regular', 'Arial Black', Arial, serif;
    color: #000;
}

For browsers that don’t support :after or where Javascript isn’t available, only the first selector ‘#demo .cooper-black’ will be applied. It’s worth paying attention to how the text looks without javascript as IE6, 7 and 8 won’t receive this technique. All browsers which support the :after pseudo class will also use the other styles.

If you are thinking about using this technique, bear in mind that HTML content within the styled elements won’t be included, and so this technique won’t work for HTML styling such as <strong>. This is a limitation of the :after pseudo class.

If you are interested in this technique, the source files and documentation are available on GitHub.

Improved Language Support on Fontdeck

Fri, 29 Jul 2011 15:47:37 +0100

With a recent update, we’ve updated the pages for web fonts with Non-Latin character sets.

When we launched Fontdeck one year ago, one of our ambitions was to offer fonts for a wide range of languages. In addition to fonts with Latin characters, we also support Greek, Cyrillic, Armenian and most recently, Cherokee characters.

It’s all well and good providing these web fonts but we realised we weren’t showing these characters by default within the text samples on Fontdeck.

Now when you view fonts from any Non-Latin category, you will get a text sample written for these languages. What’s more, you can now easily preview the alphabet for these languages by selecting it from the drop down menu on each page.

Ampersand Conference

Tue, 21 Jun 2011 15:52:00 +0100

In three short years the web has been radically transformed. There have been many advances in technology that have led to this, including media queries and CSS3 transforms, transitions and animations. From a typographical perspective, the most radical transformation has been the birth of webfonts.

We had high expectations for Ampersand conference. For a start, the lineup was incredible. Well known speakers such as Jason Santa Maria, Jon Tan, Tim Brown and Mark Boulton were all set to make an appearance. Not only this, but the very nature of the conference was to overlap between type design, graphic design and development, all with one common goal – improving typography on the web.

Vincent Connare, best known for the typeface ‘Comic Sans’ (cue laughter – there was plenty of it!) surprised us by talking in great detail about digital type’s troubled past. Vincent doesn’t refer to himself as a type designer. He feels design doesn’t accurately describe what he does. He is a font engineer; finding strength in overcoming the technical hurdles of accurately representing type in a digital environment.

While Vincent introduced us to type from a font engineer’s perspective, Jason Santa Maria discussed how best to use type, from a web designer’s viewpoint, in his talk, on web typography.

Whilst some web designers come from a background in graphic design, there are a large number who have arrived at this juncture by very different paths. Until recently we were limited in our typographical endeavours and so focused on other means of visual communication. Now that digital type is available to us there is a tendency to use it without a full understanding of the rules. Jason doesn’t expect us to follow these typographical rules, but instead to know them well and break them with deliberation. Without knowing the history of typography and having a set of best practices, poor typographical design is inevitable.

One question he often gets asked is which font he would recommend using. This question cannot be answered without first being given a context. So when deciding which typeface to use on a project, he suggests you write a list of characteristics you wish for your font to have. These characteristics should mirror the tone and ‘voice’ that you wish the resulting work to have. Jason also discussed other best practices he tends to adopt such as setting line spacing proportional to the length of a line. The justification for this is that a longer line requires more whitespace in order to be navigated with ease.

Jason’s talk was inspirational and left us feeling empowered. His passion for typography is evident in all work that he does, from print design in A Book Apart to Typedia, an encyclopaedia of typefaces.

Jon Tan gave us another string to our bow with his talk on using typography to evoke emotion. He suggests that, in the words of Bruce Lee, we “Don’t think, feel.”, pointing out the power typography has to give us an emotional response to text. He believes the role of the typographical designer is to take this ability and use it to our advantage.

Jonathan Hoefler is one half of the foundry Hoefler & Frere-Jones, perhaps best known for their typeface Gotham. What was apparent from Jonathan’s talk Putting the ‘Fonts’ into Webfonts was how much they care about fonts. Ever since webfonts were first talked about, their team has been hard at work adjusting, refining and improving their typefaces for use on the web. We were shown examples of the distances they have come and were impressed to say the least. We look forward to seeing what this foundry come up with in the near future.

Following on from Jonathan, David Berlow talked in great detail about the challenges posed by designing type for displaying on the screen.

By this point we had heard about web typography from the perspectives of web designers, font engineers and type designers. The final missing piece came from John Dagget, Firefox developer & editor of the CSS3 Fonts Module. If you thought that the greatest advancements in web typography had already occurred, you were very wrong. Right now, people are busy working on new browser features. John himself is working at Mozilla Japan in Tokyo, enhancing the CSS3 fonts module. He showed us examples of controlling which type of ligatures appear in text, adjusting kerning, small caps and dozens of other features already baked into OpenType fonts. These features aren’t new, they have been available to desktop publishing for years now. Until recently the web has been a few steps behind until recently, but now we will experience a new level of typographical freedom with full control over stylistic alternates, swashes and ornaments in order to turn typefaces into a very close approximation of type (custom designed unique combinations of letters, often used in logos).

A common best practice is that web design should happen from the content out. Tim Brown suggests that instead we could tackle design from type out and actually design our pages around typography. He discussed the use of the golden ratio in creating harmonious designs and using type to tell a story, enhancing the meaning of words.

Mark Boulton had a very interesting stance on the role of design within the arrow of time. He sees design as reversing the natural course of time, from order to disorder. As designers we are constantly irritated by the state we find things in and so try to formalise, organise and generally ‘tidy’ the world around us. This is a thankless task and unachievable. He feels that instead aiming for order, we should embrace disorder and design for the chaos. By optimising for the untidy world around us we can make things happen today and embrace the complexity of a world overlaid with time, culture and a billion voices all talking concurrently.

This newborn conference was a huge triumph. People left with a newfound feeling of optimism and even enlightenment for typography on the web. Meeting some of our users face to face was a privilege rarely afforded to a web service. We hope you enjoyed your free T-Shirts and other paraphernalia. There’s still time for you to get cracking on our gift box competition and win a box containing a $50 Fontdeck voucher amongst other limited edition items.

Of course, we weren’t able to cover every aspect of this amazing day within this post. If you didn’t manage to come to Ampersand this year, the podcast will be available shortly on the Ampersand website.

If you wanted another perspective on this event, Eye Magazine have written a great post on Ampersand Conference on their blog.

Ampersand(s)

Wed, 15 Jun 2011 19:56:00 +0100

As the premier sponsor for the Ampersand web typography conference, we are getting really excited. With two days to go until the event, we thought we’d take a look at this interesting character: & (the ampersand).

Although the ampersand is used as an ornate and sophisticated letter in company names, headlines and titles, its origins are much less refined.

The physical form of the ampersand is an abstraction of the letters et, the Latin for and. The earliest surviving ampersand was found in Pompeii meaning it was written no later than the 79AD eruption of Mount Vesuvius. It is believed this relic was found scrawled on a wall by a graffiti artist. Perhaps the character was created accidentally - it’s not inconceivable that its creator would have rushed these letters as he hurriedly vandalised the wall, accidentally joining the e to the t.

There is huge variation in the form of ampersands. Sometimes an ampersand bears a close resemblance to the letters et, whilst other times it may look more like a treble clef. Very often, the italic version of a font family holds a much more decorative ampersand than the regular one.

The name for this character – ‘ampersand’, is derived from the phrase and, per se and, which means & by itself means the word ‘and’. During the 1880s this phrase was routinely recited by school children, who gradually shortened it to the current day ampersand.

When writing headers, conventions in English tend towards using an ampersand instead of the word and. If you choose to follow that convention you would be wise to follow Robert Bringhurst’s advice in his Elements of Typographic Style — In heads and titles, use the best available ampersand.

With this in mind, we give you a shortlist of Fontdeck’s most distinctive ampersands. We’ve sorted them into three groups: Ampersands that bear a resemblance to the Latin et, those that resemble a treble clef and the weird & wonderful ones.

Et Ampersands

Treble Clef Ampersands

Weird & Wonderful Ampersands

The conference kicks off in two days, on the 17th June in Brighton. We look forward to seeing some of you at the Fontdeck stand where typography geeks are always welcome. If you spot any extra special ampersands, be sure to let us know.

For a far more detailed history of the ampersand, see Keith Houston’s fascinating Shady Characters.

Win a Gift Box!

Wed, 08 Jun 2011 11:27:00 +0100

Announcing the Winners

The competition has now ended, and we are very pleased to announce our winners! In no particular order, the winning entries were created by Jonathan Stephens, Jeremy Britten and Martin Freer.

You can see the winning entries on our competition winners page.

Each of these lucky contestants will receive one of our amazing gift boxes, each worth $80.

The Boxes

For the past several months we have been giving out gift boxes to people we admire, all over the world. There’s been a buzz of activity around these boxes, but like all good things, it has to come to and end. We have three boxes left, and we’re giving them away to the people who impress us the most.

The gift boxes contain:

A $50 voucher to spend on Fontdeck.com
A Fontdeck Ampersand T-Shirt
A metal letterpress Fontdeck keyring
An enamelled metal Fontdeck badge
Four letterpressed Fontdeck coasters
Three Fontdeck button badges
Some Fontdeck stickers
Some Typography mini-cards

How to Enter

The competition has now ended. Here’s the task that we set:

Choose two fonts from Fontdeck and work them up into a short typographical piece.
Use HTML and CSS to create a composition that can be seen in a browser.
Let us know what you’ve created. Be sure to give us a link to your work and a way to get in touch with you.
Get in touch by leaving a comment below or by tweeting to @fontdeck with the hash tag #fontdeckbox

If you’re looking for ideas, we’ve recreated the pages from the Fontdeck box. You can use one of these quotes, or come up with your own text, it’s up to you. Go crazy with styling and explore your creative side!

Let us know what you come up with in the comments below or by tweeting to @fontdeck with the hash tag #fontdeckbox. If we really like your design, one of the last three Fontdeck boxes will be coming your way!

Once again, congratulations to our winners, and thanks for all the entries. We really enjoyed looking through the designs you came up with.

Fontdeck Blog

In the Showcase: Gradient Press, Svilen Dimchevski, DaDaFest & Rough Work

In the Showcase: Smashing Magazine, Avios & Kensington Academy of English

Typejockeys are up and running!

Aniuk

Premiéra

Ingeborg

Take Typejockeys for a free test ride

Using OpenType font features with CSS 3: Part 1

Introducing font-feature-settings

Common OpenType Features

24 Fab Fonts as Featured in the Adfont Calendar

FS Albert Web

Enigma

Justus Pro

Claremont

Brokman

SIRI

Magneta

Kyrial Display Pro

Barber

Abril Text

Qargotesk 4F

Rubrik

Oblik Serif

Altis

Kirimomi Geometric Sans

Familiar Pro

Laramie Pro

Calluna Sans

Tarocco

Insider

Line44

Uni Sans

Faricy New Web

Din Text Pro

Xmas presents for type fans

Introducing Siri – a new sans-serif font from Sweden

Siri

Siri Core

Siri Core Schoolbook

Expert subsets

Fontdeck Adfont Calendar Returns

In the Showcase: Aston Martin, 4AD and The Plant

Our Thoughts on the Typekit Acquisition

In the Showcase: Brent Riddell, Penny Black and Hidden History Belfast

Introducing Abril Text & Display

Abril Text

Abril Display

In the Showcase: Park & Bond, Business Birmingham and Stuff.tv

Hyphenation arrives in Firefox and Safari

Why Hyphenation?

An Examples Paragraph with Long Words

LocalStorage in use on the Fontdeck Website

How to Use Chromatic Fonts on the Web

Improved Language Support on Fontdeck

Ampersand Conference

Ampersand(s)

Et Ampersands

Treble Clef Ampersands

Weird & Wonderful Ampersands

Win a Gift Box!

Announcing the Winners

The Boxes

How to Enter