
How to Make Text Look Interesting: Minimalist Web Design - rabidpookey
http://getspace.org/typographic-contras-minimalist-web-design/
======
endtwist
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/>

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

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

~~~
tansey
In the modern marketing world, this has been re-branded as _inbound
marketing_.

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

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

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

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

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

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

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

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

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

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

~~~
blehn

      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?

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

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

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

~~~
thestranger
It looked really interesting though

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

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

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

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

~~~
neilk
It looks like Snell Roundhand to me.

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

------
snorkel
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?

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

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

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

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

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

~~~
BasDirks
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

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

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

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

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

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

[http://www.conversionvoodoo.com/blog/2010/08/3-font-tips-
to-...](http://www.conversionvoodoo.com/blog/2010/08/3-font-tips-to-increase-
your-conversion-rate/)

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

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

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

------
tedjdziuba
tl;dr

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

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

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

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

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

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

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

~~~
jokermatt999
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?

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

