Posts Tagged: fonts

Font Awesome

Great creative commons licensed icon font. I can see this really coming in handy on some future side projects.

While on the subject, if you’re in the market for web page icons (with flat colors and no fancy treatments) bundling them in a single font is often the best way to go. Fonts are vector based, making them infinitely scaleable for multi-resolution displays and you get a single http request to pull in the full icon list. This really played out well with the Climacons Font on my Blue Drop web app.

Responsive typography: the basics

Oliver Reichenstein:

The size of your body text doesn’t depend on your personal preference. It depends on reading distance. Since in general computers are further away than books, the metric size of a desktop typeface needs to be bigger than the sizes used for printed matter…

Graphic designers without Web design experience are surprised how huge good body text on the web is in comparison to printed matter. Mind you, it’s only big if you compare it side to side, not if you compare it in perspective.

I’m far from being a typographic genius but I’ve argued for years that most websites have their body text far too small. Mr. Reichenstein just provided the ammo I needed, along with a great article on web font styling.

How to choose the right face for a beautiful body

I can’t put my finger on why, but lately I’ve been skipping a lot of Smashing Magazine articles. That changed with Dan Reynold’s breakdown of body fonts. Very true to Smashing form, Reynolds’ coverage is exhaustive. A few times it becomes too exhaustive (I have doubts on the effectiveness of font ‘apertures’), but this is awesome stuff. I knew a lot of the basics (e.g. go for moderate stroke contrast, higher x-heights), but there’s a lot of info here I haven’t seen anywhere else.

Say no to faux bold

Another A List Apart, another strong article on CSS. Author Alan Stearns dives into “faux” font styles and why they should be avoided.

The 100 best typefaces of all time

As compiled by the FontShop editorial board. Each font is ranked with a description and series of images that illustrate the evolution of the font from its inception to modern times.

Larger web fonts and their appeal

Scanning through the rather gorgeous Gdgt redesign this week, I was impressed with its change in typography. The site uses Proxima Nova for its paragraph text, almost uniformly well above 12px, making reading comments and reactions on the site?s many gadgets easier to browse through. A bump in size also opens more opportunities for sizing variety within a single page, ranging from smaller 10px text for secondary sidebar information to large 16px text reserved for primary questions and notices. Overall, the typographic changes should deliver better usability and most likely generate far higher traffic.

Gdgt?s typographic change illustrates an important web design lesson: To improve the impact and readability of a text or information heavy web site, experiment with increasing the body text slightly. Try to move up from the common 10 to 12 pixel range to something larger, like 14 or 16px. It?s a practice many well designed sites are latching onto, especially in light of higher resolution displays and custom web fonts.

Continue reading…