How to Make Text Look Interesting: Minimalist Web Design | Hacker News Reader

How to Make Text Look Interesting: Minimalist Web Design

getspace.org

455 pointsrabidpookey72 comments

Though this article is a way for Space to sell their new theme, I can attest to the information provided being very useful in-and-of itself. It's a strong overview of the fundamentals of typography and basic rules to follow for strong visual hierarchy and content readability.

If you want to learn more about typography, I'd pick up (what is considered) the typographic bible, The Elements of Typography by Robert Bringhurst. While it is largely intended for print, most of the rules and suggestions still apply to the web. Alternatively, some pioneering folks put together a web adaptation of Bringhurt's book, http://webtypography.net/

Isn't that the name of the game in this brave new world? Tie your marketing message to some relevant piece of information that people will want to share. It's like product placement in movies, only informational.

Plenty of PaaS vendors post "how to" articles that contain information about a relevant topic, but are tied to the product they're selling. I don't see this as being any different.

It's the oldest form of marketing there is: mutual benefit marketing. The reason it's the oldest is because it works for both parties, hence, the name.

In the modern marketing world, this has been re-branded as inbound marketing.

In my experience the quality of the advice is often a useful indicator as to the competency of the company.

The Elements of Typography by Robert Bringhurst

This book is the single best book on the subject. It won't teach you to be a good typographer but it will create an understanding way beyond your typical book about typography.

It's also - and this is geeky - a wonderful recursive argument for itself. It's a book about beautiful typesetting, typeset strictly according to its own rules, and it's beautiful.

Isn't that terrific?

I'd also highly recommend Thinking With Type. It's a very quick read (as most of the book is visual) and gives you a great foundation for understanding and designing with typography.

http://www.amazon.com/Thinking-Type-2nd-revised-expanded/dp/...

Couldn't find it at Amz, and thereby learned the title seems to be actually The Elements of Typographic Style 3rd edition, 2004 is ISBN 0881792063 --hope that helps

Even more confusingly, The Elements of Typographic Style actually has sub-editions. For example, I have version 3.2. However, none of the online booksellers seem to account for this, and simply say that they have the 3rd edition. Alas!

If anyone is unsuccessfully trying to find Bringhurst's book, the title is actually "The Elements of Typographic Style". (Strangely, at least three comments referred to it as "The Elements of Typography".)

There's some good advice in there, but mixed in with lots of not-so-good advice, errors, or overly broad claims:

- "The classic typographic scale ... relies on the notion that these sizes, when used together, look pleasing to the eye."

The typographic scale has a fixed set of sizes because fonts used to be physical. Having a 71pt font would be a whole new box of lead.

- "I generally take the largest font I want to use and the smallest font I want to use, and place the headers into that scale at even measures."

For something like scale, a geometric progression makes more sense so that relative sizes are at even proportion (say each is smaller than the previous by 15%) then a linear progression of sizes. The difference between 72pt and 70pt is unnoticeable. The difference between 10pt and 8pt is huge.

- "One way is to adjust the kerning and tracking settings in your design program."

Another way, not mentioned, is to just choose a different weight.

- The "stroke width should be as even and consistent as possible"

It says Georgia has a more even width than Krungthep, which is visibly not the case. Some stroke variation seems to aid readability but too much (like modern serif faces) harms it.

- "Georgia features a larger x-height than Tekton Pro."

That isn't Tekton. WTF.

The last two examples are supposed to compare Georgia and Tekton, but they seem to show Univers (or a rip-off of Univers) and Snell Roundhand.

Maybe it's some really subtle trolling for typo-nerds? I don't know.

I agree with most of your criticism, but I think the point they were trying to get across with the "these sizes, when used together, look pleasing to the eye" was that that particular fixed set of sizes was chosen because it looked better than any other fixed set of sizes.

"Typography is not merely the process of arranging font on a page. It is a living creature; it feels joy in an exclamation point, ...."

Perhaps I'm just not as excited about typography as I should be, but isn't this a bit too much hype? When I'm told that typography is a living creature that feels joy, I'm immediately going to categorize the teller as a person I will not understand. Instant loss of credibility.

No offense, but the teller will then categorize you as a person lacking imagination. Instant loss of credibility.

Communication fails once again and the world is that much poorer. No one is to blame, but it's sad to see it happen.

I disagree: the author is to blame. Every message has an audience and the author must know that when they write. At Hacker News we are, well, hackers in the broadest sense. While some of us might appreciate typography for what it is, I believe most want to know how it might improve their products and services. Allegoric prose does not help, in this case.

(Edit: to clarify what it is I disagree.)

