Krypton Solid

Guía de pilas de fuentes CSS: técnicas y recursos

Guía de pilas de fuentes CSS: técnicas y recursos

Pilas de fuentes CSS son una de esas cosas que eluden a muchos diseñadores. Muchos se apegan a las pilas básicas que Dreamweaver recomienda automáticamente o van incluso más básicas con solo especificar una única fuente segura para la Web. Pero hacer cualquiera de esas cosas significa que te estás perdiendo algunas excelentes opciones de tipografía. Las pilas de fuentes pueden hacer posible mostrar al menos a algunos de sus visitantes la tipografía de su sitio exactamente de la manera que desea sin mostrar a todos los demás una fuente predeterminada. Siga leyendo para obtener más información sobre el uso y la creación de pilas de fuentes efectivas con CSS. Se recomienda una gran variedad de pilas de fuentes. Parece que cada diseñador tiene sus propios favoritos, lo que consideran la pila de fuentes «definitiva». Si bien no existe una pila de fuentes definitiva, hay algunas cosas a tener en cuenta al usar o crear sus propias pilas. Primero que nada, asegúrate de incluir siempre una familia de fuentes genérica al final de sus pilas de fuentes. De esta manera, si por alguna extraña razón la persona que visita su sitio no tiene prácticamente ninguna fuente instalada, al menos no terminará mirando todo en Courier New. En segundo lugar, hay una fórmula básica para crear una buena pila de fuentes: ‘Fuente preferida’, ‘Lo mejor que sigue’, ‘Algo común y parecido’, ‘Similar seguro para la Web’ y ‘Genérico’. No hay nada de malo en tener más de una fuente para cualquiera de ellas, pero trate de mantener su pila de fuentes razonablemente corta (de seis a diez fuentes es un número máximo bastante bueno).

Pilas de fuentes CSS son una de esas cosas que eluden a muchos diseñadores. Muchos se apegan a las pilas básicas que Dreamweaver recomienda automáticamente o van incluso más básicas con solo especificar una única fuente segura para la Web.

Pero hacer cualquiera de esas cosas significa que se está perdiendo algunas excelentes opciones de tipografía. Las pilas de fuentes pueden hacer posible mostrar al menos a algunos de sus visitantes la tipografía de su sitio exactamente de la manera que desea sin mostrar a todos los demás una fuente predeterminada. Siga leyendo para obtener más información sobre el uso y la creación de pilas de fuentes efectivas con CSS.

Es posible que le interesen las siguientes publicaciones relacionadas:

Creación de sus propias pilas de fuentes

Se recomienda una gran variedad de pilas de fuentes. Parece que cada diseñador tiene sus propios favoritos, lo que consideran la pila de fuentes «definitiva». Si bien no existe una pila de fuentes definitiva, hay algunas cosas a tener en cuenta al usar o crear sus propias pilas.

Primero que nada, asegúrate de incluir siempre una familia de fuentes genérica al final de sus pilas de fuentes. De esta manera, si por alguna extraña razón la persona que visita su sitio no tiene prácticamente ninguna fuente instalada, al menos no terminará mirando todo en Courier New. En segundo lugar, hay una fórmula básica para crear una buena pila de fuentes: ‘Fuente preferida’, ‘Mejor opción siguiente’, ‘Algo común y parecido’, ‘Similar seguro para la Web’, ‘Fuente genérica’. No hay nada de malo en tener más de una fuente para cualquiera de ellas, pero trate de mantener su pila de fuentes razonablemente corta (de seis a diez fuentes es un número máximo bastante bueno).

Tercero, asegúrate de preste atención a la escala de las fuentes en tu pila. Una cosa común que veo en las pilas de fuentes es la inclusión de Verdana y Arial o Helvetica en la misma pila. Verdana es una fuente muy ancha; Arial es relativamente estrecho. En efecto, esto puede hacer que la tipografía de su sitio parezca muy diferente para los diferentes visitantes. Lo mismo ocurre con Times New Roman (estrecho) y Georgia (ancho). Teniendo en cuenta que tanto Arial / Helvetica como Verdana se consideran seguros para la web (lo mismo ocurre con Times / Times New Roman y Georgia), no tiene mucho sentido incluir ambos.

