
Web Design is 95% Typography - raghunayyar
http://informationarchitects.net/blog/the-web-is-all-about-typography-period/
======
digitalengineer
Web design is 95% typography and 100% content. I can't tell you how many times
we have to design without knowing the actual CONTENT or text and we're forced
to dropping Lorum Ipsum (fake text) in the designs. Not knowing the text stops
us from knowing the USER, the target audience, and the entire REASON for the
website. Actually knowing the subject, content and text makes the difference
between 'nice' and 'functional'.

~~~
GBKS
Honestly though, I think we need to take more responsibility in helping shape
that copy. I've also had pretty bad experiences when the client had a
dedicated writer assigned. My favorite approach is to, whenever copy is
missing, go to a competitors site or Wikipedia, and copy/paste. At least you
get an approximation, and it helps everybody who looks at the project start
responding to and thinking about content. As UXers/designers/developers we
might actually have a very good feel for content and are in a great position
to get the process started.

An interface with Lorem Ipsum is like a portrait of a person without pupils
drawn. It becomes abstract and all live is missing.

~~~
mnicole
On the opposite end of this, no amount of organizing for the impending content
by creating fake but ideal character counts (something I've done on nearly
every site I've worked on) has led to those constraints actually being
followed by the internal staff or external clients I've worked with. This is
easily one of the biggest after-the-fact issues/time consumers I deal with in
dev because often times, the content isn't finalized even after launch. At the
end of the day my experience has been that the content provider would rather
the layout be changed to accomodate their copy rather than them going back in
and removing a few words they feel are vital/more appropriate for the
messaging. Obviously YMMV, but be sure to calculate the effort vs. your
understanding of how the business makes decisions or you may be in for some
heartbreak.

~~~
lifeisstillgood
With all due respect, neither the designer, nor the client knows what the
right copy and the right layout is.

A/B testing does.

The layout _will_ be changed to accomodate the best conversion of customers to
cash. Anything else is under-selling your client.

~~~
mnicole
This is in situations where there isn't the time nor the budget for A/B and
it's one person's word against another, which is a much more likely scenario
for any website plucked at random.

~~~
lifeisstillgood
If it's a website that makes money there is time and budget for a/b testing

if it does not make money how is there budget for professional designer and
copywriters? Edit It's late, that post is more aggressive than I meant it to
be and so, I apologise for snapping at you, I would like to suggest you have a
look at @patio11's blog Kalzumeus if you want to be bludgeoned with AB test
positivity, and bid you goodnight

But seriously, AB test your designs - in fact I might suggest that designers
who offer a design-and-test service would make more cash and more leverage in
negotiations than not

now there is an interesting counter to 99designs

~~~
mnicole
I don't know where our disconnect is here, sorry. I'm not saying anything
remotely negative about A/B. I'm saying that despite business owners
understanding the potential, other things get in the way (other projects, time
constraints, etc). For many people, their website isn't their primary means of
revenue and their designers' and copywriters' time is best spent on the part
of the business where shareholders have proven results of their effectiveness
and value-add.

------
Adrock
Comically, here's how this is rendering for me using Chromium on Ubuntu:

[https://s3.amazonaws.com/1overBlog/screenshots/treat-text-
as...](https://s3.amazonaws.com/1overBlog/screenshots/treat-text-as-a-ui.png)

~~~
yesbabyyes
I get this quite often (Chromium/Ubuntu here, too). It usually fixes itself by
zooming out/zooming in. I always surf with 120% zoom, and I've kind of assumed
the bug is related to that. Do you surf with a non-default zoom level?

~~~
sdepablos
Me too (Ubuntu + Chromium), and is really annoying, as more and more sites are
starting to use webfonts :( The strange thing is that only happens around
links and on Chromiun (Chrome works ok)

~~~
evmar
I think the bug was maybe fixed (I haven't seen it in a while), but Ubuntu
ships an ancient version of Chrome (looks like Chrome 18, while I'm using
Chrome 23).

~~~
TazeTSchnitzel
Yep. Get it from Google (Chrome) not Ubuntu (Chromium).

------
akdetrick
"Choosing a typeface is not typography" I really appreciated this point.

Too often people confuse knowledge of fonts with typographic knowledge or
skill. Understanding how to set type is far more important; correctly choosing
a good measure (line length), margins, leading (line-spacing), and a
meaningful hierarchy of font sizes (among other things) all have a huge effect
on readability.

For anyone interested in learning more about typesetting, I recommend "The
Elements of Typographic Style" by Robert Bringhurst.

------
lifeisstillgood
Yes, and it will radically change as the web stops being English / Latin
alphabet dominated.

Typography for Japanese characters is fascinating - three different
_languages_ almost, sitting in the same sentence, the cadence of language
reflecting in the angles or spacing, the possibilities are an order of
magnitude more complex than English - and an order of magnitude more
rewarding.

<http://www.flickr.com/photos/esthet/3454734/> \- beauty in calligraphy

<http://www.kfstudio.net/himaji/> \- cute fontface for Kanji

<http://www.lukew.com/ff/entry.asp?111> \- a good primer

~~~
batista
> _Yes, and it will radically change as the web stops being English / Latin
> alphabet dominated._

It will never stop being English/Latin alphabet dominated for the English
(Americas, Australians, etc) though.

So, it's not like english web designers will see any major change in their
work, or english web users...

~~~
lifeisstillgood
Well, I suspect we shall see words entering our lexicon from China - every
right thinking 人 would agree :-)

~~~
batista
Like in a Bladerunner/Neuromancer cross-culture like future. Maybe, maybe.

~~~
pyre
Don't forget Firefly!

~~~
lifeisstillgood
I goram won't !

------
aw3c2
That website is impossible to get a quick overview on for me. Those centered
lines looked like "thoughts" at first but it seems they are subheadlines? The
whitespace feels all weird to me. The text is very huge and uncomfortable. The
content itself is badly written (and to me, liking reading something is
important. Surely the author's name is "Oliver Reichenstein" not "oliver
reichenstein" as the font looks like. Rant over.

~~~
cobychapple
Regarding the type being large, iA have very good reasons for that being the
case, which they outline very clearly in another article [1].

[1] <http://informationarchitects.net/blog/100e2r/> "The 100% Easy-2-Read
Standard"

~~~
aw3c2
That says it is the browser default size and that is not correct. Here, check
it out: <http://pastehtml.com/view/cc5nellwp.html>

First line uses your browser's default. Second line is their setting (~21px).

Such huge text is definitely not easy to read for me on any of my devices.

~~~
batista
> _That says it is the browser default size and that is not correct._

It is correct, just slightly misleading. The size is made to look like the
browser default size taking display density into account. It is adaptive.

The 16px font, in the screenshot you send, is not "browser default size". Or,
it is, but not as it was intended by browser makers. See, when it was chosen
as default, we used 14" 1024x768 monitors or worse. Anybody who wants to show
this as it was intended, needs to take account the DPI of a modern screen and
increase the 16px accordingly.

Trust me, those guys have gave a lot of thought into readability and font
sizing.

> _Such huge text is definitely not easy to read for me on any of my devices._

Actually it is. You are just not used to it. Whereas you are used to fonts of
exactly the same size (or very near) when reading books. Some people have been
conditioned to stare at tiny fonts (a 12-14px font is a monstrosity on a
modern display) and proper type jumps at them. Check also Zeldman's reasoning:

<http://www.zeldman.com/2012/05/18/web-design-manifesto-2012/>

~~~
aw3c2
No, the font is huge compared to a book. Yes, I did held a book infront of my
face at reading distance to compare. The font here at HN is pretty much what a
book is like. I use a 1680x1050 22 inch screen.

------
pacomerh
2006?, nice. So yeah these days typography is big on web design, but also
obviously relative to the kind of site your building. Regarding Khoi Vinh’s
Web Site, I like this page in particular
<http://www.subtraction.com/archives#column-b>

------
andrewingram
I've been a proponent of this approach since I first read this article back in
2006, but I think it can be generalised.

The main case to be made is for a methodology of "content out", which is to
design the primary content areas of your site before your worry about things
like sidebars, global navigation and other decoration. In the case of text-
heavy websites such as blogs and news, this means to start with typography -
when the content is the writing, the typography is the design.

If you're making a video website, your first step should be to make a great
video player, then presumably video description, comments, related videos and
finally site-wide design. If you're making a to-do list, make the list look
great before you do anything else.

------
esrauch
Am I alone in finding the fi ligature generally annoying/difficult to read in
general? I see it in print occasionally and it always feels like a kerning
mistake that is hurting my ability to quickly parse the letters.

------
scottjad
> 95% of the information on the web is written language.

Really? Youtube videos, Facebook photos, TV shows, movies, music, etc only 5%?

To be expected from a company that sells a text editor that's 95% typography.

~~~
hfz
Pretty sure the article was written before they started working on iA Writer.

------
rickdale
I am no web designer, but I have made plenty of websites in my time. Right now
I am rebuilding a site for a product that I sell. I decided to go with a one
page web site with lots of javascript for clicking around and animated images.
The words on my page that are typed out are: Available At, Contact Us, and
F.A.Q. . . . the other content is my logo etc. While I do see that good
typography can equate to good web design, I will also add that good images,
code, colors, and usefulness also help.

------
mattlong
What exactly makes Khoi Vinh's website[1] notable? Not trying to be negative;
I'm genuinely curious. I wouldn't have given it a second thought if I came
across it in the wild. To my (untrained) eye, it's typography consists of a
single font that is almost always too small to be readable.

[1] <http://www.subtraction.com/>

~~~
msutherl
6 years ago or so, when I first came across his website, it appeared as a
revelation. His use of typography was very advanced at the time. I agree it
looks rather ordinary and a tad busy compared to today's standard.

------
hiphopopotamus
Web design is not 95% typography...

~~~
andrewcooke
well, tbh, web design is not the kind of thing that can be characterized as
95% anything, except as a rhetorical flourish.

------
tpowell
I don't see a link to it but this is a FANTASTIC little tutorial on web
typography:

[http://www.dontfeartheinternet.com/css/don%E2%80%99t-fear-
we...](http://www.dontfeartheinternet.com/css/don%E2%80%99t-fear-web-
typography)

------
lhnz
Very interesting way of thinking.

Typography as an interface to the content you wish others to consume.

~~~
brudgers
Typography is a primary user interface element of Microsoft's Metro paradigm.
Typographic elements can more readily be culturally localized using standard
tools. It is harder to do this with skuomorphic icons.

------
silon3
At least 50% is making a good fluid (not only responsive) layout, that handles
things like large fonts, adjusts to dynamic text, etc...

~~~
lmm
Ironicly I tend to find "undesigned", plain sites handle such things best.

Doubly ironicly, TFA is not one of them, despite being just a plain piece of
text. Fixed width is the tool of the devil.

------
BaconJuice
This is sort of off-topic, but does anyone know what kind of theme/blogging
software this blog is using?

~~~
mrlinx
Looking at the code, I'd guess Wordpress + iA4 theme

~~~
BaconJuice
Any ideas where I can find this theme? Tried looking no luck =/

------
Cancel
iABC is amazing font.

------
ans
well maybe, but then one should make a distinction between web application,
and just plain websites. designing one may be 95% typography, but the other is
about much, much more.

