Tipografía Web Efectiva: Reglas, Técnicas y Diseño Adaptativo

Diseño web adaptativo no son solo columnas, cuadrículas, imágenes e iconos. Todo esto no tiene sentido sin un contenido de texto. Como dijo Bill Gates una vez “El contenido es el rey.

Cuando tratamos de contenido, tenemos que hablar de tipografía web. Observar las tendencias del diseño web moderno, tener una tipografía sensible son grandes factores que cualquier diseñador o desarrollador web no debe olvidar.

Aquí, analizaremos la creación de tipografía web sensible y los factores que necesitas conocer al respecto.

Fundamentos de la tipografía

Una Buena tipografía consiste en seleccionar el tipo correcto para web o medio impreso. Desde el tipo de fuente, el color del texto hasta la longitud y el tamaño de la fuente en diferentes ventanas, una buena tipografía garantiza que la forma final de la letra genera un resultado final de la más alta calidad.

Antes de adentrarnos en el proceso de creación con éxito de una tipografía web sensible, explicamos unos pocos términos que debes entender.

Tipo de letra

Font Face

También conocida como font family. Es una colección de diseño de caracteres con un completo conjunto de letras, números, símbolos, caracteres y grosores especiales.

Font

Font

Este es el actual fichero que contiene la información sobre la letra utilizada, como el tipo, grosor, ancho, estilo, etc…

Línea de base

Baseline

Esta es la línea donde se colocan las letras y donde las formas se amplían.

Altura mayúsculas

Cap height

Esta es la altura de las letras mayúsculas por encima de la línea de base.

X-altura

x height

También llamado tamaño del corpus. Es la distancia entre la línea de base y la línea media (la mitad de la distancia entre la línea de base y la altura)

Descensor

Descenders

Es la parte de la letra que se extiende sobre bajo la línea de base.

Seguimiento

También llamado espacio entre letras. Es el aumento o disminución uniforme del espacio entre las letras.

Kerning

El proceso de ajuste del espacio entre caracteres individuales en glifos de varias anchuras.

Líder

También llamado altura de línea en CSS. La distancia entre las líneas de base de sucesivas líneas o tipos.

Puntos a considerar en la tipografía web

Las palabras, frases y oraciones tienen significado, pero cada carácter puede tener emociones. Al margen de ser sensible, debes también tener en cuenta el presentar una mejor tipografía web a tu audiencia.

El diseño completo no tendrá sentido si tu audiencia no lo entiende o no se siente atraída por el contenido. En tipografía web existen cuatro elementos básicos:

  • Tipo
  • Color
  • Textura
  • Imagen

Todos ellos tienen un gran efecto en el resultado final de tu tipografía, pero el tipo magnificará la expresividad de tu mensaje.

Hay cinco factores que pueden ayudar a crear una tipografía web presentable.

1. Elige el mejor tipo de letra que corresponda a tu tema

Hoy en día muchas web utilizan los mismos tipos de letra. Sí, lo has adivinado; me refiero a Arial y Helvética. Sin embargo, tendría más sentido si pudieras coordinar los tipos de letra con tu mensaje.

Por ejemplo, si tu página web habla sobre libros infantiles, ¿no sería mejor si utilizaras algo como DK Crayon Crumble o Little Miss Priss en el encabezamiento?

No me refiero a que tengas que hacer esto todo el tiempo, pero el objetivo es estar seguro de que la tipografía concuerda con la audiencia a la que te diriges y que el texto es claro y legible.

2. Utiliza fuentes web

Una de las mayores mejoras en el diseño web de hoy en día es el soporte para fuentes web en todos los buscadores modernos vía @import pedido o link estándar. Echa un vistazo a la demo más abajo.

Usar etiqueta @import:

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

Usar la etiqueta de enlace estándar:

<link href='http://fonts.googleapis.com/css?family=Open+Sans'
rel='stylesheet' type='text/css'>

Esto significa que puedes utilizar cualquier cuenta que esté disponible en la web tales como Google Font, Typekit y Fontdeck. A continuación indicamos las ventajas de utilizar fuentes web:

  • Ahorro de dinero. No necesitas comprar fuentes online.
  • Ahorro de tiempo. Mientras puedes integrar fuentes manualmente a tus carpetas, el uso de fuentes web puede realizarse con una línea de código.
  • Son compatibles en todas las nuevas versiones de navegadores web y son compatibles con SEO.

3. Utiliza combinaciones de color apropiadas

Una de los mayores errores cometidos por los diseñadores web, actualmente, es utilizar combinaciones innecesarias de colores en sus webs. Recuerda que el buen diseño web se identifica por cómo funciona y por lo bueno de su diseño.

