TIPOGRAFÍA EN DISEÑO WEB

EL DISEÑO WEB ES 95% TIPOGRAFÍA

El 95% de la información en la web es lenguaje escrito.

Por esta razón resulta lógico decir que un diseñador web debe tener un buen entrenamiento en la disciplina de l a información escrita, en otras palabras: Tipografía

RECOMENDACIONES GENERALESJERARQUÍA

RECOMENDACIONES GENERALESTAMAÑO

RECOMENDACIONES GENERALESSELECCIÓN TIPOGRAFÍA

RECOMENDACIONES GENERALESSELECCIÓN TIPOGRAFÍA

RECOMENDACIONES GENERALESINTERLINEADO

RECOMENDACIONES GENERALESUSO DE MAYÚSCULAS

RECOMENDACIONES GENERALESCONTRASTE

RECOMENDACIONES GENERALESCENTRADO Y ALINEADO

RECOMENDACIONES GENERALESCENTRADO Y ALINEADO

UNIDADES DE MEDIDA

Normalmente, las tipografías se trabajan en píxeles.

Opcionalmente, en vez de trabajar con píxeles, podemos definir el tamaño de una tipografía como un porcentaje de la tipografía "media" definida en el ordenador del usuario.

WEB FONTS

PROBLEMÁTICA INICIAL

Durante mucho tiempo, el uso de tipografías en el diseño web, desde el diseño, tuvo un problema.

Por defecto, los navegadores web solo podían presentar el texto con las tipografías instaladas en cada equipo dependiendo de su sistema operativo (Windows, Mac, Linux,…).

IMÁGENES CON TEXTO

Una solución a este problema fue sustituir las tipografías por imágenes

Esto permite crear cualquier efecto que queramos a las tipografías.

IMÁGENES CON TEXTOCONSIDERACIOES

La página web tarda mucho en cargarse.

Los buscadores no pueden indexar el texto.

El texto no se puede utilizar en bloques fluidos.

El usuario no puede aumentar el texto y algunos pueden tener problemas de legibilidad.

El texto es complicado de actualizar.

FUENTES DE SISTEMA

Listado de tipografías que se van a intentar utilizar en orden establecido

FUENTES DE SISTEMA GRUPOS DE FUENTES MÁS UTILIZADOS

Verdana, Geneva, sans-serif

Georgia, Times New Roman, Times, serif

Courier New, Courier, monospace

Arial, Helvetica, sans-serif

Tahoma, Geneva, sans-serif

Trebuchet MS, Arial, Helvetica, sans-serif

Arial Black, Gadget, sans-serif

Times New Roman, Times, serif

Palatino Linotype, Book Antiqua, Palatino, serif

Lucida Sans Unicode, Lucida Grande, sans-serif

MS Serif, New York, serif

Lucida Console, Monaco, monospace

Comic Sans MS, cursive

FUENTES DE SISTEMA

Si la primera fuente no está disponible en el ordenador del usuario, la segunda fuente será utilizada y así sucesivamente.

FONT STACK

Sintaxis CSS

FORMATO PARA TEXTOS DESDE HOJAS DE ESTILO

Actualmente esta limitación se ha solucionado, pero los efectos web que se pueden realizar a las tipografías (negrita, subrayado, alienación…) continúan siendo muy limitados.

ESTILOS APLICABLES POR MEDIO DE CSS

Color.

Normal, negrita, cursiva, subrayado.

Alinear a derecha, izquierda, centro, justificado.

Tamaño de fuente. Se puede definir en píxeles o en un tamaño relativo (pequeño, grande).

Espaciado de palabras, espaciado de letras, espaciado entre parágrafos.

Sombreados o gradientes de colores (propiedades de CSS3).

Otros (consultar con el maquetador).

USO DE WEBFONTS

Una de las mejoras más importantes de diseño web hoy en día es el soporte para fuentes web en todos los navegadores modernos utilizando cualquier fuente que está disponible en el sitio web alojado como fuentes de Google, TypeKit y Fonts.com, entre otros.

USO DE WEBFONTS

Esto se realiza a través de la etiqueta @import y la etiqueta de enlace estándar, link dentro de los documentos HTML y CSS

USO DE WEBFONTS

Etiqueta de enlace: link

Etiqueta @import

VENTAJAS DEL USO DE WEBFONTS

Se ahorra dinero. No es necesario adquirir las fuentes en línea .

Ahorra tiempo. Se pueden integrar fuentes manualmente en su archivo de carpetas, mediante fuentes web se puede hacer con una línea de código .

Son compatibles con todas las versiones nuevas de los navegadores web y son SEO-friendly.

SERVICIOS WEBFONT

SERVICIOS

Typekithttps://typekit.com/

Webtypehttp://www.webtype.com/

Fonts.comhttp://www.fonts.com/

Google Fontshttps://www.google.com/fonts

Font Squirrelhttp://www.fontsquirrel.com/

Jugando con la tipografíaKerntypehttp://type.method.ac

Typewarhttp://typewar.com

I shot the Serifhttp://www.tothepoint.co.uk/more/fun/shoot_the_serif/

Shape typehttp://shape.method.ac

Kill Comic Sanshttp://www.objectiveinc.com/kill-comic-sans/

COMPLEMENTOSFont Finderhttps://addons.mozilla.org/es/firefox/addon/font-finder/

ADRIANA ATZIMBA TIENDA MARTÍNEZ ATZIMBATM@GMAIL.COM