Friday find: FontShop Education

Joan and Erik Spiekermann’s foundry Fontshop has a very nice collection of typographic education resources available to download for free.

Joan and Erik Spiekermann’s foundry Fontshop has a very nice collection of typographic education resources available to download for free.

FontShop Education

There are currently 12 units listed, and you can even download them all in a single bundle:

  • Meet Your Type
  • The Typographer’s Glossary
  • Erik Spiekermann’s Typo Tips
  • Type Anatomy
  • The Right Font for the Job
  • Figuring It Out
  • What Is OpenType?
  • Styles, Weights, and Widths
  • Helvetica
  • Webfonts
  • Licensing 101

Go to: FontShop Education.

Snooping web fonts made easy

Sure, you can find out all you need to know about fonts on a web page by inspecting the code with Firebug or the likes, but the WhatFont bookmarklet makes font snooping super easy.

WhatFont is a clever little script by Chengyin Liu, a Computer Science student at University of Illinois. You add the bookmarklet to your web browser and once activated it tells you what fonts are used on a web page by hovering over the text in question.

WhatFont bookmarklet

But wait, there’s more!

WhatFont bookmarklet

When you click, a little window opens up with information about the font stack, size, line-height, colour and even the web font service provider. Sure, you can find out all you need to know about fonts on a web page by inspecting the code with Firebug or the likes, but the WhatFont bookmarklet makes font snooping super easy. And hey, if you want to tweet about the font discoveries you make, there’s a button for that too…

Good Google web fonts

Having trouble finding the best Google web fonts for your next website design? Chad Mazzola wants to help you out…

Google web fonts is a great initiative providing a simple and free way of adding real fonts to your web design projects. I have been using their service for a while and the only complaint I have is that finding the right font among the 400+ typefaces can be challenging. Apparently Chad Mazzola of Cambridge, Massachusetts (not England) has encountered the same problem, so he has kindly taken it upon himself to help us out.

There are currently over 400 typefaces in the Google web fonts directory. Many of them are awful. But there are also high-quality typefaces that deserve a closer look.

Beautiful web type is a growing showcase of the Google web fonts Chad finds most deserving. You can click each specimen to find the font in Google’s directory.

Google web fonts

Google web fonts

Google web fonts

Web Typography for the Lonely

Web Typography for the Lonely is an ongoing collection of experiments and writings on, you guessed it, web type. Each entry features a demo and write-up explaining how the result was achieved.

Do you find your relationship with typography more fulfilling than any other? Do you remember complex lines  of Javascript off by heart but forget your best friend’s birthday? Do you feel that CSS3 just may be your soul mate?

If you answered yes to any of these questions the chances are you may end up lonely… but don’t despair, there’s a website for you: WebTypographyfortheLonely.com

Web Typography for the Lonely is an ongoing collection of experiments and writings on web typography and the possibilities of standards-based web design. It aims to inspire the web community by pushing the boundaries of what is both possible and practical in web standards in a manner that is compelling and exciting to the visually-minded creative.

Web Typography for the Lonely

Created and maintained by Baltimore based designer Chris Clark, each entry features a demo and write-up explaining how the result was achieved. Check it out!

Free fonts from Fontfabric

Fontfabric has some really nice fonts on offer and many of them are available free of charge! Here are a few you might be interested in adding to your collection…

Independent Bulgarian type foundry Fontfabric has some really nice fonts on offer and many of them are available free of charge! Here are a few you might be interested in adding to your collection:

Fontfabric

Fontfabric

Fontfabric

Fontfabric

Fontfabric

Fontfabric

Fontfabric

Fontfabric

Fontfabric

An unusual font from Bulgaria

Lemniscate is an intriguing font designed by Rositsa Gorolova of Sofia, Bulgaria. It is available as a free download.

Lemniscate is an intriguing font designed by Rositsa Gorolova of Sofia, Bulgaria. The complexity of the characters and the fact that the font includes only capitals, numerals and a few punctuation marks certainly limits its use to display purposes such as posters or headlines. I would love to know more about the design process and the intent of the project, but unfortunately I found very little info on this.

You can download Lemniscate for free in TrueType format for personal and commercial use.

Lemniscate font by Rositsa Gorolova

Lemniscate font by Rositsa Gorolova

Lemniscate font by Rositsa Gorolova

Lemniscate font by Rositsa Gorolova

Lemniscate font by Rositsa Gorolova

Lemniscate font by Rositsa Gorolova

The curious case of the missing canvas: How typographic scale will save design

For the last few days I have really been trying to wrap my brain around the concepts of scale and ratio in design and specifically typography. The intention of this post is to continue the conversation on these topics…

For the last few days I have really been trying to wrap my brain around the concepts of scale and ratio in design and specifically typography. I am pleased to say that a few things have really snapped into place for me. Much has been written about these topics, so the intention of this post is simply to continue the conversation and document a few ideas that I find most helpful or interesting.

