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.
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!
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!
Tagged: Foundries, Northern Block, Regan, Regan Slab, Tadao, Brokman, NeoGram, Planer, Borda, .
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.
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.
Tagged: tools, .
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!
Tagged: showcase, Din Display, bliss, Bliss Cyrillic, FS Me, Monosten, .
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: Foundries, New Fonts, Typejockeys, Premiera, Aniuk, Ingeborg, .
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, .
