La tipografía es, sin duda, uno de los principios esenciales y básicos del buen diseño web. Es una de las técnicas con mayor atracción entre la comunidad de diseño y que en los actuales tiempos está adquiriendo una gran importancia como elemento básico en la última tendencia minimalista que se está implantando en las técnicas de Packaging. A continuación veremos alguno de los factores que consiguen diferenciar a los diseñadores y haremos un pequeño repaso a las últimas tendencias acompañados de una pequeña muestra de trabajos.
Por qué he de amar y mimar la tipografía de mis diseños?
La buena tipografía no es sólo el tamaño y el estilo de una fuente o un diseño, es mucho más , marca un nivel de jerarquía visual, lo que lleva al lector a través de la página web de acuerdo con el nivel de importancia de los diferentes textos e imágenes que aparecen. Hemos de ser conscientes de que el lector navega por muchísimos medios en busca de información y llega un punto en que independientemente de la información explícita todo llega a parecer lo mismo , por tanto aportando un estilo fresco consiguiremos poseer la atención de nuestro futuro cliente o nuestra “target audience”. En un primer momento nos vamos a centrar en la cabecera.
Cuál es la función del título?
Llamar la atención! En cuanto a la mayoría de las cabeceras, la simplicidad parece ser un factor clave y común pero, llamar la atención visual de las personas a través de las simplicidad no siempre es fácil.
Fuertes colores brillantes ayudan a dar énfasis a un título y texto en blanco sobre un fondo negro aumenta la lectura debido a su alto contraste, pero como suele pasar en el diseño, todo es muy subjetivo.
Hemos seleccionado unas cuantas cabeceras que consideramos consigune a la hora de crear una página web una fuerte atracción visual una jerarquía visual bien estructurada.
Bonito tipo de letra simple y la elección de colores vivos
Fuente fuerte capitalización que requiere la atención inmediata
Restantes en minúsculas, pero con un color de gran alcance asegura que esta cabecera tendrá un gran impacto
Simple capitalizado fuente blanca sobre un fondo oscuro es siempre sorprendente. La sombra ligera agrega mayor énfasis.
Así pues, has escogido una increíble fuente como cabecera de tu página web, has pasado tiempo haciendo el tamaño, el color y la posición del mismo en tu página y todo parece estar bien. Pero entonces, ¿qué pasa con el resto de la página? si piensas en jugar con una fuente serif, como es Times New Roman o una fuente sans-serif como Arial, que espaciado de letras vas a usar? ¿Vas a usar ‘px’ de tamaño de precisión o ‘em’ de tamaño de escalabilidad? ¿Cuál es su línea de altura va a ser en relación con el tamaño de fuente? ¿Está pensando en adherirse a una red de referencia?
Son muchas las preguntas y dudas que a partir de la cabecera se nos van a presentar para terminar nuestros diseños Web a nivel tipográfico, no obstante existen unas cuantas herramientas para la comunidad de diseño que nos harán la tarea más fácil como son:
Typetester (Comparar tipos)
EM Calculator (convierte “px” a “em”)
Y sobre todo para tener una gran variedad de recursos y de tipografía, podemos pasear por los grandes buscadores de tipografía . Hace no mucho publicamos un artículo con los buscadores más útiles para encontrar y descargar de forma gratuita toda la tipografía que necisitamos. Os dejamos ya con lo que creemos es un buena combinación de fuentes entre cabecera y cuerpo
La luz de la fuente en el fondo oscuro. Poca serif y cursiva ligero hace que este texto muy interesante.
.
Tutorial, Poster retro futurista (coloresy transparencias)
“Retro space face” a partir de tipografía y brillos
[...] This post was mentioned on Twitter by Pablo Lara H, Moni, LayNg, Edwin De la Cruz, BaseKit Latino and others. BaseKit Latino said: Análisis tipografía en diseño Web http://bit.ly/dq4lg3 Como conseguir atención visual a través de la simplicidad. [...]
[...] semana pasada publicamos un artículo a cerca de la importancia de la tipografía. En el mismo hacíamos una pequeña reflexión acompañada de una muestra de trabajos sobre las [...]