Constraints

To set the scene I would like to quote Charles Eames:

Here is one of the few effective keys to the design problem: the ability of the designer to recognize as many of the constraints as possible (and) his willingness and enthusiasm for working within these constraints

Yes, surprising as it may sound at first, constraints are the designer’s best friend. Real problem solving can only begin once you are familiar with the boundaries set by a particular project. Most often I find that designer’s block occurs when you don’t know the scope of your canvas, or worse yet, when there is no canvas. A good example – and the one that got me thinking about scale in the first place – is the concept of responsive web design.

For a long time web designers conveniently ignored the impending realisation that we can’t keep producing sites with fixed dimensions as though they are intended for a fixed medium. As of 2011 we can no longer get away with this way of thinking. Contemporary websites are expected to adapt appropriately to an indeterminate amount of display sizes: mobile, tablet, notebook, desktop, widescreen, etc.

So then, if we are effectively removing our beloved canvas as a design guideline, what constraints are we left with?

Enter the typographic scale

Desperate times call for desperate measures, so we turn to the one thing that we have left: type. This is rather ironic since type has been used to set scale for compositions since the dawn of the printing press centuries ago. We are simply rediscovering a few guidelines we should never have forgotten:

1. The Golden Ratio

Just to refresh your memory, the golden ratio states that “a + b is to a as a is to b”. Most often this relationship is expressed as a rectangle where the long side is roughly 1.618x longer than the short side. In other words, if you remove a square from the rectangle, the resulting rectangle has the same ratio as the original one. This can be repeated infinitely. The awesome part is that this amazing math was not the product of modern technology or ancient philosophy – the golden ratio is exhibited in the very fabric of nature. What better number to use as a basis for meaningful typography than one endorsed by God!

2. Rule of thirds

A common rule of thumb for any visual composition, if you divide your canvas into three equal parts horizontally and vertically, the intersection of these dividers indicate visual key areas. In his 2009 article on the topic Jason Santa Maria argues that the usefulness of traditional ratios are questionable design for flexible media since we have no control over the context in which the viewer will experience our design. He has a point, but all hope is not lost, read on…

3. Point sizes

In typography a point is the smallest unit of measure. The standardisation of the point dates back to 1737 when it was proposed by French printer and typefounder Pierre Simon Fournier. In Fournier’s day France used the measurement toise which was equal to six feet. A foot was twelve inches, an inch twelve lines and a line was equal to twelve metric points. Fournier decided that two metric points would equal one typographic point, but by the 1760s there was already a deviation in the size of a point, so it became completely arbitrary. Today the size of a point is defined as exactly 72 points to an inch.

4. Typographic scales

Many people believe that the traditional scale of set point sizes for fonts (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72) holds some special significance. That is not really true. Although this ancient scale has been thoroughly tried and trusted since the 1500s, we no longer have the limitation of metal-cast fonts, so feel free to modify this scale or invent your own! It can be agreed though that using a scale – one consisting of distinct and related intervals – adds harmony and balance to typography. I have to credit Alex Charchar’s 2008 article for initially getting me interested in the concept.

5. Modular scales

So if we’re going to be exploring scale beyond the limitations of fixed media, where do we start? Web type aficionado and Type Manager for Typekit Tim Brown recommends combining what we know about typographic scales and meaningful ratios into what he calls modular scales. In his talk at Build 2010, Tim suggests a very sensible starting point and one which I will explain at the end of this post: the optimal size of your body copy. There is no mathematical equation to determine this size, it will vary from one typeface to another and across different media. Once you have determined this chosen size, multiply or divide it by a constant to create your scale. Traditional ratios (like the golden ratio and the rule of thirds) offer fertile ground to start from. Tim discusses his method in more depth on A List Apart.

6. Relative font sizes

Using pixels as a measure for web typography was never a good idea in the first place. If you think about it, the pixel imposes a constraint which actually has nothing to do with type: the smallest discernible unit on a display device. Once we start thinking in scales and ratios, the pixel becomes almost inconsequent. Percentages and even ems or ens make more sense as a typographic unit. The size of any piece of type should be relative. But relative to what? That’s easy: once again, relative to the size at which your body copy is most legible. Jon Tan wrote an article in 2007 entitled The Incredible Em & Elastic Layouts with CSS which really helped me understand the concept. (Of course pixels are still useful as a unit to refer to the size at which text ends up displaying on a particular screen!)

7. Fractional numbers

I have been reading Ethan Marcotte’s excellent book on Responsive Web Design. Both he and Tim Brown (mentioned above) agree that it is completely acceptable, and probably even advisable to break free from the comfort of easily divisible numbers. Once we start working with scale instead of fixed sizes, fractions are bound to pop up. Don’t fear the fraction! As Ethan says “(a fraction) perfectly represents our desired font size in proportional terms. What’s more, browsers are perfectly adept at rounding off those excess decimal places…” Tim Brown has a calculator to help you determine these numbers to build your typographic scale.

