Choosing the Right Font

A Practical Guide to Typography on the Web Typography is an huge field. People devote years of their lives to this ancient craft, and yet there's always something new to learn. In this article, I’ll be reviewing the major points that you should consider when selecting a typeface for a website. Practical Typography When you design for the web, you have to accept that the content will change. It's simply out of the question to take the time to kern (adjust space between individual letters) each title on a huge website. In other words, you give up some control. What I'm going to be focusing on today is practical typography. For me, this means accepting that you will never have total control over the type on your websites. Choosing a typeface, deciding on a size, these are all things we as designers have a say in. Practical typography means learning how, and more importantly why, to adjust what you do have control over. Let's get started. Readability What do you do with type? Read it! So why do so many websites make it so damned difficult to do just that? Be it tiny font sizes, crammed line-height, or just plain ugly fonts, it seems that a [...]

Choosing the Right Font2010-11-19T01:09:07+00:00

Introducing the F-Layout

The F-Layout relies upon various eyetracking studies for it’s foundational concept. These scientific studies show that web surfers read the screen in an “F” pattern – seeing the top, upper left corner and left sides of the screen most… only occasionally taking glances towards the right side of the screen. These eyetracking studies argue in favor of placing the most important elements of your site (branding, navigation, call to action) on the left side of the design. Let’s take a peek at a heatmap using Webdesigntuts+ as the example: This heatmap shows the abstract F shape that user’s general gravitate towards. Hot spots (red/orange/yellow) represent where user’s attention lingers the longest. Allow me to walk you through the general behavior pattern: Visitors start at the top left of the page. Then they scan the top of the site (navigation, subscription, search, etc.) Next they move down, reading the next full row of content… all the way to the sidebar. Last, surfers enter a “scanning pattern” once they hit the bulk of the site content. Let’s take a moment to turn this pattern into a barebones wireframe: Take a moment to notice a few key behavioral patterns; Reading is largely done the same way that a [...]

Introducing the F-Layout2010-11-19T00:58:40+00:00
Go to Top