In this case perhaps the audience should grow up and learn about the side of the world that doesn't follow strict formal logic. Hackers shouldn't be afraid of aesthetic arguments, with all of the desire for elegant solutions they profess.

Nobody is questioning the necessity of aesthetic considerations to solve problems of all kinds. What brought up this discussion was the usage of ornate but empty language to describe typography. Quicksort is an elegant solution but would you pay any attention to a text stating that ”Quicksort is not merely a sorting algorithm. It is a living creature; it feels joy at a well-chosen pivot point?“

That notwithstanding, I disagree again. When the author disregards their audience, alienation ensues. To change someone’s mind, I must first have someone’s attention. It’s my job as the author to make the audience grow up.

"Algorithms can be beautiful", or "code can be beautiful" is certainly something I wouldn't be surprised to hear from a programmer. I don't see people freaking out over those usages, though.

Certainly, yes, and appropriately so. Furthermore, ”code can be beautiful” entices attention and curiosity while ornate language does not. That’s all I meant.

That passage is trying to emulate Robert Bringhurst's tone in his Elements of Typographic Style. See for yourself:

    One of the principles of durable typography is 
    always legibility; another is something more 
    than legibility: some earned or unearned interest 
    that gives its living energy to the page. It 
    takes various forms and goes by various names, 
    including serenity, liveliness, laughter, grace 
    and joy.

I am a typography geek myself and, while I was enticed by Bringhurst's prose when I first read it, I can't stand every blog post about typography trying so hard to sound like him.

First, as someone already pointed out, people are just rehashing his advice without adapting their essence to our media, the web. Second, people babble about typography for the sake of typography, forgetting that in the real world it's just a tool. As such, I leave another remark from Bringhurst:

    [The] satisfactions of [typography] come from 
    elucidating, and perhaps enobling the text, not 
    from deluding the unwary reader by applying 
    scents, paints and iron stays to empty prose.

For me, this Shop•Vac Pardoy Commercial thingy had really great typography. It kepy me interested the entire time. Granted, it had other elements keeping me interested, though I feel it was mainly the interesting use of type.

http://www.youtube.com/watch?v=y4sOfO8Ei1g

People feel joy in different things. I once heard a very rough and gruff high schooler I went to school with describe standing in front of the original of Van Gogh's Starry Night and having a profoundly emotional experience. I don't have that experience from visual stimuli, but I know what he means, because I get it from many forms of music.

To the author, typography is a living creature; to me, typography is the process of arranging a font on a page with some aesthetics. We're both right, as are several other positions.

(Though unlike many cases where I see typography and can agree it is at least more aesthetic than average, that page struck me as not "minimalist" so much as "pedestrian"; am I missing a font download because I'm on Linux or something? I've seen good fonts for such minimalism but that's rending in my bog-standard browser serif font. Edit: Oh, ha, the problem is I have Georgia set as my default font! Thus my personal response to that font may be different than for someone who hasn't done that.)

Am I the only one that thought that was one of the least interesting and very hard to read (as in nothing drew my eye, lacked any motivation to read those big squarish, repeating, same blobs of text) webpages?

Single long column, not adapting to size of browser window. It's more like a book/article/magazine than a web page. Only color jarring red links. Subtitles identical leading/trailing whitespace so text looks continuous instead of broken into sections.

oh but OA used emdash, that's surely important.

  Single long column, not adapting to size of browser window.

What? You want multiple columns? That would require scrolling down, then up, then down, then up... I'll take one column, thank you. Also, the idea that you must fill the entire browser window with content is nonsense. The column width should allow for a comfortable reading rhythm. Too short and you break rhythm from changing lines constantly. Too long and it's difficult to find the next line. Most people seem to like 60-80 characters. Why screw that up by letting the browser width determine column width?

> Why screw that up by letting the browser width determine column width?

Because I choose browser width, and I set it where I like. That's why the web is better than paper.

more like a book/article/magazine

You mean, more like a media form that has evolved to be readable.

Heh, I got one line of black-on-white text describing a database error. Thought it was some kind of joke

I am getting a database error too. "Error establishing a database connection"??

It looked really interesting though

For your reading pleasure:

Typography is not merely the process of arranging font on a page. It is a living creature; it feels joy in an exclamation point, takes deep sighs at periods, grabs consciousness with each bold strike and begs for understanding in the space between every italic. It has intricate rhythm and harmony, staccato paragraphs and legato headers that blend into a melody of enlightened web design. Typography is an art as much as it is an essential design process, and it is one that is best understood by focusing on the contrast between textual elements in a given design.

Typographic contrast is the art of using different type to expose the meaning of content. It is the pop that grabs the attention of the audience, halting text from rendering as dense and oppressive drabness. Contrast should be minimal; it should maintain harmony with other design elements yet also indicate hierarchy, relationship, and emotive content.

