WHAT ABOUT THAT TYPOGRAPHY?

One of trends in web design, coming our way this year is focusing on content. Assuming significant content of the page is foremost presented by text, readability of that text tends to became focus of designers attention. Helpful fact is the abundance of fonts available to designers through webfont-kits.

On the other hand that same abundance includes font types whose optimization for screen media type is, at least, pretty questionable. Responsive design in that case makes things even more complicated. One pretty font face on 1024px screen, could became quite ugly on 1080p, or unable to read on that 332ppi of those little perfect devices in our pockets. Even worse, problem is quite complex, and includes many aspects, such as ligature, heights, anti-aliasing, etc...

Other that those traditional techniques for improving text rendering, CSS seems to be in searching of something new, better, but how successful? Acrobatics and tricks with CSS's new rules, by my modest opinion, till now didn't offer worthy results.

Check out the "font-smoothing" rule example in a picture below:

font-smoothing rule

Maybe you see some difference, either my sight have weakened or have a crap of screen (which I doubt), but I don't. Yet, if you do, keep in mind that that particulate rule is supported only by webkit browser engine.

Other, at a first glance, witty trick should be "text-rendering" rule, which should instruct browsers what to optimize, when rendering text ( developer.mozilla.org/en-US/docs/CSS/text-rendering ). Let's see how that turned out:


text-rendering There we have "text-rendering" property with "optimizeLegibilty: value. Any spectacular results, no?

Well, what to do than? Abundance of choices is mainly good thing, but as templar knight said to Indy, "choose visely"! On-line tools such as www.fontsquirrel.com or www.google.com/fonts/ not only provide plenty of font faces, but also provide a nice previews. Use them, and use them intensively. Use your tablets, phones etc. and you'll see how they behave on various screens. That should make your decision much easier.

Combine your choices with that text-shadow, line-height, letter-spacing, and so on, CSS properties and you'll achieve nice results, no doubt. Even without braking your brains about ligatures and kernings...

Thanks to maxvoltar.com and aestheticallyloyal.com on nice examples