Hablando de diseño, no se trata de diseñar tu web aleatoriamente y utilizar un montón de colores que no pegan especialmente con tu texto y el fondo de tu web. Esto hará que tu texto sea ilegible y provocará daños a la vista de los visitantes.

Pero ¿cómo utilizar las combinaciones de color adecuadas? No existen reglas generales, pero sí algunas guías.

  • Utilizar el adecuado contraste o distinción de colores entre el texto y el fondo como suggested by W3C. Los colores con el mismo valor pero diferente matiz pueden facilitar la lectura en una persona con buena vista, pero no a los daltónicos. Es importante probar el contraste antes de aplicarlo en tu diseño. Puedes utilizar esta magnífica herramienta para simular contrastes.
  • Utiliza colores planos UI en la medida de lo posible. Estos colores son claros y tienen muy buenas combinaciones que no dañan a la vista. Compruébalo flatuicolors.com para más información, consulta Flat UI.

4. Utiliza texto en lugar de imágenes

Como todos sabemos, las imágenes ralentizan las webs. A menudo las imágenes son el único modo de forzar el navegador web a mostrar la fuente y disposición exactas que queremos. Sin embargo, esto puede no funcionar. Utilizar texto real es la mejor manera de alcanzar el diseño web sensible. Recuerda, busca motores que no puedan leer imágenes pero sí texto.

5. Utiliza estilo de texto fallback cuando recortes el texto

Puede llegar un momento en el que necesites recortar texto o imágenes ara crear una mezcla de imagen y texto. El problema aquí es que no todos los navegadores admiten esta técnica.

El mejor modo de hacerlo es utilizando el programa CSS selector de navegador de Paul Irish . Es un pequeño programa que detecta el navegador y manipula los estilos que quieres para que aparezcan en los navegadores específicos. Así es como se utiliza este genial programa.

  • Descarga el plugin here y enlázalo con tu sección principal:
<script src="css_browser_selector.js" type="text/javascript">
</script>
  • Marca los atributos CSS (o el id o la clase) con el código de cada navegador que quieres cambiar en tu hoja de estilos.
.opera #header { margin: 20px; }
.webkit #header { margin: 30px;  }
.ie #header{ margin: 10px; }
.ff3 #header {margin: 15px; }

Para más información sobre este genial programa, visita thissite.

Reglas básicas de la tipografía sensible

Muchos de los elementos tipográficos fundamentales pueden manipularse con CSS. Sin embargo, realmente hace más que adaptar u optimizar el tamaño del texto de cada ventana. Ahora que ya hemos hablado de cómo puede conseguir una tipografía web presentable, es hora de hablar sobre las reglas básicas que debemos aplicar para conseguir una mejor tipografía sensible.

1. Utiliza rem en lugar de píxeles y ems

El uso de píxeles y ems es muy popular. Mientras los píxeles son fijos, los ems son unidades relativas al elemento principal. Esto significa que cuando modificas el tamaño del navegador, es difícil averiguar el tamaño que necesitas indicar para conseguir el resultado a vista que quieres alcanzar.

La mejor opción es utilizar rems. Rems o también llamados “root em” son siempre iguales al tamaño de la fuente de la raíz del elemento HTML y, lo que es más excitante, es lo que sirve de soporte a los navegadores modernos.

html{
  font-size: 16px;   // 1rem = 16px
}
h1{
  font-size: 1.9rem // 19px
}
h2{
   font-size: 1.8rem // 18px
}

En este ejemplo he definido un tamaño de fuente base de 16px que es la referencia del tamaño de fuente del otro elemento. El tamaño del h1 y h2 cambiará cuando cambie la ventana.

Para las versiones antiguas de Internet Explorer, podemos especificar el tamaño de fuente en unidades px primero, y definir las unidades rem junto con ello y tendremos un texto redimensionable en todos los navegadores.

html{
  font-size: 16px;   // 1rem = 16px
}

h1{
  font-size: 19px; font-size: 1.9rem;
}

h2{
   font-size: 18px; font-size: 1.8rem;
}

2. Experimenta con unidades rem en diferentes ventanas

Ahora que sabes cómo usar los rem, necesitas experimentar con diferentes tamaños de pantalla vía @a medios de comunicación. El resultado dependerá del tipo de letra. Necesitas también utilizar tamaños de fuente actuales y ver si consigues el resultado que quieres.

@media (max-width: 640px) {
h1 {
    font-size:1.7rem
}
h2{
	font-size: 1.6rem
}
}

@media (min-width: 480) {
h1 {
    font-size:1.9rem
}
h2{
	font-size: 1.8rem
}
}

