Find the best information about web design, web development, mobile apps and online marketing.
Responsive Design and Typography
— By Ray L.
Demand for responsive design is ushering in a new era in web design.
With responsive design or mobile websites becoming more and more of a focus, design trends are seeing a shift away from the graphic-heavy design paradigms of yesterday, towards the faster loading (and some say, more elegant) paradigm of typography.
A bit of web font history
In years past, if the font you chose for your website was not installed on a user’s computer, their browser would revert to their particular default font (or a fallback defined in the CSS), with sometimes unpredictable (and ugly) results. As a result, your designer likely advised you to stick with traditional fonts – fonts you could expect to find installed on the vast majority of site visitor’s computers such as Arial, Tahoma and Times new Roman.
Fast forward to today and we now have a huge selection of font faces to choose from via @fontface kits. These are generally open source and free to use. Two of the more prominent places are to get fonts are FontSquirrel and Google.
If this term or concept is new to you, in laymen’s terms @fontface kits allow you to choose from variety of fonts and, with some help from the kit files, know that they will render properly on all just about users computers.
The availability of a wide selection of fonts has accelerated the move from graphic-intensive sites, to typography-centric sites. This huge selection allows your designer the freedom to choose fonts that convey personality and “attitude” in their styling – jobs previously reserved for graphics.
So what’s this have to do with responsive design and mobile websites?
Typography-driven sites more readily lend themselves to a mobile environment. They are not only faster to load (saving both time and bandwidth) vs. graphics, they are much easier to present on a mobile device.
That is not to say there is no trade-off at all: there is a performance penalty so the main content of your website should still use common fonts such as Arial, Verdana, Georgia, etc. Generally speaking, @fontface fonts should be limited to headings and text in which special attention is desired (often called “callouts”).