Pilas de fuentes comunes

Muchos diseñadores han intentado crear pilas de fuentes ideales. Si bien todavía tengo que ver una pila de fuentes «definitiva», hay muchas realmente geniales entre las que elegir si no quiere tomarse el tiempo para crear sus propias pilas personalizadas. Éstos son algunos de los buenos que hemos visto.

Mejores pilas de fuentes CSS

Unit Interactive publicó un artículo el verano pasado con una colección de pilas de fuentes CSS «mejores». La lista es extensa, con pilas de fuentes que deberían satisfacer a casi todos. Las fuentes se enumeran de acuerdo con si son apropiadas para los titulares o el contenido del cuerpo.

Aquí se enumeran algunos para el texto del cuerpo:

  • Baskerville, ‘Times New Roman’, Times, serif
  • Garamond, ‘Hoefler Text’, ‘Times New Roman’, Times, serif
  • Ginebra, ‘Lucida Sans’, ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, sans-serif
  • GillSans, Calibri, Trebuchet, sans-serif

Para titulares:

  • Georgia, Times, ‘Times New Roman’, serif
  • Palatino, ‘Palatino Linotype’, ‘Hoefler Text’, Times, ‘Times New Roman’, serif
  • Tahoma, Verdana, Ginebra
  • Trebuchet, Tahoma, Arial, sans-serif

Captura de pantalla

Y algunos que están equilibrados para el cuerpo o el texto del título:

  • Impacto, Haettenschweiler, ‘Arial Narrow Bold’, sans-serif
  • Cambria, Georgia, Times, ‘Times New Roman’, serif
  • ‘Copperplate Light’, ‘Copperplate Gothic Light’, serif
  • Futura, ‘Century Gothic’, AppleGothic, sans-serif

Captura de pantalla

8 pilas de fuentes web definitivas

Este artículo de Sitepoint escrito por Michael Tuck enumera ocho pilas de fuentes que se supone que son las pilas definitivas para cualquier aplicación. Se basa en una fórmula básica de: ‘fuente exacta’, ‘alternativa más cercana’, ‘alternativas para toda la plataforma’, ‘opciones universales (multiplataforma)’, genérico. Mi mayor problema con algunas de estas pilas de fuentes es su longitud; ¿Es realmente necesario incluir 17 fuentes diferentes en una sola pila de fuentes? No lo creo…

Captura de pantalla

Las pilas de fuentes:

  • La pila serif basada en Times New Roman: Cambria, ‘Hoefler Text’, Utopia, ‘Liberation Serif’, ‘Nimbus Roman No9 L Regular’, Times, ‘Times New Roman’, serif
  • Una pila de serif moderna basada en Georgia: Constantia, ‘Lucida Bright’, Lucidabright, ‘Lucida Serif’, Lucida, ‘DejaVu Serif’, ‘Bitstream Vera Serif’, ‘Liberation Serif’, Georgia, serif
  • Una pila de serif basada en Garamond más tradicional: ‘Palatino Linotype’, Palatino, Palladio, ‘URW Palladio L’, ‘Book Antiqua’, Baskerville, ‘Bookman Old Style’, ‘Bitstream Charter’, ‘Nimbus Roman No9 L’, Garamond , ‘Apple Garamond’, ‘ITC Garamond Narrow’, ‘New Century Schoolbook’, ‘Century Schoolbook’, ‘Century Schoolbook L’, Georgia, serif
  • La pila sans serif basada en Helvetica / Arial: Frutiger, ‘Frutiger Linotype’, Univers, Calibri, ‘Gill Sans’, ‘Gill Sans MT’, ‘Myriad Pro’, Myriad, ‘DejaVu Sans Condensed’, ‘Liberation Sans’, ‘Nimbus Sans L’, Tahoma, Ginebra, ‘Helvetica Neue’, Helvetica, Arial, sans-serif
  • La pila sans serif basada en Verdana: Corbel, ‘Lucida Grande’, ‘Lucida Sans Unicode’, ‘DejaVu Sans’, ‘Bitstream Vera Sans’, ‘Liberation Sans’, Verdana, ‘Verdana Ref’, sans-serif
  • La pila sans serif basada en Trebuchet: ‘Segoe UI’, Candara, ‘Bitstream Vera Sans’, ‘DejaVu Sans’, ‘Bitsream Vera Sans’, ‘Trebuchet MS’, Verdana, ‘Verdana Ref’, sans-serif
  • La pila «Impact» sans serif más pesada: Impact, Haettenschweiler, ‘Franklin Gothic Bold’, Charcoal, ‘Helvetica Inserat’, ‘Bitstream Vera Sans Bold’, ‘Arial Black’, sans-serif
  • La pila Monospace: Consolas, ‘Andale Mono WT’, ‘Andale Mono’, ‘Lucida Console’, ‘Lucida Sans Typewriter’, ‘DejaVu Sans Mono’, ‘Bitstream Vera Sans Mono’, ‘Liberation Mono’, ‘Nimbus Mono L ‘, Mónaco,’ Courier New ‘, Courier, monoespacio

