Skip to content

Wayne State University

Aim Higher

Apr 17 / Michelle Windhorst

Project 6

Part B.1 Part B.2 Part B.3 Part B.4 Part B.5 Part B.6 Part B.7 Part B.8 Part B.9 Part B.10 Part B.11 Part B.12 Part B.13 Part B Part C.1 Part C.2 Part C.3 Part C.4 Part C

Apr 15 / Michelle Windhorst

Typographic Resourses

On Choosing Type

FIRST PRINCIPLES

Typography is not a science. Typography is an art. There are those who’d like to ‘scientificize’; those who believe that a large enough sample of data will somehow elicit good typography. However, this sausage-machine mentality will only ever produce sausages. That typography and choosing type is not a science trammeled by axioms and rules is a cause to rejoice.

Before we get to the nitty-gritty of choosing type, let’s briefly talk about responsibility. Fundamentally, the responsibility we bear is two-fold: first we owe it to the reader not to hinder their reading pleasure, but to aid it; second, we owe a responsibility to the typeface or typefaces we employ. Good typefaces are designed for a good purpose, but not even the very best types are suited to every situation. Personally, I’m always a little nervous about using a newly acquired typeface. A new typeface is something like a newborn baby (though it doesn’t throw-up on you): don’t drop it, squeeze it too hard, hold it upside-down; in other words, don’t abuse it, treat it respectfully, carefully.

If you’ve understood the above two paragraphs, then you’ll know that what follows is not a set of rules, but rather a list of guiding principles.

 

Sans or Serif?

In my opinion, a lot of time is wasted attempting to prove that one is better than the other for setting extended text. I suggest that you ignore the vague and inconclusive findings of such ramblings and decide for yourself. Oh, but seriffed types are better for extended text because the serifs lead your eye along… Stop! Nonsense.

Rather than write another ten paragraphs on this topic, I’ll simply say that we read most easily that which we are most familiar with. (feel free to disagree in the comments below). And if you’re in any doubt as to whether sans serif typefaces can be used for body text, then turn left at the end of aisle three and make your way over to the Swiss Typography department.

Guideline One: honour content

This, of course, should be every typographer’s mantra. In fact good typographers, most likely won’t even have to consciously think about this—it’s instinctual.

[typography] is a craft by which the meanings of text (or its absence of meaning) can be clarified, honored and shared….
—Robert Bringhurst

It’s worth mentioning here that these principles are equally applicable to any medium. Some of my favourite typefaces look dreadful on screen; and even good typefaces like Georgia or Verdana, designed especially for the screen, often look at best mediocre on paper. Choosing type for the web is easier owing to fewer choices; however, that’s beginning to change. We now have sIFR and ‘web fonts’, so it’s all the more important to think carefully about the type we use. Is Times/Times New Roman—narrow set and designed for narrow columns—really appropriate for long-line extended text on screen?

Guideline Two: read it

And, no, I’m not being facetious. If you’re setting text, whether it be for a novel about the Franco-Prussian war or for a single-word headline, read it—really read it. Reading the text will give up vital clues, not only for choosing the right typeface or typefaces, but will also be an aid in the overall design of the page. An example: you’re setting text for an essay on the history of blackletter; so you set the text in blackletter, right?

blackletter

Probably not. There is a place for considering the historical context; however, it would be wrong to stick rigidly to this method of choosing type. If you’re setting a text on Neanderthal man, you’re going to run into problems. (seeThe Elements of Typographic Style, chapter 6.3, for excellent coverage of this particular topic). On the other hand, if your only audience is the BAF (Blackletter Addicts Foundation), then perhaps blackletter is appropriate.

In addition to reading the text, one should attempt to understand it. This is not always possible. If you’re setting text for an article on String Theory or Quantum Mechanics, then perhaps full comprehension is out of the question. However, attempt to understand the thrust or theme of the text.

Guideline Three: audience and canvas

