Tipografía con CSS: 2 Parte

Continuando con la explicacion anterior del uso del font stack, he aqui una forma de trabajar sobre los titulos y los párrafos correspondientes:

Títulos [superior a 12px]:

Familia tipográfica: Ideal, alternativa, común, genérica;
1. Ideal - Su selección no tiene porque ser obligatoria a lo que se considera universalmente como “seguro para web“. Hay bastantes tipografías que tienen una alta penetración en el mercado. Simplemente no hay que escoger nada muy rebuscado o serás el único en visualizarlo correctamente.
2. Alternativas - Cuando selecciones tipografías para encabezados y título, recuerda que las familias tipográficas serán más notorias y, por lo mismo, es necesario que selecciones una alternativa que esté más cerca del espíritu que del tamaño o del valor relativo. Para encontrar a esta “alma gemela” puede que desees buscar algo cercano en la clasificación tipográfica o buscar alguna creada por el mismo diseñador de tipos. Busca similitudes en las formas y contraformas de las letras.
3. Común - Solo necesitas algo ligeramente parecido y que no vaya a romper con tu diseño.
4. Genéricas - Esto es para los fanáticos que no creen en la instalación de fuentes.

Párrafos [inferior o igual a 12px]:

Familia tipográfica: Ideal, muy cercana, común, genérico;
1. Ideal - Incluso si tienes la intención de que los textos extensos o párrafos sean coherentes con los títulos, puede que desees considerar la legibilidad del tipo de letra según el largo de los párrafos. Por ejemplo: Helvetica Neue y Arial son más adecuadas para ser leídas en pequeños tamaños en pantalla que Helvetica.
2. Muy cercana - Encuentra algo que esté bien representada, una tipo multi-plataforma que no hunda tu diseño. Por ejemplo: Hay alrededor de 2 puntos de diferencia entre el ancho de Times New Roman y Georgia. Esto se multiplica por el número de caracteres total de sus párrafos y puede significar un desastre para tu otrora-bonita-web.
3. Común - Algo similar en sabor y presentación.
4. Genéricas - Una vez más, acabar con la clasificación genérica.
Ten en cuenta que si tu tipografía ideal está solo en Mac, puede que quieras usar una alternativa que sea más frecuente en Windows.

Organiza tu cascada tipográfica.

Ahora, según estas directrices y basándose en la experiencia de “tipos” más sabios, se han compilado varias lista de cascadas de familias tipográficas que abren más posibilidades para los diseñadores web y que se espera ofrezcan sustitutos apropiados:
p - ideales para párrafos o textos extensos.
t - ideales para encabezados o títulos.
Arial, Helvetica Neue, Helvetica, sans-serif - p, t
Baskerville, Times New Roman, Times, serif - p
Baskerville, Times, Times New Roman, serif - t
Cambria, Georgia, Times, Times New Roman, serif - p, t
Century Gothic, Apple Gothic, sans-serif - p, t
Consolas, Lucida Console, Monaco, monospace - p, t
Copperplate Light, Copperplate Gothic Light, serif - p, t
Courier New, Courier, monospace - p, t
Franklin Gothic Medium, Arial Narrow Bold, Arial, sans-serif - p, t
Futura, Century Gothic, AppleGothic, sans-serif - p, t
Garamond, Hoefler Text, Times New Roman, Times, serif - p
Garamond, Hoefler Text, Palatino, Palatino Linotype, serif - t
Geneva, Lucida Sans, Lucida Grande, Lucida Sans Unicode, Verdana, sans-serif - p
Geneva, Verdana, Lucida Sans, Lucida Grande, Lucida Sans Unicode, sans-serif - t
Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif - p
Georgia, Times, Times New Roman, serif - t
GillSans, Calibri, Trebuchet, sans-serif - p
GillSans, Trebuchet, Calibri, sans-serif - t
Helvetica Neue, Arial, Helvetica, sans-serif - p
Helvetica, Helvetica Neue, Arial, sans-serif - t
Impact, Haettenschweiler, Arial Narrow Bold, sans-serif - p, t
Lucida Sans, Lucida Grande, Lucida Sans Unicode, sans-serif - p, t
Palatino, Palatino Linotype, Georgia, Times, Times New Roman, serif - p
Palatino, Palatino Linotype, Hoefler Text, Times, Times New Roman, serif - t
Tahoma, Geneva, Verdana - p
Tahoma, Verdana, Geneva - t
Times, Times New Roman, Georgia, serif - p, t
Trebuchet, Lucida Sans Unicode, Lucida Grande, Lucida Sans, Arial, sans-serif - p
Trebuchet, Tahoma, Arial, sans-serif - t
Verdana, Geneva, Tahoma, sans-serif - p
Verdana, Tahoma, Geneva, sans-serif - t

Deliberadamente se dejó algunos “bodrios tipográficos” fuera (Comic Sans), porque no se sustentan según lo explicado anteriormente.
Estas cascadas de familias tipográficas son solo ejemplos y recomendaciones de lo que se puede lograr, por lo mismo no resuelven todos los aspectos del diseño web.
Para una comparación más completa, descarga el pdf. Ahí encontrarás ejemplos de títulos y textos extensos, según las familias expuestas anteriormente.