Ten en cuenta que en pantallas más pequeñas el tamaño de fuente es un poco mayor comparado con pantallas más anchas. Esto hará que el texto sea más legible para usuarios de teléfono o tablet.

3. Utiliza CSS3 pseudo-clases para concretar estilos específicos

Una de las principales características del CSS3 es que puede establecer una letra, línea o párrafo específico y darle un estilo diferente. Esto aporta al diseñador la libertad de redimensionar o ajustar el texto en diferentes tamaños.

<iframe width="100%" height="300" src="http://jsfiddle.net/9g298eo1/24/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

Como puedes ver en el ejemplo que mostramos a continuación, utilizamos las siguientes CSS3 pseudo-clases:

  • primero de los tipos – selecciona el primer elemento del párrafo
  • primera línea – selecciona la primera línea del párrafo
  • primera letra – selecciona la primera letra del párrafo

4. Controla tus medidas

Como sugiere Robert Bringhurst, la medida ideal de longitud de línea es de 45 a 75 caracteres por línea. Para un diseño web sensible, la medida no es fácil de controlar, sobre todo en ventanas pequeñas. Si no puedes controlar la medida, no podrás controlar que tu texto sea legible.

Hay un buen artículo de Elliot Jay Stocks que habla sobre este asunto, de cómo utilizar recursos de los medios para lograr una longitud de línea y una medida conveniente.

Utilizar programas

A pesar de que existen muchos programas jQuery que podemos utilizar para una tipografía web sensible online, el más popular es FlowType.js. Este programa jQuery cuenta los caracteres por línea y establece el tamaño de fuente y define la longitud de línea en cualquier ventana.

Vamos a echar un vistazo de cerca a cómo funciona.

Paso 1: Establecer los valores de la tipografía

Comienza añadiendo los ajustes CSS básicos establecidos para FlowType.js.

body {
   font-size: 16px;
   line-height: 20px;
}

h1,h2,h3,h4,p {
   font-family: inherit;
   font-size: inherit;
}

h1 {
   font-size: 3em;
   line-height: 1em;
}

h2 {
   font-size: 2em;
   line-height: 1em;
}

p{
   font-size: 1em;
   line-height: 1em;
}

Estos valores serán usados por FlowType.js y cambiará cada valor cuando se redimensione la ventana. Establecer el tamaño de fuente y la longitud de línea te permitirá accede a configurar tu web cuando JavaScript esté desactivado.

Paso 2: Enlaza FlowType.js con tu sección principal

Descarga FlowType.js e inclúyela en la sección principal de tu documento html.

<script src="flowtype.jQuery.js"></script>

Paso 3: Abre FlowType.js

Para activar FlowType.js, solo necesitamos añadir los siguientes códigos, justo antes de cerrar </body> tag.

<script>
$(function () {
    $('body').flowtype();
});
</script>

Paso 4: Personaliza los ajustes de FlowType.js

Hay varios valores que FlowType.js tiene por defecto, pero puedes modificarlos en los ajustes que tú quieras. Para ello, solo necesitas incluir algunas opciones en tu código jQuery.

$('body').flowtype({
   minimum   : 500,
   maximum   : 1920,
   minFont   : 16,
   maxFont   : 40,
   fontRatio : 34,
   lineRatio : 1.50
});

[/js]

Además de flowtype.js hay varios programas jQuery que pueden ayudarte a crear tipografías web sensibles. Echa un vistazo a los siguientes programas jQuery:

  • FitText – Un programa jQuery que flexibiliza los tamaños de fuente haciendo que el texto y los titulares sean más fluidos.
  • js – Un genial programa para una tipografía web radical. Te ayuda a controlar el espacio entre los caracteres del texto en solo un código de línea jQuery.
  • Medidas sensibles – Una guía simple que te permite crear medidas ideales para los textos.

¿Y ahora qué?

El diseño sensible está cada vez más avanzado. Debemos pensar que las imágenes, esquemas y cuadrículas son lo que realmente importa. Sin embargo, no podemos olvidar que el contenido o el texto es lo que lee la gente y los motores de búsqueda.

Al igual que pones tu esfuerzo en el diseño y las imágenes, debe también esforzarte en cómo va a aparecer el texto. Después de todo, lo que más importa es que tu texto sea legible, entendible y fácil a la vista en todas las ventanas.

Si quieres mantenerte al día con nuestros artículos, puedes seguirnos en Twitter, Facebook, Google+, o incluso suscribiéndote a nuestro hilo RSS.

Boletín de noticias

0 Comentarios

No hay comentarios aún

Deja tu respuesta

*
* Longitud mínima: 20 caracteres