at first the page was an error message saying "Error establishing database connection" in 20pt bold black times... that was unintentionally funny.

This is a great way to promote your product. I love that the creators are not only giving you useful information for your own work, but subtly offering up their theme as an option. It'd be nice to see other products/services marketed like this. It's subtle and smart.

Is that really Tekton Pro in those illustrations? Doesn't look the Tekton Pro I used to know...

heh, that's most certainly not Tekton, which is very recognizable.

The script in the figures shown is Zapfino. They're both inspired by hand lettering, but stylistically are nothing alike.

It's a pretty crazy error for a post on typographic expertise.

It looks like Snell Roundhand to me.

Ah, you are quite right. Thanks for the clarification. So much for my pronouncements about looking closely ;)

There's plenty of general typography advice out there such as this applicable to typesetting walls of text like blog posts and magazine articles, but what about the more specific case of type setting in web application interfaces? When developing web apps I feel like I waste a lot of time fussing with CSS font settings and the end result frankly sucks. Are there any typography snob blogs out there that focus on web app typography guidlines?

I try to read as much as I can about design - try out the latest tricks (e.g. grids, golden ratios) and pay attention to what works and why - but somehow that's not enough. To get to the next level, web app developers need proper design critiques -- where good (or amazing) designers weigh in on designs that are still in their early stages. I wonder if such a service or community exists...

Quit dribbbling and start wandering the forrst .. you might ffffind what you're looking for, or at least tumbl upon it.

A good tool to calculate the rhythm & scale of your website's typography is this one: http://lamb.cc/typograph/

For example(in px): 10-12-14-16-20-26-32-42-52-64-84

- The ragged-right doesn't work with titles that extend beyond the copy.

- Don't use images for examples that are perfectly possible with just type.

- Em-dashes—like this according to convention.

- In one of your examples you combine sans small-caps with regular capitals. Not good style.

- Come on, there are better fonts than Georgia on my mac. Make me look at them.

And there are more examples of bad style on this page.

Like endtwist said, get yourself The Elements of Typography by Robert Bringhurst if you really want to learn.

- Title needs to be larger and bolder.

- Main paragraph lead-in lacks visual impact and is too similar to main body text.

- Em-dashes—like this according to convention.

According to one convention. It is unusual but some style manuals require you to put spaces around m-dashes.

I also don’t think that there are better serif screen fonts than Georgia by default on Macs. There is Hoefler Text which is nice (if a bit quirky and certainly polarizing) but I think having the page look the same everywhere is preferable to using Hoefler Text on the Mac and Georgia elsewhere.

> - Come on, there are better fonts than Georgia on my mac

I, for one, do not have your mac.

Although good points, most — if not all — are arguable.

1. Why not?

2. Agreed, although images are safe in that they render identically in all browsers.

3. Which convention? In the UK em-dashes are surrounded by spaces. Other conventions recommend hair-spaces.

4. Not sure which example you're talking about.

5. There's nothing wrong with Georgia.

You can't rely on the broad range of browsers and platforms to correctly represent a lot of the examples required to demonstrate typographical concepts - images make good sense here.

And not everyone has a mac...

Not everyone has a mac, but you can do

  font-family: Times, Georgia, etc

So that it falls back on Georgia if the user does not have Times or whatever font is specified first.

About images: I disagree, a lot of typographical details can be made to work even on IE6/7

How would you represent individual character kerning? Demonstrate hinting, anti-aliasing, Clear Type, points, fonts that don't exist on all systems, etc.

Plus, every browser is going to render things differently (and individual settings in browsers will cause inconsistencies between different installs of the same browser). A picture is simpler, and gives a consistent experience across all mediums.

Is it just me, or does this look uncomfortably similar to the celebrated iA3 template for wordpress, designed by Information Architects?

http://store.informationarchitects.jp/product/ia³-template http://www.informationarchitects.jp/en/100e2r/

It's probably not an intentional ripoff but more like an intellectual cul-de-sac - following certain typographic rules to their logical conclusion leads to the same design.

The designer Garrett Dimon had a similar design for a long time (and his Sifter app has remnants of that style) and so did my personal blog, back when I used to write a lot more.

http://alabut.com/nonsense/2005/03/ruby-self-tutorial-day-1-...

Speaking as a visual designer, I would advise you that iA's template is heads above, and actually starts you off with the "stunning" typography this template attempts to describe and demonstrate.

