Typography

acme on 2002-07-31T15:20:40

A lot of programmers aren't as good as design as they might think they are. That's not a problem, but they need to realise it. Recently I've gotten slightly back into design, or more specifically typographical design: how to present information clearly and simply.

The book that really set this off for me was The Elements of Typographic Style, which tries to explain the history behind typography and summarise them into a couple of simple rules (yes, and it tells you to break the rules). The odd thing about the book is that it is a strange size, but that works out well. It's a beautifully designed book and everyone should have a read through it. It points out various minor things: one of the neatest is that bullet points should be in the margin, not in the body text. It shows an example of this and it looks so sweet that I've decided I hate HTML for forcing such ugly design on us.

After reading the book, I looked around for nice fonts and have found myself using Adobe Jenson Pro regularly. See how use.perl.org looks using this font. I particularly like its T, e, t, z and colons. I think Mac OS X's rendering technology is a big factor in why this looks good. Adobe Jenson Pro Italic looks nice too.

Typography isn't new. The font is based upon a design by Nicolas Jenson which he did about 530 years ago. Surprisingly little has changed since, apart from recent new trends like slab sans serifs and general font abusing. Yes, distressed fonts are very clever, but don't use them everywhere.

I haven't been only using Jenson for surfing the web, I've also been inflicting it upon other people via my slides. Amusingly, Elian presented his Parrot slides using an ugly, minimal blue-on-yellow design, and I had the pretty Jenson and orange ones. He definitely won on the content versus presentation angle, but I think I won the other way around. Even if nobody enjoyed my content, at least they had a pleasant design to look at while they chatted on IRC during my talk ;-)

If you remember one thing about this journal entry, it should be that fonts are pretty, design is good and it's boring having everything using Helvetica.

Now if only we had decent free fonts...


Bringhurst

koschei on 2002-07-31T15:34:46

It's a lovely book that. I bought it a couple of years ago (along with several style guides) for a project I was working on. I seem to be rereading it every six months or so, just because it's so darn good.

And I had thought the font you used looked familiar. Couldn't quite place it though. It's very lovely on the slides. (Have to check the screenshot out later, when on a machine that doesn't do weird crap to PNGs.)

btw: Have to agree on the 'free' fonts thing. Fonts are typically overpriced, and their clones are never as good. If I produced more output in formats such as PDF, paper etc., I'd definitely buy some good ones, but I don't, so I haven't. Ah well.

Yep, they're horrid alright

Elian on 2002-07-31T15:57:05

You must've missed the bit where I was slagging on my own slides. To make matters worse, the color scheme I chose is horrid for anyone without perfect color vision--if you're either blue/yellow colorblind or completely colorblind, they're likely completely illegible. Between Damian's making PowerPoint dance, and your plain nice-looking slides, I'm feeling terribly inadequate. :)

Don't suppose I could hit you up for a slide design...

Re:Yep, they're horrid alright

acme on 2002-07-31T16:15:50

OK, perhaps I was a little rude, sorry ;-) Anyway, I've put the powerpoint version of my slides up if that helps. You don't have the right font, of course, and you may want to pick a colour other than orange...

Re:Yep, they're horrid alright

Elian on 2002-07-31T17:23:03

Nah, not rude in the least. I know they suck, and I'm happy to join in criticizing them. :)

Graphic design's not one of my strong points, so I picked something reasonably simple that I liked, secure in the knowledge that, while it was really ugly, at least it wasn't really ugly trying to be cool. (No star wipes and laser beam fade in effects for me!)

I think I'm gonna steal your slide format, choose a different color, and dig up a nice font. (I think perhaps Poetica would be good. Maybe a plain Adobe Garamond, I'm not sure)

waste some time with this...

wickline on 2002-07-31T18:29:03

> horrid for anyone without perfect color vision

Use http://colorlab.wickline.org/ to find colors you like that work for colorblind folks.

Note that you'll want to maintain good light/dark contrast to accomodate older viewers (even if they aren't color blind).

-matt

Re:waste some time with this...

Elian on 2002-07-31T18:45:30

Now that is nifty. (What'd be really cool is to have the changes to colorblindness settings alter the color wheel, or put a second up for comparison, but that's awfully nitpicky of me) Thanks for the link--I shall end up making use of it, I think.

Re:waste some time with this...

wickline on 2002-09-06T02:52:21


> have the changes to colorblindness settings alter the color wheel

done

-matt

Re:waste some time with this...

Elian on 2002-09-06T04:37:07

Woohoo! Now proof that my slides are ugly to the colorblind too! And mostly illegible, as I managed to pick colors mostly in the dead zones! (Two strikes for the price of one)

I'm so glad I've stolen^Wemulated acme's slide design, modulo the color issues they have.

Re:waste some time with this...

chaoticset on 2002-08-01T14:54:16

Great Chao, that thingy is playing havoc with my eyes.

I wasn't even aware there were two forms of red/green (apparently the information I was reading on color blindness and color deficiency was horribly out of date). I've just always had the "that's not green, it's red" problem.

I'll fool around with that thing some more...but I guess I should schedule a visit with an optometrist at some point. :\

Ugh, I don't like it

2shortplanks on 2002-07-31T16:12:07

Sorry, I don't like your choice in fonts. Many of your slides contain almost paragraph like text, and I find it's hard to follow the line of the text with that font...I keep finding my eyes being dragged down the screen...

But hey, I'm probably one of those programmers who have no sense of asthetics ;-)

book info

delegatrix on 2002-07-31T17:40:59

I've gotten a lot out of The Non-Designer's Design Book: Design & Typographic Principles for the Visual Novice by Robin Williams.

don't hate html

wickline on 2002-07-31T18:23:18

> I hate HTML for forcing such ugly design on us

Hate the browsers for not supporting standards.
HTML isn't meant to force *any* design on you.
That's what CSS is for: allowing page authors
to force ugly designs on folks :)

Try the following in mozilla...

-matt

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>test</title>
<style type="text/css">
    div.main { margin: 5em; } // all four sides
    ul       { margin: .5em .5em .5em -2em; }
                    // top  right bot left
</style>
</head><body><div class="main">
    <p>
        This is a paragraph with normal margins.
    </p>
    <ul> <li>foo
    </li><li>bar
    </li><li>baz
    </li></ul>
    <p>
        This is a paragraph with normal margins.
    </p>
</div></body>
</html>

Bringhurst

Odud on 2002-08-01T11:29:06

That book for layout, Chicago Manual of Style for how to do the detail, Norman - Psychology of everyday things? for the design....

Anyone got any good suggestions for how to write good technical documentation?

Georgia

ct on 2002-08-02T16:56:14

I use Georgia, a Serif font that is available free in TrueType font from Microsoft. It should be already installed on any recent windows box, and was installed on my OSX.

I snagged it from MS and used it without a problem on a linux box with Xft truetype abilities.

I hadn't thought to change the default font in Mozilla, but I've just changed it to Georgia, and the results are spectacular with OSX's font smoothing.

Now I need to find a monospaced type that's just as clear. Right now both courier and Andale mono look hideous smoothed. The horizontal bar on a lowercase 'e' is a gray blur.

Re:Georgia

pudge on 2002-08-06T18:32:38

It sounds sad, but Monaco looks OK smoothed in Mac OS X. I don't know what this "OSX" is, though.

Re:Georgia

koschei on 2002-08-07T01:09:45

I've been using Lucida Console in putty and gnome-term for the past few years. Yes, it's from Microsoft, but it's a nice font to look at all day.