Fontdeck Blog

Virtual Seminar on Typography in Responsive Web Design

Tue, 09 Apr 2013 09:04:34 +0100

Next week, on Thursday, 18 April 2013, Fontdeck’s Richard Rutter will be presenting a 90 minute virtual seminar on Typography in Responsive Design. Registration is only $129 and you’ll be able to attend from the comfort of your own desk, sofa, or wherever suits you.

You’ll learn to:

Use typography as a basis for responsive design
Set type for readability across multiple devices
Choose and combine web fonts
Improve web font performance
Use advanced CSS 3 features

Richard will describe how to make web typography work across any number of different devices, and how it can and should be the basis of any responsive web design.

He’ll tell you why good typography matters (you may be surprised) and how to perfect the typography in your own designs using OpenType and cutting-edge CSS features you can safely use right now.

Richard will take you through the how and why of choosing web fonts and pairing typefaces, and he’ll describe a range of options for optimizing the display of web fonts across different devices.

Whether you’re a front-end developer, graphic designer, or UX specialist, you’ll love to hear Richard translate cutting-edge research and tools into practical techniques you can start using today.

Throughout the seminar, you’ll be building up a fully-loaded example web page you can take away to learn from and experiment with afterwards.

To book your place, and for full details, go to the UIE seminar page.

In the Showcase: The Shard, Vans & Keane

Mon, 16 Jul 2012 10:31:47 +0100

Here’s another collection of stunning sites from the Fontdeck showcase.

The recently opened Shard is the tallest building in Europe. FS Albert Web is used for all headings, complimenting the overall modern look and feel of the website.

Vans is a U.S based manufacturer of extreme sport shoes. A heavy Nimbus Sans is used alongside the classic Franklin Gothic, a successful pairing that reflects their diverse target group.

Keane are an English alternative rock band from East Sussex. Their site uses the geometric Futura for all headers.

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!

Focus on the Northern Block

Fri, 29 Jun 2012 23:33:46 +0100

In the middle of a freezing Yorkshire winter in 2006, Jonathan Hill founded The Northern Block digital type foundry. The goal was - and has been ever since - to design & develop new and original typefaces, with a high technical value that work in the commercial market place.

Jonathan and The Northern Block’s reputation has grown ever since, along with his catalogue of distinctive and high usable typefaces. At the time of writing, there are 47 Northern Block font families available through Fontdeck - a phenomenal number for a foundry only 6 years old.

Neogram

Chief among Jonathan’s prolific output includes the hugely popular NeoGram superfamily with its 27 styles plus real italics and 3 different widths. Influenced by the Haas type foundry (of Helvetica fame), Neogram is deliberately neutral sans-serif with a slightly softened clarity of form.

Neogram in use by Ellis David

Brokman

Brokman was designed to be both new and relevant to today’s graphic and web designers. The process of designing Brokman was contemporary too, and entirely novel. Jonathan engaged fellow typographic professionals on forums such as Typophile to essentially provide a collective design brief and subsequent feedback on the designs.

The result is a geometric sans-serif in no fewer than 10 weights which maintains a smooth line consistency throughout the family. An applied optical balance between horizontal and vertical strokes keeps the geometric shapes feeling more natural.

Borda and Planer

Borda and Planer are particular favourites among Fontdeck users. Borda is a carefully drawn geometric typeface. Exacting angles are combined with smooth corner details to form a clean, legible font with a modern appearance. The compact nature of the letterforms allows for great use of space across text layouts.

Planer, on the other hand, is a modern rounded typeface combining humanist elements with a strong geometric grid. The result is a font that can produce striking visuals at large scale and clean line legibility at text size.

Tadao

At first glance, Tadao would seem to be essentially a display and headline face, although further inspection reveals it to work just as well in body copy. This is down to the precise, rounded forms and a clean and linear appearance. The compact nature of Tadao allows for great economy of space across layouts.

Tadao in use by Rik van der Velden

Regan & Regan Slab

Regan, seemingly named after John Thaw’s character in the Sweeney, is a finely crafted yet uncomplicated sans serif. Soft curves are mixed with minimal angles to create a readable font ideally suited for online use. The 10 weights with italics provide plenty of flexibility for display work and headlines, as well as running text.

The simple curves and sharp angles of Regan Slab match perfectly with Regan, and the two can be interchanged at will.

We’re really looking forward to seeing more Northern Block fonts arrive at Fontdeck - knowing Jonathan, we won’t have to wait long!

Fontdeck Cookies and EU Law

Tue, 29 May 2012 15:28:00 +0100

