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.
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.
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
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.)
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?
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.
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.
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 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.
[+] [-] endtwist|14 years ago|reply
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|14 years ago|reply
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.
[+] [-] ThomPete|14 years ago|reply
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.
[+] [-] kens|14 years ago|reply
[+] [-] MediaBehavior|14 years ago|reply
[+] [-] tylerrooney|14 years ago|reply
http://www.amazon.com/Thinking-Type-2nd-revised-expanded/dp/...
[+] [-] munificent|14 years ago|reply
- "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|14 years ago|reply
[+] [-] neilk|14 years ago|reply
Maybe it's some really subtle trolling for typo-nerds? I don't know.
[+] [-] grannyg00se|14 years ago|reply
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.
[+] [-] andos|14 years ago|reply
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:
[+] [-] jerf|14 years ago|reply
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.)
[+] [-] aristus|14 years ago|reply
Communication fails once again and the world is that much poorer. No one is to blame, but it's sad to see it happen.
[+] [-] biturd|14 years ago|reply
http://www.youtube.com/watch?v=y4sOfO8Ei1g
[+] [-] njharman|14 years ago|reply
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|14 years ago|reply
[+] [-] pnathan|14 years ago|reply
You mean, more like a media form that has evolved to be readable.
[+] [-] smcl|14 years ago|reply
[+] [-] flocial|14 years ago|reply
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.
[+] [-] gshahlot|14 years ago|reply
[+] [-] 5h|14 years ago|reply
[+] [-] rglover|14 years ago|reply
[+] [-] cormullion|14 years ago|reply
[+] [-] bglbrg|14 years ago|reply
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.
[+] [-] snorkel|14 years ago|reply
[+] [-] floris|14 years ago|reply
For example(in px): 10-12-14-16-20-26-32-42-52-64-84
[+] [-] BasDirks|14 years ago|reply
- 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|14 years ago|reply
And not everyone has a mac...
[+] [-] PawelDecowski|14 years ago|reply
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.
[+] [-] ugh|14 years ago|reply
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.
[+] [-] huhtenberg|14 years ago|reply
I, for one, do not have your mac.
[+] [-] skm|14 years ago|reply
http://store.informationarchitects.jp/product/ia³-template http://www.informationarchitects.jp/en/100e2r/
[+] [-] bglbrg|14 years ago|reply
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.
[+] [-] alabut|14 years ago|reply
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-...
[+] [-] fedd|14 years ago|reply
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|14 years ago|reply
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
[+] [-] evolvingstuff|14 years ago|reply
I wouldn't normally be so nit-picky, but it is an article about typography after all.
[+] [-] nwmcsween|14 years ago|reply
[+] [-] tedjdziuba|14 years ago|reply
[+] [-] unknown|14 years ago|reply
[deleted]
[+] [-] skrebbel|14 years ago|reply
[+] [-] getsat|14 years ago|reply
[+] [-] nick_urban|14 years ago|reply
Why should the person submitting the link (unless it's pg) make so much difference?
[+] [-] AJ007|14 years ago|reply
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.
[+] [-] mtogo|14 years ago|reply
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|14 years ago|reply
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.
[+] [-] zheng|14 years ago|reply