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.
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.
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".)
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!
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.
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."
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.
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.
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.)
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.
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.
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.
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.
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?
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.
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.
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...
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.
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.
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.
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.
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.
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)
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.
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.
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.
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.
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.)
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.
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/