Fuentes TipográFicas
Descargar como DOCX, PDF2 recomendaciones5,957 vistas
El documento habla sobre la importancia de las fuentes tipográficas en el diseño web y la identidad corporativa. Explica que una fuente tipográfica está compuesta por un conjunto de glifos diseñados de forma estilística uniforme. También describe las clasificaciones de fuentes serif y sans serif, y cómo las fuentes transmiten valores a través de logotipos. Finalmente, recomienda crear cascadas de fuentes para la web que incluyan una fuente ideal, alternativas comunes y genéricas para garantizar la visualización correcta independ
![Teniendo en cuenta el contexto, hay un par de cosas más que considerar cuando
creamos la cascada. En primer lugar, seleccionar la tipo ideal. Desde ahí, el camino que
debemos seguir siempre será en función del contexto:
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.](https://image.slidesharecdn.com/fuentestipogrficas-090714161325-phpapp01/85/Fuentes-TipograFicas-11-320.jpg)
Fuentes TipográFicas
- 1. FuentesTipográficas Unaintroducciónsobresuusoeneldiseñowebylaidentidadcorporativa enlínea ¿Tiposdeletra? Un tipo de letra está conformado por un conjunto de glifos (letras, números y caracteres especiales) que han sido diseñados de tal forma que mantengan una unidad estilística. A menudo se confunden los términos “tipo de letra” con “fuente tipográfica”, particularmente cuando se emplean en el contexto de las publicaciones en línea, aunque un tipo de letra particular puede albergar diferentes fuentes, con variaciones ligeras entresí, quemantienen características comunes. Tiposdeletraeidentidadcorporativa Uno de los elementos inherentes a la imagen visual que desee proyectar una organización está dado por los tipos de letras que ella emplea en su nombre y lema así como enproyectosimpresos ydigitales yen medios publicitarios. Los distintos tipos de letra sirven para dar énfasis y proyectar algunos de los valores corporativos,tomemos como ejemplo loslogos dedosconocidos sitios web: Wikipedia - Technorati -
- 2. Mientras que la fuente usada en el logotipo de Wikipedia (Hoefler Text) proyecta una imagen clásica, enciclopédica, la escogida por Technorati (Neo Sans Medium) es estilizada, moderna ytiene un aire a web2.0. Clasificaciones delostiposdeletra Existen dos grandes grupos de familias tipográficas a los que nos limitaremos en esta ocasión: Fuentes serif oserifas yfuentes sans serifs, sin serifas odepalo seco. Las serifas son pequeños adornos en los extremos de los tipos. Aparte de su función decorativa, poseen una utilidad práctica: Al alargar los caracteres entre sí, ayudan a crear una continuidad visual que facilita la lectura de textos muy largos, por este motivo seutilizan ampliamente en libros ydiarios impresos.
- 3. Fuentestipográficas ylaweb: Existen miles de diseños de tipos de letras. Cada una de ellos posee rasgos únicos, aunque sutiles, que lo distinguen aunque es de esperarse que muchos de ellos se parezcan entre sí. A menudo las empresas definen dentro de su Manual de Estilo determinados tipos de letras para sus proyectos de impresión que son distintos a los que emplean en sus páginas web y sus comunicaciones en línea. Acá la cuestión tecnológica juega un papel determinante: Para que un tipo de letra se muestre correctamente en un computador, ésta debe estar instalado y funcionando correctamente. Siendo que la Internet es un espacio virtual abierto a múltiples plataformas y sistemas operativos y que cada computador puede o no tener instalado algún tipo de letra particular, las fuentes aptas para la publicación en web se reducen a un número bastantelimitado. Para escoger un tipo de letra adecuado para un sitio web debemos evaluar entonces doscriterios: Serif o sans serif - Es básicamente una cuestión de gustos personales. Ya mencionamos los beneficios que tienen sobre la legibilidad las fuentes con serifas. Sin embargo, otras personas son de la opinión que las fuentes sin serifas son mejores porque la altura x de los caracteres es mayor lo cual las hace más legibles en tamaños pequeños como los que se usan en las páginasweb(laaltura xva desdela base hasta elpuntomás alto delas letras minúsculas). Seguridad para la web - Tratamos de emplear fuentes tipográficas que estadísticamente se encuentren instaladas en el mayor número de computadoras para garantizar que las páginas puedan ser visualizadas correctamente porel mayornúmero deusuarios. Definiendofamilias defuentesparalaweb Podemos programar nuestras páginas web para que muestren un conjunto de fuentes tipográficas de forma tal que se balancee la estética con la
- 4. funcionalidad. Por ejemplo, podemos especificar como nuestra primera opción el tipo de letra que ha sido escogido para nuestros documentos impresos en el Manual de Estilos; si esta fuente no es muy común y creemos que pudiera no estar instalada en las máquinas de muchos de nuestros visitantes potenciales, podemos especificar una fuente similar que se encuentre más difundida; en tercera instancia definimos fuentes similares que, aunque no posean tanta difusión, sean comunes en diversas plataformas y sistemas operativos; en cuarto lugar podemos definir alguna fuente tipográfica que tenga mucha difusión y que se encuentre considerada universalmente apta para la web y en última instancia indicamos la familia genérica de fuentes a la que pertenecen todaslas anteriores: serif, sans-serif, cursive, monospace ofantasy. Expondremos fuentes tipográficas que pueden ser de utilidad para la realización dediversos trabajos quese efectúen. aapex abaddon abduction acadian acidbath acidic
- 9. electroh elementric elhombre elrio …………………………………………………………………………………………………………………………. na traducción, a ratos literal, de un excelente post de Nathan Ford de Unit Interactive acerca de la correcta elección y creación de Cascadas de elección tipográficas o Font Stacks. Uno de los aspectos de diseño web que ofende a los diseñadores es la falta de tipografías que se consideran seguras para su uso. Si bien es cierto que sólo hay un puñado de fuentes web seguras, tenemos a nuestra disposición muchas que pueden llegar a ser muy poderosas. Por sobre esto, el código CSS nos ofrece algo llamado cascada de familias tipográficas (font stack). ¿Quieres utilizar Gill Sans?, úsala entonces. La cascadas de familias tipográficas son listas de prioridades tipográficas, que son definidas en el atributo “font-family” del CSS, el cual proporciona la información para que el navegador busque dentro de las opciones que les damos y que además estén instaladas en el sistema. Esto significa que puedes utilizar Gill Sans, y si los usuarios no la tienen, puedes darles la opción de un sustituto adecuado que no opacará su experiencia de uso. Como Richard Rutter ya ha ilustrado, hay toda una gama de tipografías que pueden ser utilizadas para servir las necesidades de diseño. U
- 10. Lamentablemente no se está utilizando este atributo a toda su capacida, tanto en prácticas comunes de diseño web o en tecnologías asociadas al desarrollo de sitios. Hay una clara desconsideración en el proceso de creación de estas cascadas. Por ejemplo, Dreamweaver nos entrega estas opciones: * Arial, Helvetica, sans-serif * Courier New, Courier, monospace * Times New Roman, Times, serif * Georgia, Times New Roman, Times, serif * Verdana, Arial, Helvetica, sans-serif * Geneva, Arial, Helvetica, sans-serif Como pueden ver no hay muchas posibilidades y las tipos sustitutas no son las más adecuadas. Este es un ejemplo de cómo la carencia de normas tipográficas en la web están dando lugar a una toma de decisiones que encaminan hacia un mal diseño. Para que vamos a especular en cuanto a quién es el culpable de que la tipografía en la web deje mucho que desear, ya que hay tantos culpables como infracciones. Diré, no obstante, que las cascadas de familias tipográficas son, en definitiva, factores de diseño y deberían ser analizadas como tal. Todo queda en la familia: Cuando se crea una cascada tipográfica, en primer lugar hay que considerar el contexto del texto. ¿Elegiremos una tipografía para título, sub-título, párrafos ó textos extensos? Estas posibilidades determinarán el orden que debemos seguir. Sabemos que ciertas tipos funcionan mejor para títulos y encabezados y otras para textos extensos. Por ejemplo, Helvetica trabaja bien en pantalla cuando el texto esta en tamaños grandes, mientras que Helvetica Neue, debido a que es un poco más ancha, se lee mejor en tamaños más pequeños en pantalla. Arial también se ve mejor que Helvetica en tamaños pequeños. Por lo tanto, la cascada tipográfica para Helvetica puede ser diferente dependiendo de si se utiliza para textos extensos o títulos de página.
- 11. Teniendo en cuenta el contexto, hay un par de cosas más que considerar cuando creamos la cascada. En primer lugar, seleccionar la tipo ideal. Desde ahí, el camino que debemos seguir siempre será en función del contexto: 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.
- 12. 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. Para obtener más información sobre la prevalencia de determinadas tipografías según el sistema operativo, échale un vistazo a: codestyle.org/css/font-family/. (www.microsoft.com/typography letrag.com/blogosfera.php knol.googlwww.cosassencillas.com/.../25-ejemplos-obras-creativas-tipografia/ e.com/k/antonio-vzquez/...y.../12 www.poynterextra.org/.../main-spanish.htm rafaeltuduri.conectapublicidad.com/index.php www.unostiposduros.com/ www.dacostabalboa.com/es/...tipografias/4000 Google esuna de las herramientasque puedenfortalecer esta temática, para quienes desean ampliar este tema pueden aprovechar este buscador.