CSS Font Stacks!

Este é um problema muito comum ao se criar websites é manter a tipografia pelo menos com a mesma “cara” independente do sistema operacional.

Dependendo do sistema operacional os tipos de fontes instaladas – e estas serão usadas na renderização do texto do seu website, por isso é necessário criar as chamadas “Font Stacks” que são “cadeias” de fontes que serão utilizadas para renderizar o seu texto. O princípio é simples, é preciso definir a propriedade “font-family” no CSS de modo que siga uma ordem de uso. Por exemplo:

body{
font-family:Verdana,Geneva,sans-serif;
}

Neste caso, a primeira tentativa de uso seria  a “Verdana” que está presente na maioria dos sistemas, se por um acaso não houver suporte para esta fonte, é utilizada a segunda fonte Geneva, num caso raro onde não encontrada esta segunda será utilizada a ultima fonte que é o tipo de fonte genérico “Sans-serif”.

A partir dessa ideologia e após uma busca pela internet encontrei vários casos onde são mostrados font stacks interessantes, esta foi a que achei melhor:

The ‘wide’ sans serif stack

body{font-family:Verdana,Geneva,sans-serif;}

The ‘narrow’ sans serif stack

body{font-family:Tahoma,Arial,Helvetica,sans-serif;}

The ‘wide’ serif stack

body{font-family:Georgia,Utopia,Palatino,'Palatino Linotype',serif;}

The ‘narrow’ serif stack

body{font-family:'Times New Roman',Times,serif;}

The monospace stack

body{font-family:'Courier New','Courier',monospace;}

Fontes:

http://www.codestyle.org/css/font-family/BuildBetterCSSFontStacks.shtml#common-font-stacks
http://www.sitepoint.com/article/eight-definitive-font-stacks/3/
http://www.inspirationbit.com/striking-web-sites-with-font-stacks-that-inspire/