Who will read your beautifully set text? Scientists, lawyers, engineers, echo boomers, children? If it’s not obvious from the text, then find out. Historical ligatures may not go down too well with pre-school kids.

Consider too the canvas, the page. Perhaps you’re setting text within someone else’s page design and you have no control over margins or page dimensions. A cramped page, with small margins may benefit from a lighter type, whereas ample margins may well merit a blacker typeface. We’ll look at this in much more detail in a future article.

Guideline Four: does it look right?

If your text’s final destination is paper, then print it and see. Your type might look exquisite on screen, but a train wreck on paper. There really is no substitute for printing. If setting for the screen, then check it on both PC and Mac, and at different resolutions (screen sizes).

And finally…

Remind yourself that typography really is an art and that many of the decisions you make, including type choice, are subjective. If you’re unsure, ask others (designers and non-designers) to read your work. And seek out examples of great typography.

In future articles we’ll look at specific case studies, and examples of serif and sans serif typefaces that work well together, together with a list of my favourite typefaces. Perhaps you have your own methods for choosing type. If you do, then be sure to share them in the comments.

 

 

A guide to Web typography

THE BASICS

Typography for the Web has come a long way since Tim Berners-Lee flipped the switch in 1991. Back in the days of IE 1.0, good web typography was something of an oxymoron. Today things are different. Not only do we have browsers that support images (gasp!), but we have the opportunity to make our web pages come to life through great typography.

First, it’s worth noting that Typography is not just about choosing a font, or even distinguishing one typeface from another. In recent experiments, trained monkeys were able to correctly identify Helvetica 90% of the time.

helvetica monkey

Today we’re going to talk about web typography in terms of a recipe of four fundamental ingredients. If you’ve ever tried to cook a soufflé, you’ll know how important the recipe is. Follow this recipe and your typography will rise up like … that’s enough of the culinary metaphors, let’s cook:

Contrast

Pale pink text on a pale blue background, might match your t-shirt, but it just doesn’t read well. Text exists to be read; make sure that it contrasts enough with the background to achieve that. If you’re ever unsure about contrast, then take a screen dump of your page, open up your image editing software and reduce the image to grey-scale. You’ll soon see if you have enough contrast. Robert Bringhurst, the consummate typographer writes, typography exists to honor content. Are we honouring the content, if we design our pages in such a way that the text, the content, is difficult to read?

Contrast

Personally I dislike reading long stretches of reversed out text (i.e. light text on a dark background); how often do we see books set like this? It may well be appropriate for shorter stretches of text on-screen, but I find it very tiring to read for any length of time.

Size

With the birth of Web 2.0 I noticed a rather annoying trend; namely small type. I’ve even emailed site authors and kindly suggested that they increase the default font size. I’ve received mixed replies from, tough, get yourself some glasses to thanks, I’d never even considered that my type might be too small for the average reader. I’ve even heard tiny body text defended with, “it matches my minimalist design”, or similar. It most likely reflects a small something else. Unless Super Man and 20/20 Vision Girl (Marvel Comics, keep your hands off, she’s mine) are your only readers, then small type is just not on.

is your type big enough?

Don’t set body text below 10 or 12px and, if possible, make it bigger. Remember, what’s legible on your 65 inch High Definition Plasma monitor, might not be so on a 15 inch MacBook. If in doubt, make it bigger. The body text on ILT is set at 16px.

Hierarchy

Varying type size is one of  the best ways to differentiate content. Colours and pretty boxes might help, but different sizes of type, used consistently throughout your pages, will signal loud and clear to your readers the relative importance of your pages’ elements. It also means that if your readers are in a hurry, they can quickly pick out the important bits — and that could mean that they stay longer and read on.

hierarchy can be achieved in many ways — just remember to be consistent

Hierarchy can be achieved in other ways too. We’ve just mentioned using different sizes of type to achieve it, but we can also use different styles; for example, all-caps, or using italic for sub-headings. Serif and sans serif faces can also be mixed to good effect.