In line with recent changes in European legislation (Directive on Privacy and Electronic Communications, Directive 2009/136, laws in EU countries now require website operators to ask for a website user’s permission when placing certain kinds of cookie on their devices for the first time.

When you use Fontdeck webfonts on your website, cookies are set by f.fontdeck.com. We believe these cookies fall into the category of fonts which do not need explicit permission, although if you have Terms of Use for your website, you may wish to mention that Fontdeck sets cookies. This explanation of what Fontdeck webfont cookies do may help:

Fontdeck sets a single session cookie for each font requested. Each cookie contains (nothing but) a random string used solely as part of our caching and font security measures. The cookies are removed as soon the browser is closed (or the session otherwise ends). They contain no personal information and are not used for gathering analytics or tracking at a personal or aggregate level. Their sole purpose is to check whether we should serve the webfont from cache or not.

Further information and clarification on the EU directive, and the subsequent UK law can be gained from the ICC UK Cookie Guide. Importantly this guide has the blessing of the Information Commissioner’s Office (ICO), the UK’s data privacy regulator responsible for policing the EU legislation.

In the ICC UK guide, cookies are divided into four purposes:

1. Strictly Necessary: Generally these cookies will be essential first-party session cookies. They include (but are not limited to) remembering previous actions (e.g. entered text), shopping basket functionality, and maintaining tokens for secure areas. These cookies will not be used to gather information that could be used for marketing, or to remember customer preferences or user identification outside a single session. Cookies in this category do not need consent.
2. Performance: These cookies can be first or third party, session or persistent cookies. Their usage should be limited to performance and website improvement, including website analytics, ad response rates, affiliate tracking and A/B testing. Consent for cookies in this category could be obtained in the terms and conditions of the site.
3. Functionality: These cookies can be first party, third party, session or persistent cookies. These cookies will typically be the result of a user action, such as setting layout or font size preferences, remembering a choice or fulfilling a request by the user such as submitting a comment. Consent for cookies in this category could be obtained in the terms and conditions of the site, or in an interface note adjacent to the functionality.
4. Targeting or Advertising: These cookies will usually be third-party cookies. Uses include cookies placed by advertising networks to collect browsing habits or cookies placed in conjunction with a service implemented by the website to increase functionality, such as commenting on a blog or adding a site to the user’s social network. Cookies in this category require users to be given a clear, informed choice.

We believe the cookies set by Fontdeck’s web fonts fall into the first, ‘Strictly Neccessary’ category as they are required for the fonts to be delivered, are session-based and contain no preference or user identification.

It should be said that the opinions given in this blog post refer to the UK’s interpretation of the EU directive and are not a statement of the law, and do not constitute legal advice.

Introducing a Body Text Tester

Wed, 23 May 2012 10:17:01 +0100

Inspired by Jason Santa Maria’s terrific talk at last year’s Ampersand web typography conference*, our own Richard Rutter created a simple body text tester.

In his presentation, Jason talked about the art and science of choosing a typeface for body text. Part of his methodology is to create a specimen containing an array of candidate fonts. The body text tester Richard created automates that process by dynamically creating a page based on any Fontdeck website.

Here’s a couple of examples featuring some of our favourite fonts:

Serif body text tester

Sans-serif body text tester

How To Use It

It’s simple: set up a new website on Fontdeck, download a file, edit one line of code, and upload it to your server. Here are the details:

Firstly go to your Fontdeck account and click Add website to set up a new website project. Remember you can set up as many website projects as you like for free, and while you are testing you can add as many fonts as you like without charge.

Next browse the font families and add any promising fonts to your new website - you might like to start by trying some of our manually hinted fonts.

Finally download and unzip the body text tester (it’s just a single HTML page). Open the file in an editor and change line 6:

<script src="http://f.fontdeck.com/s/css/js/MYDOMAIN/NNNNN.js"></script>

Replace MYDOMAIN with the domain you are testing on, making sure to add it to your Fontdeck website settings as normal. Replace NNNNN with your Project ID, which can be found at the top of your Fontdeck website settings page.

Copy the file to your web server and view it in the browser. Feel free to change the default styles. In particular play around with text size, line-height, specimen width and colours. You can also change the specimen text and markup by editing line 59.

We should probably say that Richard knocked together the body text tester for his own purposes so the code is not pretty. However it’s just for testing and it gets the job done, so we’re happy to give it away as it is.

We’d love to hear how you get on with the text tester - do leave us some screenshots and URLs in the comments.

* Fontdeck is pleased to be sponsoring Ampersand again this year - at the time of writing there are still a handful of tickets left.

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

Tue, 24 Apr 2012 17:16:00 +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:

Fontdeck Blog

Virtual Seminar on Typography in Responsive Web Design

In the Showcase: The Shard, Vans & Keane

Focus on the Northern Block

Neogram

Brokman

Borda and Planer

Tadao

Regan & Regan Slab

Fontdeck Cookies and EU Law

Introducing a Body Text Tester

How To Use It

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