El mito de las fuentes ‘seguras para la Web’

El mito de las fuentes ‘seguras para la Web’ de Safalra.com ofrece hasta cinco pilas de fuentes sencillas y directas para tipografía web. Estas pilas son bastante básicas en lo que respecta a la mayoría de las pilas de fuentes recomendadas, pero son perfectamente adecuadas para muchas aplicaciones, además de ser un buen punto de partida para crear sus propias pilas.

  • La pila sans serif ‘ancha’: Verdana, Ginebra, sans-serif
  • La pila sans serif ‘estrecha’: Tahoma, Arial, Helvetica, sans-serif
  • La pila de serif ‘ancha’: Georgia, Utopia, Palatino, ‘Palatino Linotype’, serif
  • La pila de serif ‘estrecha’: ‘Times New Roman’, Times, serif
  • La pila monoespaciada: ‘Courier New’, Courier, monoespacio

Captura de pantalla

Herramientas

Matriz de fuentes

Matriz de fuentes es una herramienta de comparación de fuentes que enumera las fuentes incluidas en Windows XP, Windows Vista, Mac OS X Tiger, Mac OS X Leopard, Microsoft Office (2003, 2007 y 2004 para Mac) y Adobe Creative Suite. El cuadro muestra qué paquetes de software y sistemas operativos vienen con qué fuentes, para que pueda tener una buena idea de cuán común puede ser una fuente en particular. Esta es una herramienta increíblemente valiosa para aquellos que buscan crear sus propias pilas de fuentes personalizadas.

Captura de pantalla

Guía completa de fuentes preinstaladas en Linux, Mac y Windows

Aquí está otro gráfico que muestra las fuentes comúnmente instaladas en máquinas Linux, Mac y Windows, agrupadas por familia y similitud. Es otra herramienta realmente valiosa para los creadores de pilas de fuentes.

Captura de pantalla

Typechart

Typechart muestra fuentes comunes y seguras para la Web y sugiere diferentes tamaños y estilos para títulos, párrafos y otros elementos tipográficos. Hay un montón de opciones de navegación diferentes, y puede obtener una vista previa de la apariencia de las fuentes en las máquinas Windows y Mac antes de descargar el CSS. El único inconveniente de Typechart es que solo incluye un puñado de fuentes: Arial / Helvetica, Cambria, Georgia, Lucida Grande, Lucida Sans Unicode, Trebuchet MS y Verdana.

Captura de pantalla

Probador de mecanografía

Probador de mecanografía le permite probar hasta tres fuentes una al lado de la otra. Esta puede ser una excelente manera de probar pilas de fuentes para ver cuáles serán las diferencias a medida que las pilas se degraden. Puede usar cualquier fuente en su sistema, aunque clasifica las fuentes por seguridad web, predeterminado de Windows y predeterminado de Mac, lo que facilita la creación de pilas sin otros materiales de referencia.