Space

Let your type breathe. Don’t be afraid to leave blank spaces in your pages. This negative or white space will help focus attention on the text—and it’s the text that speaks loudest, so let it be heard. Next, remember the line-height CSS property; a good rule of thumb is line-spacing that’s at least 140% of your text size (remember, I’m writing about web typography here). Good type designers put a whole lot of effort into the micro white space that sits inside type. They spend countless hours attempting to achieve a balance between the black of the type and negative or white space that it envelops. Likewise, we should take time to consider the macro white space, the ‘voids’ that shape our blocks of text.

space, not to be confused with nothingness :)

Remember, these are not rules, but rather guidelines. However, follow them—contrastsizehierarchy, and space—and your typography will rise like one of Gordon Ramsay’s Soufflés. Oh, and I was only kidding about the monkeys.

In a future three-part series on the fundamentals of typography, I’ll look at all of the above in more detail. I’ll also be discussing numerous things (details) that will go a long way to improving your typography both on- and off-screen.

Apr 15 / Michelle Windhorst

Typographers

Alex Trochut

alex trochut 50 Inspiring Typographic Artists ... and me

Alex is a widely respected typographer, illustrator and designer from Spain with a very impressive list of clients. His work is diverse and imaginative and well worth a look.

 

Bianca Chang

bianca chang 50 Inspiring Typographic Artists ... and me

Bianca currently works at Mark Gowing Design in Sydney and does lovely 3D layered paper cuts for exhibition.

 

Craig Ward

craig ward 50 Inspiring Typographic Artists ... and me

Craig is most well-known for his “Bad typography is everywhere” poster, but I love this roots piece. It’s amazing.

 

Evelin Kasikov

evelin kasikov 50 Inspiring Typographic Artists ... and me

Evelin works in cross stitch, CMYK cross stitch to be precise. Her work emulates the four colour printing process using thread on paper and I absolutely love it.

 

Jonathan Zawanda

jonathan zawada 50 Inspiring Typographic Artists ... and me

Jonathan is an Australian artist and designer with a diverse range of styles and techniques. His site is divided into commercial and exhibition work. Yet another designer to straddle the fine line between designer/artist.

 

Luca Barcellona

luca barcellona 50 Inspiring Typographic Artists ... and me

Luca does fantastic live calligraphy performances. I would love to see one.

 

Marcelo Schultz

marcelo schultz 50 Inspiring Typographic Artists ... and me

Marcelo’s digital 3D typography is so full of energy and life and always feels like it’s bursting out of the page.

 

Me and My Pen

meandmypen 50 Inspiring Typographic Artists ... and me

Me and my pen is Darren Newman, typographer and illustrator who works in a very linear style.

 

Niels Shoe Meulman

niels shoe meulman 50 Inspiring Typographic Artists ... and me

A video of Niels was doing the rounds recently of him doing calligraphy on the ground with a wet broom. One of my students listed him in all five of their top 5 slots and said he would give his face to be this talented. Says it all really.

 

Oded Ezer

oded ezer 50 Inspiring Typographic Artists ... and me

Judging by his work, Oded is one wacky guy. His projects are highly creative and imaginative.

 

Peter Tarka

peter tarka 50 Inspiring Typographic Artists ... and me

Polish designer Peter Tarka has a wide variety of 3D design work, packed with energy and edge.

 

RIPO

ripo 50 Inspiring Typographic Artists ... and me

RIPO is a graffiti artist who works in a wide variety of styles and sizes.

 

Sean Freeman

sean freeman 50 Inspiring Typographic Artists ... and me

Sean Freeman is a highly creative commercial designer from the UK who always surprises with his type treatments. His studio is called THERE IS.

 

Sepra4Life

sepra4life 50 Inspiring Typographic Artists ... and me

Sepra4Life is Marko Purac, a Serbian cartoonist and typographer who has a structured, retro cartoon style.

 

