Introduction
 Welcome to
Design View #64.
Web Directions South has
come and gone for another year. If you were lucky enough to attend, you no
doubt left with some fresh ideas, a few new friends, and a well-earned
headache or two.
However, if you were a no-show, there are still some great treats to
look forward to. The first batch of this year's presentations are
beginning to trickle online, including:
In this month's Design View, Matty spends some quality WDS09
time with type guru Mark Boulton, and finds out why Comic Sans might not
be the elephant man it's held up to be.
Later I'll introduce you to our new triplets -- Mac OS X Dashboard,
Opera Widget, and Adobe AIR versions of our fiendishly
useful (and free!) CodeBurner reference tool.
Read on.
Alex Walker
Editor
SitePoint Design
View
 - Design amazing web interfaces
from scratch.
- Master key web interface design
principles.
- Create beautiful, yet functional, web
sites.
- Unleash your own artistic talents.
Summary
Interview with Mark Boulton
 SitePoint's own Matthew Magain caught up with designer, speaker and
author, Mark Boulton, at this
year's Web Directions South conference. Here's the transcript of
their chat:
Mark, thanks for coming to Australia. When we spoke earlier, you
mentioned that you love this country and occasionally contemplate moving
here. Surely you'd miss the British weather, though?
Ha ha! Judging by this week, no. You have your own blend of British
weather here!
This is our third trip now. My wife and I used to live in Manly
approximately ten years ago, for about six months, and we returned for a
wedding three years ago. Every time we come back we have the same
discussions, like, "Should we move here?" It's so beautiful.
I think we'd miss a good cup of tea though, to be honest. The tea's not
great.
But the coffee's excellent!
The coffee's excellent -- but I don't drink coffee! There you go.
You're well-known for being a typographic designer. Could you
tell our readers what a typographic designer does?
Primarily, I design with type -- which is more than just choosing the
typeface. It means all elements of typographic design, from grids and
hierarchies to typesetting, and all that kind of stuff. It means focusing
on that. So the difference between a typographic designer and a graphic
designer is that a graphic designer does typographic design, but it's not
their main focus. They're often focused on imagery, photography, and art
direction -- those aspects.
Many of our readers and listeners think of typography as being
one aspect of design, but you were saying in your presentation today that
you consider imagery, layout, and color to each be one aspect of
typography?
Yes, I do. I think that any image you use on a design should really fit
into a grid. And the grid is a typographic grid. It should be created and
designed with the typography in mind as the primary element. They're all
related to type, and 99% of what we do on the Web, as designers, is
typographic design.
Sure, you have the interaction layer, making sure it's usable. But I
think all of that is typographic design. I really do. Consider a designer
doing what I did in university: designing an encyclopedia. You have to
consider navigation and access structure, you have to think about
hierarchy and flow, because an encyclopedia is not read cover-to-cover --
it's a reference book. So it has to be navigated in the same way that a
web site is. The similarities are quite evident, in my view.
The key slide in your presentation that stood out was the 9
factors of typographic structure. It really resonated for me. Would you
mind sharing how you came up with that structure, and how you use it in
your workflow?
Yes. It's taken a while to reach that point. This is the third model
I've used to explain my thoughts about typography, and what I think
typography is. The structure consists of nine squares: we have
function along the bottom -- language, typesetting, and
grid; above that we have what represents form -- hierarchy,
font and rhythm; and on top we have attributes --
layout, color, and content.
All of these have to work together to create a strong typographic
structure, although you can remove a couple and still retain a robust
structure. On the Web we've always had very limited font choice, to the
point where designers rarely consider typeface. But we have a really
strong structure due to all the other elements, so we're able to create
really good, strong typographic design on the Web.
Just because we're unable to choose our font, doesn't necessarily mean
we have to produce poor work. It's still possible to create solid
typographic design on the Web.
I have to confess one point that came to mind when I saw you
omit "font" from your typographic structure -- I thought,
"but the center doesn't hold!" Is having this whole range of new
fonts available on the horizon for use as simple as dropping
"font" into the equation? Or are we going to have to relearn the
structure for every font?
Yes, it's not as simple as dropping it in, which is one of my concerns
about @font-face -- that the barriers to entry for doing that
are as simple as choosing Comic Sans from a drop-down. It requires no
thought whatsoever. When you choose a font, you replace that bit in the
middle with a different font, and it has an effect on all the
surroundings. So yes, any font that's dropped in there will affect the
typesetting, the layout, the content, and the rhythm.
Speaking of Comic Sans, you mentioned in your presentation that
you had, perhaps mistakenly, been held up as a defender of the font. Do
you want to clarify what your stance is on Comic Sans, and where it fits
in the big picture?
I can almost hear the fury building in some designers' minds. No, I
don't think Comic Sans is a bad typeface. Bad designers have used it, and
it's been used by non-designers who are making a design decision without
having the right tools available to them. So, for example, my mum and dad
might create a newsletter for their church. They want it to be friendly,
so they use Comic Sans. And we see that all over the place.
It's just been used in the wrong context so many times, because the
barrier to entry is so low -- no typographic schooling is needed to be
able to choose it from a drop-down. People berate it for no good reason.
It's a font that's been overused, rather than a font that's inherently
bad.
Talking about bad fonts -- an audience member at the end of your
session asked about free fonts, and you responded that you thought the
majority were "rather crappy." Tell me, then: what's the
difference between a bad font, and a font perceived to be bad
like Comic Sans.
 There are a few differences. First, there's the actual quality of the