Captura de pantalla

Generador de pilas de fuentes

Code Style ofrece Font Stack Builder para crear pilas de fuentes basadas en la familia de fuentes y si las fuentes se instalan generalmente en máquinas con Windows, Mac o Linux. Puede agregar tantas fuentes como desee y le mostrará una cuadrícula con qué tan comunes son esas fuentes en diferentes tipos de máquinas.

Captura de pantalla

Artículos

Hay cientos de artículos sobre pilas de fuentes. Algunos se han mencionado anteriormente, pero hay muchos otros que merecen algún reconocimiento. A continuación, presentamos algunos:

Sitios web sorprendentes con pilas de fuentes que inspiran

Este artículo cubre veinte sitios web diferentes con excelentes pilas de fuentes. Se tratan las fuentes básicas comunes y seguras para la Web, junto con pilas de fuentes más creativas. Es un gran recurso para inspirarte antes de crear tus propias pilas.

Captura de pantalla

Mejores familias de fuentes en CSS

Este artículo de Devlounge ofrece una descripción muy breve de las pilas de fuentes favoritas del autor, así como algunos consejos para crear sus propias pilas.

Captura de pantalla

La nueva tipografía

Este artículo ofrece una excelente descripción general de la creación de pilas de fuentes y una buena tipografía web. Se mencionan muchos consejos, incluidas las fuentes que se deben evitar usar en las mismas pilas de fuentes y por qué.

Captura de pantalla

Resumen: pilas de fuentes CSS

Este artículo es una excelente introducción a las pilas de fuentes CSS y cómo usarlas de manera efectiva. Incluye algunas herramientas, consejos y otra información sobre cómo crear sus propias pilas de fuentes o elegir cuáles usar.

Captura de pantalla

Excelentes ejemplos de pila de fuentes

Aquí hay un puñado de sitios que tienen excelentes pilas de fuentes y una gran tipografía en general. Puede encontrar más ejemplos en Typesites.

Captura de pantalla

Pila de fuentes: «Helvetica Neue», Helvetica, Arial, sans-serif

Captura de pantalla

Pila de fuentes: «Lucida Fax», Georgia, Helvetica, Arial, sans-serif

Captura de pantalla

Pila de fuentes: Baskerville, Palatino, ‘Palatino Linotype’, Georgia, Serif

Captura de pantalla

Pila de fuentes: «Lucida Grande», Ginebra, Helvetica, sans-serif (utilizado para algunos de los encabezados y metainformación)

Captura de pantalla

Pila de fuentes: «Adobe Caslon Pro», «Texto de Hoefler», Georgia, Garamond, Times, serif (pila bastante buena para lo que es principalmente una página de espera)

Captura de pantalla

Pila de fuentes: «Courier nuevo», Courier, «Andale Mono»

Captura de pantalla

Pila de fuentes: Gotham, “Helvetica Neue”, Helvetica, Arial, sans-serif;

Captura de pantalla

Pila de fuentes: Arial, sans-serif

Captura de pantalla

Pila de fuentes: «Lucida Grande», Tahoma, Verdana, sans-serif

Captura de pantalla

Pila de fuentes: Helvética, Arial, sans-serif

Captura de pantalla

Pila de fuentes:«Arial negro», arial, sans-serif

Captura de pantalla

Pila de fuentes:Arial, Helvética, sans-serif

Captura de pantalla

Pila de fuentes: Arial, «Helvetica Neue», Helvetica, sans-serif

Captura de pantalla

Pila de fuentes:«Myriad Pro», Helvetica, Arial, sans-serif

Captura de pantalla

Pila de fuentes: «Lucida Grande», Arial, Verdana, Helvetica, sans-serif

Captura de pantalla

Pila de fuentes: Georgia, «Times New Roman», Times, serif

Deja un comentario