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

 

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!

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