Web Design is 95% Typography | Hacker News Reader

Web Design is 95% Typography

informationarchitects.net

234 pointsraghunayyar82 comments

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'.

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.

I think this speaks (good) volumes about you and your approach - without all the details you take the initiative.

As someone currently using 99designs (booo!hiss!) to get a website relaunch off the ground. There are one or two designers who have actually, well, read the brief, who engage and listen to feedback intelligently. I will want to work with them again in different areas, and am happy to see they have got some portfolio beginning.

Its the difference between asking permission and asking forgiveness.

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.

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.

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.

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

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.

I'd be worried they'd leave the copy/paste approximation in the final website. Maybe that says more about the people I work with though.

What I do in those cases is to color the unchanged text in red or pink. That way anybody can see what needs to be done and help get things moving.

That's absolutely true, but hand on heart, how many Web Designers/Developers here really have a say on when they receive content? The chance to build a design around the content would be a fine thing for many of us.

Yeah, most of them think of their website as a online brochure. Unfortunately that's also how most (print)designers think. They've been doing the Lorum Ipsum Dance for years and years.

I've repeatedly had the pleasure of receiving content on the very day of the launch. And yes, it often involves tweaking the stylesheet, or something similar.

That's a common occurrence for myself and many of the designers I work with. Regarding content, we are at the client's mercy, and unfortunately I find their sense of urgency is often nearly non-existent.

I thoroughly agree. Its astonishing the number of times I've had projects stumble, sometimes collapse, at the "writing the content" stage. And only ONCE have I had someone hand me (nearly) complete copy before I started designing.

Once in complete exasperation at the total absense of copy from a client I offered to write it for them for a modest extra fee, and then rang their phone number (one of the few pieces of text I did have) and interviewed one of their call center staff to get the down low on the business.

I agree to such an extend that I signed up for an account to up-vote this.

Damn! ;-) Welcome aboard.

in my 10 year experience working as a developer at web design companies the prettiest the layout the designer came up with the less functional it is in practice.

...and lets not get started on what happens once the end users start adding content... I feel like crying!

Very true, I've seen plenty of people waste hours debating how to tweak layout in fairly minor ways to increase conversions when in fact their entire content either doesn't make sense, is incomplete or is just plain boring.

If I still were in "Web design/dev" I would put this in the footer of every mail and papers I send to people I work with.

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

https://s3.amazonaws.com/1overBlog/screenshots/treat-text-as...

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?

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)

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).

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

I get it from some ppa with newer chromiums, and now that you mention it, I can't recall seeing it in a while. Hope it's fixed!

I also frequently experience this glitch, default zoom level is 100%.

No, this was with the default and it persists even after zooming back and forth.

Yeah, I'm in the habit of CTRL++ and CTRL+- upon opening pages that use custom fonts (JavaScript fonts).

Chrome on Linux is a treated as a third class citizen by Chrome developers and it has a crap text layout engine.

At least the font rendering works better on Linux than on Windows.

http://code.google.com/p/chromium/issues/detail?id=137692

Also, no ligature :/

I have ligature on my website by using:

    text-rendering: optimizelegibility

with Computer Modern.

For many technical reason, typography on the web is hard. I had written my though about it here (there are images, this is why I simply don't copy/paste):

http://yannesposito.com/Scratch/en/blog/Typography-and-the-W...

Nice piece! Love it when someone cares about ligatures! I've actually had clients --big ones-- force me to remove "those crazy letters" in their layout. I couldn't educate them...

Hve you seen http://beta.typecastapp.com/ "Better web type without the hassle" If anyone is going to fix ligatures it's them.

Update: THEY HAVE!!! http://beta.typecastapp.com/blog/fancify-your-typography-wit...

I was always disappointed that TeX or LaTeX didn't become standard for the web over HTML.

This used to happen to me all the time on all sorts of pages. I haven't noticed it since upgrading to 12.04 so perhaps it has been fixed.

I did find the bug report for it at one point and a workaround is to right-click and open the web inspector. For some reason this forces a re-render that fixes the problem.

Get an OS that cares about how type looks on screen.

Or designers can use fonts which works for all operating systems and browsers.

The font is not at fault, the renderer is at fault.

Which fonts a work for all operating systems and browsers?

Arial, Arial Black, Comic Sans, Courier, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana (...)

HN uses Verdana fyi.

"Major" is the important word there.

came here to say the exact same thing

"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.

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

>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...

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

We've stolen a tremendous number of words with out adding arabic/hebrew/cyrillic/japanese/etc characters, I don't see any reason to assume we'll start with chinese.

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

Don't forget Firefly!

I goram won't !

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.

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"

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.

Since we're discussing opinions here - the second entry is much more readable on my 1080p monitor at arms length.

>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/

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.

I love that article.

>an overly strong contrast (full black and white) is not ideal either, as the text starts to flicker. Benchmark: #333 on #fff

I prefer #000 on #ffd, but that's me.

Agreed, seem full of pedantry. Moreover no typography will fix poorly written text: “what we nowadays call “information design”. So to speak, information designers nowadays do the job"... the guy did not proud read himself, most likely.

Too proud to proof read!

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

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.

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.

> 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.

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

content ≠ information.

Youtube videos are often almost empty of information.

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.

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/

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.

Web design is not 95% typography...

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

I'd say it depends on the website. If it only needs to present written content it CAN (not must) be. But other way I agree with you, typography is not really "functional", and a website needs to be functional. Most of the websites do.

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...

Very interesting way of thinking.

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

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.

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

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.

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

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

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

iABC is amazing font.

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.

Reply on news.ycombinator.com