How can we apply this knowledge to create significant design?

A quote from Robert Fleege:

Embrace restrictions. Some of the best ideas & solutions come from constraints. If there aren’t any, go ahead create some of your own.

In closing I would like to address a question that I had to ask myself:

Are we just grasping at straws by using arbitrary scales and ratios?

The answer is no. Why do pants have two legs? Because humans do. Why do umbrellas have a certain size and shape? To keep humans dry. Why are wine bottles all of a similar size, shape an weight? For humans to pour from them easily.

In other words, we are designing for human interaction.

What is the font size that the human eye can read your body text at most comfortably? Determine the answer to that question and you have a very rational foundation to build upon. When faced with a missing canvas, we can use scale and ratio to determine all other measures for our design to be based on.

This guideline cuts across web, print and any other media. Once we realise that we are designing for humans – not calculators – the typographic scale starts looking a lot more friendly and constraints become way more meaningful than just the edges of a blank canvas.

I would love to hear your thoughts on the relevance of typographic scale, so please post a comment here or on twitter.

– Imar

Pay what you want for fonts from Lost Type Co-op

Lost Type Co-op is a font foundry with a unique philosophy: they distribute beautiful and unique typefaces, and you decide how much you want to pay!

Lost Type Co-op is a font foundry with a unique philosophy: they distribute beautiful and unique typefaces, and you decide how much you want to pay! The designer of the particular font you choose to download gets the full amount of your donation. Creators Riley Cran of Seattle and Tyler Galpin of Toronto reckon this pay-what-you-want type foundry is the first of its kind.

Ever since we released Muncie in February, we received an overwhelming response from the community at large. We felt it was important for everyone to have access to unique and beautiful typefaces, based on a very approachable model.

Definitely worth a bookmark! Here are a few samples from the Lost Type Co-op collection:

Lost Type Co-op

Lost Type Co-op

Lost Type Co-op

Lost Type Co-op

Lost Type Co-op

Lost Type Co-op

Lost Type Co-op

Lost Type Co-op

Lost Type Co-op

Apart from the nice specimens of each face, Lost Type also has a recently revamped blog where they showcase the fonts being used in real-world projects.

The three-letter kerning technique

Ilene Strizver explains how kerning your display type three letters at a time can help beginners get a feel for this essential typographic skill.

Ilene Strizver of The Type Studio explains via TypeTalk how kerning your display type three letters at a time can help beginners get a feel for this essential typographic skill:

Three-letter kerning

Three-letter kerning

In another TypeTalk article Ilene explains the origins of kerning – in the days of metal typesetting, the shank of a character had to be cut away, allowing letters to overlap for a better fit:

The kerning of metal type

The kerning of metal type

Found via: Typeverything

 

Wish list: Explorations in Typography / Mastering the Art of Fine Typesetting

This beautiful typographic reference book with its yellow gilded edges looks like an absolute must-have.

This beautiful typographic reference book with its yellow gilded edges looks like an absolute must-have.

With Explorations in Typography Carolina de Bartolo guides the reader through 24 chapters each exploring different typesetting techniques. Read Patrick Barber’s review for a more thorough account of what to expect from the book.

Explorations in Typography by Carolina de Bartolo

Explorations in Typography by Carolina de Bartolo

Explorations in Typography by Carolina de Bartolo

Explorations in Typography by Carolina de Bartolo

Carolina took two years to complete the book, but what makes it all the more impressive is that this San Francisco based lecturer went the DIY route and published it herself. After finding that the idea was a hard sell for traditional publishers, she had to figure things out as she went along and eventually founded her own publishing company.

Explorations in Typography’s website is certainly worth a visit too. Using a range of web fonts from Typekit, the home page offers an interactive experience in exploring typesetting techniques, each with annotations explaining the merits of the resulting layout.

Font treasures from out of the dark

Let’s face it, there is no shortage of fonts in the world, in fact there is an oversupply! To help you find hidden gems, Zürich based designer Philipp Herrmann has started a collection…

Let’s face it, there is no shortage of fonts in the world, in fact there is an oversupply! Every time you have to choose a font for a new project, it ends up being a losing battle against your font library groaning under the mass you have collected over the years. I have heard many a seasoned designer advise to stick to the handful of tried and trusted classics (and that certainly is a safe route to follow), but safety often inhibits innovation.

The fact is that many of the free fonts so readily available online lack in quality, and the professional foundries tend to charge an arm and a leg. To help you find hidden gems, Zürich based designer Philipp Herrmann has started a collection titled Out of the Dark (fontseek.info).

In his own words:

Great type design remains hidden in the jungle if it isn’t promoted by a type foundry. Fontseek features these hidden treasures.

Below are a few samples, my favourite has to be Hammer Bold! Visit fontseek.info where each specimen links to the particular designer’s site for information on how to acquire the font.

Specimen from fontseek.info

Specimen from fontseek.info

Specimen from fontseek.info

Specimen from fontseek.info

Specimen from fontseek.info

Specimen from fontseek.info

Specimen from fontseek.info

Specimen from fontseek.info

Specimen from fontseek.info

Specimen from fontseek.info

Via: Taxi

Using a baseline grid

There hase been a notable resurgence of the International Typographic Style (aka Swiss Style) in graphic design lately and along with this trend, grids are big right now. Baseline grids in particular have been enjoying a lot of fresh attention, so this post is simply to consolidate some of the learning and resources I have come across.

First things first, what is the baseline?

Diagram explaining typographic baseline

Baseline refers to the line upon which most letters “sit” and below which descenders extend. It is important to note that glyphs with rounded lower extents usually dip very slightly below the baseline to create the optical illusion that they sit on the baseline.

Leading is the distance between baselines. The term originated in the era of manual typesetting, when thin strips of lead were used to space lines of type. The term is still used in print layout software like Adobe InDesign. In CSS the “line-height” property controls the leading.

Right, moving along…

Much has been written about the merits of using a grid in design. The first exposure I had to the principle was probably Khoi Vinh’s 2004 article on his Subtraction.com redesign. Column grids are pretty simple; divide your page into an equal amount of columns, decide on a gutter width (if any) and align the elements on your page to these columns.

Baseline grids are another story altogether. I have been experimenting with baseline grids in my own web and print design work for over a year now and they are a lot more tricky. The idea of a baseline grid is that the bottom of every line of text (the baseline) corresponds with a vertical baseline grid, set in even increments. CSS makes it difficult to apply all elements to a baseline grid since properties like margin, border, padding and line-height can disturb your vertical layout.

There are several good reasons for using a baseline grid, but the two that I find most logical are, vertical rythm and the baseline being a compositional aid – baseline grids add a sense of visual balance to your design and help you decide where to position elements. Leaving the positioning of elements to chance is something of the past for me! Of course grids should be treated only as guidelines in design and not as restrictive rules.

Ok, enough theory, on to the resources

Now go forth and experiment with baseline grids. If you have any tips and tricks of your own, please drop a comment below!

The future of screen fonts

Last month Dutch type foundry Typotheque released what they call “a parametric bitmap font system” called Elementar. Is this the future of screen fonts?

Last month Dutch type foundry Typotheque released what they call “a parametric bitmap font system” called Elementar. Designed by Gustavo Ferreira, the development of this project started back in 2002. The intention of Elementar is to address the issue of contemporary fonts rendering poorly on screen, especially at smaller sizes.

You see, the whole process of conventional font design is not geared towards optimal display on electronic screens. Fonts consist of curves forming the outlines of each individual glyph.

Font design outlines

The result from high resolution output devices like printers is smooth and crisp, but fonts do not translate well to the rasterised grid display of computer screens – they end up looking blurry, jagged and illegible. A process known as font hinting can be applied to align the outlines with the pixel grid for better display. The problem with hinting is that it is a time consuming and labour intensive job which does not make it financially viable for many type foundries. This has lead to lots of unhinted, poorly legible fonts found on the internet today. You can read more about this issue on Typographica.

Rather than adapting an outline font for electronic display, Elementar is produced within the parameters of the screen display grid. The resulting fonts are non-scaleable and size-specific, which makes it quite inflexible, but this issue is addressed by producing “thousands” of possible sizes, widths and weights. You can explore these combinations online or with a free iPad app, also released by Typotheque.

Elementar font system

I agree that screen type is in dire need of a better solution, but is Elementar it? To be honest it looks pretty damn old school. And with the advent of Apple’s Retina Display and the likes, do we even need to worry about the distinction between print and screen anymore? Maybe Elementar is nine years too late. What are your thoughts?

Better web typography with Javascript

Lettering.js is an innovative jQuery plugin that allows designers to take tweaking of web type to the next level. Combine Lettering.js with the Kern.js bookmarklet and some really interesting things become possible…

Lettering.js is an innovative jQuery plugin that allows designers to take tweaking of web type to the next level. Combine Lettering.js with the Kern.js bookmarklet and some really interesting things become possible!

Here are two articles from Typekit, complete with examples to show you how it’s done:

Create vintage type with Adobe Illustrator

Method and Craft is a great new resource for designers. These two posts highlight two different techniques for applying a vintage look to your type in Adobe Illustrator.

Method and Craft is a great new resource for designers. These two posts highlight two different techniques for applying a vintage look to your type in Adobe Illustrator:

Vintage Effects Within Illustrator (video)

Old is the New New