Type freaks will tell you that the key to setting text is all in the negative space. The homepage in particular uses white space around the headline and button in a very static, uninteresting way. The huge misalignment of items in the footer looks like something got broken. Know why? Because although the footer category heads are evenly distributed into four divs, the text contained in each column has a different visual weight. The third column should be optically aligned (meaning you need to eyeball it), so there doesn't appear to be a gaping space to the right of the "Connect" list.

Moreover, the 'About Space' block is crashing into the text on the left. Even the Space logo is poorly kerned, causing the A to float in an ambiguous way.

Take away what you can from the article submitted as there are some sensible tips, but don't don't pay for this template hoping for something competently designed. My design advice is to trust your eyes. Designers use some rules of thumb but looking carefully for the places where the rules fail is how you get to be great at setting type. Even a great template can't guarantee to make _your_ content look great.

i made a minimalist web design for my project website http://vsetech.ru/

as i am not a designer at all, so i had to be minimalistic in order not to be very ridiculous. but i tried to make it look interesting. seems i followed some of the advices of the article intuitively (and some was violated of course)

Text size, color, and font are all conversion drivers in their own right:

http://www.conversionvoodoo.com/blog/2010/08/3-font-tips-to-...

I've found that larger font sizes for copy-heavy sites almost always drive higher engagement

Anyone else not really care for the line break in the title? Seems to me like it would have been better after the colon, so that "Minimalist Web Design" would be grouped together on the next line.

I wouldn't normally be so nit-picky, but it is an article about typography after all.

This 'advertisement' misses alignment such as 960gs, this makes information easily readable (compare 960.gs sites to this theme).

tl;dr

105 votes + top spot on HN + submitted by an account registered an hour ago? HN is easily gamed, I guess.

Unless people are actually interested in web typography.

Why should the person submitting the link (unless it's pg) make so much difference?

How to make text look interesting:

Some ASCII art at the top, paragraphs divided in to readable form in the body.

Seriously, the people who care about aesthetics when they are reading are the same sorts of people who would rather not be reading in the first place.

I beg to differ. Because I consume vast quantities of text, seemingly small improvements in aesthetics make a disproportionately large contribution to my quality of life.

Funny, a typography article written in one of the most distracting fonts i've ever seen.

EDIT: Obviously i have no idea what i'm talking about. I just thought that the widely varying heights and odd shapes of the letters was distracting from the content.

Georgia?! Really?!

I think it’s fair to say that Georgia is uncontroversially one of the best screen fonts out there. Georgia is awesome. And since it was optimized for use on screens it looks great at any size on screens with wildly differing PPI. The world has to thank Microsoft for having shipped at least one “web safe” font that’s great.

Georgia also works great as a large, italicized header when paired with a smaller sans serif body text.

Make that two: Verdana. Both designed by Matthew Carter. You may remember him from the hit film, Helvetica.

I don’t like Verdana that much but I’m slightly irrational about that.

The reason are the curly quotes. “They are all weird for English text” (you might still justify the way they look somehow – I guess they are not technically incorrect) and flat out wrong „when you follow the German convention for curly quotes”. (Since HN uses Verdana you can see right here how screwed up those curly quotes are.)

Those quotes should look like 66 (beginning, top) and 99 (end, top) for English text and like 99 (beginning, bottom) and 66 (end, top) for German text.

I guess you could use «guillemets» instead.

Perhaps this is somewhat heretical to typography-knowledgeable people (I honestly don't know), but I've always preferred quotes to be straight up and down, as in this preview box: "

It just looks cleaner to me. Curved quotes look good in large size print, but I'm really not a fan in smaller font sizes. Do you have any examples of good quotes in small font sizes?

Curly quotes are problematic on low PPI screens. They tend to just become unidentifiable clumps. The features that make them distinct become unidentifiable, they only look slightly odd and uneven.

I do, however, think that as we are moving to higher PPI screens curly quotes do look better (and, as you can see from my German example, some languages require you to put quotes in places where you cannot put straight quotes). I, for example, really don’t think straight quotes look any good in print which is high resolution. In print all the small features of quotes are always clearly identifiable.

I actually think that Georgia has nice curly quotes but they do clump up below 12px or so font sizes. I think no font is free of that problem. I still like to use curly quotes, well, just because. I certainly can understand why you wouldn’t want to use them at small font sizes on the screen.

(There is one exception. I like to use Letter Gothic for my snail mail correspondence. Letter Gothic is a great monospaced typewriter font and to preserve that typewriter vibe I like to use straight quotes.)

Helvetica was really a fantastic film. If anyone is in the mood for an informative documentary, I would recommend it.

I can't see the article, but if you thought it was distracting, I don't think you should be downvoted. However, I'm guessing it happened because of the way you said it, FWIW.

Reply on news.ycombinator.com