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