Si Scott

si scott 50 Inspiring Typographic Artists ... and me

Si Scott is an illustrator and typographer with a very distinctive and specific linear style.

 

Simon Ålander

simon alander 50 Inspiring Typographic Artists ... and me

Simon is a Swedish designer obsessed with two things: type and coffee. He has a very distinctive style and is fantastic at hand lettering.

 

YLLV

yllv 50 Inspiring Typographic Artists ... and me

YLLV is Karol Gadzala, a Polish typographer and illustrator.

 

Alex Trochut

Alex’s experimental style has gained him critical acclaim from across the board

Alex Trochut is a typographer and graphic designer based in Barcelona. He has been working as a freelancer since 2007 and has gained clients such as Pepsi, Wallpaper* and Audi.

His experimental style has gained him critical acclaim from across the board and with a philosophy of ‘more is more,’ his array of work is a perfect example of embracing the endless spectrum of font formats.

 

Tomasz Biernat

typographers on behance
Tomasz Biernat specialises in old school typography

Tomasz Biernat specialises in old school lettering – often recreating those custom typefaces that hark back to chalk boards and elaborate calligraphy. His typography has been seen on prints, posters and t-shirts as well as bigger installations.

 

 

Apr 15 / Michelle Windhorst

Typographic Inspiration

 

 

 

 

 

 

 

 

Apr 10 / Michelle Windhorst

Project 1

Project 1 – Scavenger Hunt

Apr 8 / Michelle Windhorst

Project 2

letters pg 2.2  letters pg 3  letters pg 4  letters pg 5  letters pg 7  letters pg 8  letters pg 9  letters pg 10  letters pg 11  letters pg 12  letters pg 13 letters pg 1.1letters pg 7 letters pg 8 letters pg 9 letters pg 10 letters pg 11 letters pg 12 letters pg 13

Apr 8 / Michelle Windhorst

Project 3

new letter form 2 new letter form   new letter formnew letter forms 2 new letter forms 3 new letter forms 4new letter forms 1

new letter form

Apr 8 / Michelle Windhorst

project 4

3 modules to create letters

 

 

In my research and process to define energetic splatter, I started out by defining them as one “energetic splatter”. I started by typing these two words in Google together to see if it would be more creative verse the words by themselves. But I also researched each separately. I found they were more successful combined verses independently. The pictures I found as the two words together were more creative and interesting. When I think of energetic splatter I see energetic splatters of paint and bouncing balls. When thinking of energetic I feel full of life and alive and when thinking of splatters I see abstract colorful art of splattered paint. When creating the modules my process was to make them look like there was motion, and I thought that using circles would be the best source to create motion or give the impression of motion.

Apr 8 / Michelle Windhorst

Project 5

tate 2 todi 1 tate 1 pota 2 pota 1 4 Haiku Layout  10-11.1  10-11.2 10-11.3 71-101.1 71-101.2 atav.1 atav.2 AWoY1 AWoY2 kyly 1 kyly 2 oaob 1 oaob 2 Part C_picture of word pota 1 pota 2 tate 1 tate 2 todi 1 todl 2 Part C_picture of word oaob 1yaye 1 yaye 2kyly 1 AWoY2 AWoY1 atav.1 atav.2 71-101.2 71-101.1 10-11.3 10-11.2 10-11.1 4 Haiku Layout 4 Haiku Layoutyaye 2 todl 2 yaye 1 tate 2 todi 1 tate 1 pota 2  pota 1 Part C_picture of word oaob 1 oaob 2 kyly 2 kyly 1 AWoY2 AWoY1 atav.1 atav.2 71-101.2 71-101.1 10-11.3 10-11.2 10-11.1 4 Haiku Layout 4 Haiku Layout

Feb 5 / Michelle Windhorst

Hello world!

Welcome to Wayne State University Blogs. This is your first post. Edit or delete it, then start blogging!