software -- how does it render on different platforms, and in other
browsers. The biggest issue that I see quite a lot with free fonts is bad
kerning -- the distance between individual letters. For example, if you
have a capital T with a lowercase r next to it, the
r has to go underneath the crossbar of the T. These
kinds of issues, including spacing requirements, need to be addressed by a
typographer when generating a font. With free fonts -- because they're
free, and there's no commercial backing behind them -- then perhaps that
time is reduced, and as a result the kerning is poorer.
Also, free fonts generally lack the breadth of weights available, making
them counterproductive to be used commercially. Quite a lot of designers
will choose a typeface in the print world, and will want a full family of
fonts to be able to use throughout the design; that way they can use just
one typeface and use it right across many applications. Free fonts, on the
other hand, are generally only available in single weights. They're very
rarely available in multiple weights. So that's another issue.
And they take a long time to produce. I'm not having a go at free fonts.
Type design is a completely different discipline. My hat goes off to type
designers, because it's hard work; it takes a long, long time to do, and
it's no wonder that foundries are very protective of (normally) years and
years of work.
I have a question about fixed and fluid layouts, as it's
obviously one of those topics that generate almost religious fervor in
debate and discussion. The concept of a grid, and the concept of vertical
rhythm -- these are elements that seem to work quite well for a fixed
layout. Is it possible to apply those concepts to a fluid layout as
well?
Yes, it is. It's just that your base unit of measurement needs to be
relative, rather than fixed. So you can use percentages for ems. Quite
often using ems for any of that kind of layout stuff is actually
preferable to using pixels, because an em is related to your type. So
there's an inherent relationship between the layout and the typeface that
you're using.
What about incorporating IAB ad units, which are always
specified in pixels, and which won't change as text size increases or
decreases?
Well, I think that comes down to control. It comes down to designers on
the Web needing to lose control, and that's difficult for designers to do.
I've mentioned this over the past couple of days, and people like Khoi Vinh
have been talking about it for years; I'm only just coming round to his way
of thinking, I guess. It's not because designers are being difficult --
it's the way we're schooled. It's part of our DNA: to control the message,
and control the design. So asking us to lose control is actually a big ask,
and I think that's why a lot of designers end up going fixed -- because
they can control it to a degree.
Maybe it's their clients that are unable to give up that
control?
Maybe it is! That's a big issue as well -- client expectations. But
client expectations can work in reverse as well, you know. I've had
clients who expect full-width, fluid layouts, and will ask, "Why is
there a lot of white space over here on the screen?" So it works both
ways.
In your talk, the definition of typography that you presented
was: "the mechanical notation and arrangement of language." My
question is, does the word "mechanical" imply that the art of
typography is more of a science than an art?
Yes, I think it does. I think type design -- the design of the
letterforms -- is more akin to art. There's a lot of art craft in that
process. To design a specific typeface so as to convey a certain feeling
or idea for a large body of text is very, challenging. That's more art
than science.
Typographic design, the stuff that I'm talking about, is more science,
really. There are rules, there are ways of doing things ... it's less
about art than type design, absolutely.
Finally, I thought your presentation was fantastic, but I was
unable to work out whether you were pessimistic or optimistic about the
imminent arming of hobbyists with a whole stack of new fonts to choose
from.
Ha ha, yes, I was a bit of both, I think. I'm a little bit pessimistic
at the moment, because I feel like we're giving hand grenades to kids.
With the wrong tools in place -- such as Comic Sans in drop-downs --
people are unable to make good design decisions.
For designers, I think it's exciting, and it's a good place to be.
However, I think we lack the right fonts to use on the Web at this stage.
The difference between web fonts and fonts designed for print is huge --
more than just technically, but in the actual design of the typefaces
themselves. I'd love to see browser vendors or big corporations step up to
the plate, like Microsoft did, and invest in having web fonts designed and
distributed -- whether it's like TypeKit, or if it's the foundries
themselves -- so there's a way of putting the right typefaces into the
right hands. Because at the moment, putting Garamond or Bodoni on the Web
is fairly ordinary.
Thank you very much for your time, Mark, it's much appreciated.
And enjoy the rest of your time in Australia.
That's all right, thank you very much!
Business Secrets You Can't Live Without! The Web
Design
Business Kit 2.0
- 509 pages of proven
techniques for building a successful web design business
- 73
essential web business documents
- 100% money-back
guarantee
Buy the kit now to take advantage of
FREE
worldwide shipping
A Hunka CodeBurnin' Love
When we first launched the SitePoint Reference sites, we
knew there were tons of great content in there.
But sometimes it's more than just about the quality of the
content -- it's about how you work. CodeBurner for
Firebug was the first step in our plan to help you put HTML and CSS
reference material into your normal workflow.
But let's face facts -- not everyone uses Firebug, or even Firefox for that
matter.
So, that's why we're pleased to announce three
new ways to have yourself a helpin' of CodeBurner.
Let me introduce them:
1) CodeBurner for Mac OSX Dashboard Widget
If you're a Mac designer who spends most of your development time in
Safari, opening Firefox just to check some HTML isn't exactly super
convenient.
Install the new CodeBurner for
Dashboard widget and you'll have the complete CodeBurner reference at
the tap of a function key. Mac-licious.
Download
CodeBurner for Mac OSX Dashboard
2) CodeBurner for Opera
Of course, Firefox and Safari are just two of the great modern browsers,
as Opera devotees will be only too pleased to point out.
And with James (brothercake) Edwards -- CodeBurner's author -- being an
avid Opera fan, there was little chance of us forgetting the Opera
userbase with CodeBurner.
Download
the CodeBurner for Opera Widget
3) CodeBurner for AIR
Okay, but why should you need to commit to any one browser to enjoy the
benefits of CodeBurner -- or even a single OS for that matter?
Perhaps you like to sprinkle a little Linux Konqueror here and
maybe some Windows Safari there, because that's just how you
roll?
Well, happily my friends, we have you covered there too.
CodeBurner for
Adobe AIR gives you a complete HTML/CSS reference without the need to
even open a browser -- across Linux, Mac, and Windows.
Download
CodeBurner for AIR
As if this new rainbow of CodeBurner flavors wasn't enough, brothercake
has even more to offer. These releases of CodeBurner all come brimming
with new features -- as do the updated Firebug and Firefox plugins.
For example, each tool now contains a brand new CSS panel (shown above)
that allows you to load the style sheets from any site you visit, enabling
you to easily explore the CSS they use. The Firefox and Firebug versions
also sport a handy-dandy new lookup field in the status bar of the
browser.
It's all very slick. What's more, James is hinting at even bigger things
to come. Watch this space!
Read the blog entry:
 If you think
you're using all that CSS has to offer, think again!
That's all for this issue -- thanks for reading! I'll see you in a few
weeks.
Alex Walker
design@sitepoint.com
Editor,
SitePoint Design View
|
Want
your Firefox extension to stand out from the crowd? Wish extensions were
as easy to style as web pages? In this article, James shows us how to give
an extension that extra bit of flair by mixing HTML right into an XUL
document.
Raena caught up with Simon Pascal Klein -- designer, speaker
and self-confessed rampant typophile -- to talk about his upcoming
appearance at Edge of the Web 2009. 
There’s
a lot of great desktop software available in the open-source world. In this
article, Tim shows us a few cool tricks using GIMP, a free and open-source
image editor. 
