TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Interactive Guide to Blog Typography

299 点作者 stevoo超过 12 年前

20 条评论

michaelmartin超过 12 年前
The interactivity here makes this guide a really great resource. People who would normally just scan (Like me) end up clicking the buttons on each step and can then read the sections that sparked an interesting change.<p>Would be nice to see it extended with some screens on using constructs like footnotes/sidenotes/captions etc.
whit537超过 12 年前
I like the "p + p" trick to not text-indent initial paragraphs:<p><a href="http://kaikkonendesign.fi/typography/section/7" rel="nofollow">http://kaikkonendesign.fi/typography/section/7</a><p>Looks like that's an "adjacent sibling selector":<p><a href="http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors" rel="nofollow">http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors</a><p>And it looks like it's well-supported since IE9:<p><a href="http://www.quirksmode.org/css/contents.html" rel="nofollow">http://www.quirksmode.org/css/contents.html</a>
评论 #4947078 未加载
arrrg超过 12 年前
I'm always conflicted on reducing contrast by making the text very slightly grey instead of black (or the background very slightly grey instead of white).<p>The problem with this is, as so many times, that on the web you have no control over what people use to display your content. On an awesome display with tons of contrast I would very much agree: straight black on straight white can be unnecessarily harsh and toning it down a bit (a bit being important here) makes everything look more pleasant.<p>However, on a bad display with low contrast further reducing contrast can be a bad idea.<p>On balance I would argue that screen technology is by now good enough to allow for slight reductions in contrast that at least have no ill effects in the vast majority of cases and have a positive effect on above average displays.<p>Oh, and another advantage of not using straight white or straight black is that you can add color (a slight tint, don't touch color if you are inexperienced) to it.<p>(Also, I would recommend searching out the worst display you can find to test your designs. That helps with more than just whether you picked the right contrast.)
评论 #4944586 未加载
评论 #4945633 未加载
josscrowcroft超过 12 年前
This is just lovely and very well-timed for people starting new year's resolution blogs next month :) Congratulations to the author.<p>Would supplement it with this: <a href="http://www.pearsonified.com/2011/12/golden-ratio-typography.php" rel="nofollow">http://www.pearsonified.com/2011/12/golden-ratio-typography....</a><p>And the super-handy related tool: <a href="http://www.pearsonified.com/typography/" rel="nofollow">http://www.pearsonified.com/typography/</a>
评论 #4942643 未加载
cooperadymas超过 12 年前
Really great guide that seems to nail some of the basics. I can tell the difference between a great reading experience and a mediocre one, but I can never seem to pinpoint the reason for that difference.<p>Is there a tool that "evaluates" a page for some of these typography basics on a live website? Maybe a bookmarklet. I know at some point it becomes a matter of looking with a trained eye and personal preference, but many of the parameters could easily be computationally evaluated. E.g. measure, line height and paragraph spacing, color/contrast, maybe even visual hierarchy.
dagrz超过 12 年前
This is awesome. I don't know much about typography but every time I try to learn something, I give up pretty quickly because of the overwhelming amount of (boring) information. I love how this guide is set out in easy to read and consume chunks that flow well from each other.
评论 #4942277 未加载
lifeformed超过 12 年前
Can anyone give some tips for using text on a dark background?
评论 #4945083 未加载
评论 #4943003 未加载
评论 #4942964 未加载
评论 #4942987 未加载
rciorba超过 12 年前
my god man, i guess it's just me but the contrast on this page is so bad i can't read a damn thing (it fades to gray 1 second after loading)
评论 #4942588 未加载
gnyman超过 12 年前
Very nice, I am just missing some references to some of your claims, for example that 65-90 characters is the perfect width . I can of course google it and find it but I think it would still be good to include it on the site.
评论 #4942891 未加载
评论 #4942820 未加载
phenomenon超过 12 年前
I just started working on side project for a better blogging platform for myself and this information will really help be have some good defaults for the app. Thanks for this very informative and very well done demo.
um304超过 12 年前
Excellent guide! I always wondered about the science behind typography but could never muster up courage to read boring theories. This was quick and fun!
aymeric超过 12 年前
I wish someone created something like that for web design. How to turn a crappy looking website into a great one, step by step, interactively.
SkyMarshal超过 12 年前
Great tutorial.<p>One question - What's hinting? Wasn't explained as clearly as it needs to be for a tutorial aimed at non-designers.
TeMPOraL超过 12 年前
Wow... that's <i>exactly</i> what I needed for a small site I'm building right now. Thanks, author(s); thanks, stevoo; thanks, HN!
hisyam超过 12 年前
The subheadings should be closer to the paragraph underneath it. Otherwise it looks freely floating between two paragraphs.
评论 #4942734 未加载
cfontes超过 12 年前
Very nice...<p>Also I am very happy to see that Twitter Bootstrap has a lot of the things in this site already there.
评论 #4945493 未加载
TommyDANGerous超过 12 年前
Great site, good read. Definitely will come back to it when I design another blog.
shaydoc超过 12 年前
An excellent presentation, the interactivity really gets the message across!
morefranco超过 12 年前
This is really awesome! Great site and info!
indiecore超过 12 年前
Section 11 seems to be broken (I popped it open in the inspector). Looks like it's not connecting the toggleBlack method up to the text.<p>Chromium 18 on Xubuntu 11.10<p>PS: This is an awesome resource. I've always noticed the things that you talk about but I never knew <i>why</i> I noticed them.
评论 #4943478 未加载