Curso de Diseño Web VIII - Fuentes en CSS

Esta serie de entradas, tituladas Curso de Diseño Web, quieren ser un pequeño manual orientado a todo aquel que quiera iniciarse en el mundo del diseño Web partiendo de cero. Hemos hablado del funcionamiento de Internet, los enlaces entre páginas, la metodología de trabajo cuando nos enfrentamos a un proyecto Web, la publicación nuestro proyecto Web en Internet, la inclusión de imágenes en nuestras páginas , la historia y estándares HTML y como añadir estilo con CSS. En esta entrada hablamos del tipo, peso, color y tamaño de fuente.

Tipo de fuente

El uso de un tipo u otro de fuente puede dotar a nuestros diseños de un carácter propio. La siguiente imagen muestra algunos de los tipos más usados en el diseño Web.

La siguiente linea de código muestra como declaramos el tipo de letra en CSS:

body { font-family: Verdana, Geneva, Arial, sans-serif;}

Puedes especificar más de una fuente usando la propiedad font-family. Escribe el nombre de la fuente separada por comas. Escribe el nombre de la fuente como se pronuncia, incluyendo mayúsculas y minúsculas. Generalmente la especificación del tipo de fuente contiene muchas alternativas, todas de la misma familia.

¿Porqué necesitamos dar una lista de alternativas?

Porque el diseñador Web no tiene control de las fuentes que el usuario tiene instalado en su ordenador y puede suceder que la fuente especificada no este disponible. Si la fuente mencionada en CSS no se encuentra disponible, el navegador prueba con la segunda alternativa y así sucesivamente. Por esto, es común usar como última fuente el nombre de una familia tipográfica. En CSS hay cinco familias que se muestran en el siguiente gráfico.

La familia sans-serif incluye fuentes sin serif. Los serif son puntas y ganchos decorativos al final de las letras. Las fuentes sans-serif son generalmente consideradas más legibles en pantallas de ordenador que las fuentes serif. La familia serif incluye fuentes con serifs. Mucha gente asocia estas fuentes con prensa escrita.

Tamaño de fuente

Podemos fijar el tamaño de fuente de una letra por medio de la propiedad font-size. Ésta se puede fijar usando px, %, %em o palabras clave. Las siguientes lineas de código ilustran los diferentes modos.

body {font-size: 14px;}
h1 {font-size: 150%;}
h2 {font-size: 1.2em;}

En la cabecera de primer nivel h1 decimos que el tamaño de letra es 150% el heredado. Como hemos heredado 14 pixeles de body. Sabemos que el tamaño de letra de h1 es (14*150)/100 = 21px.
En la cabecera de segundo nivel h2 decimos que el tamaño de letra es 1.2em el heredado. Como hemos heredado 14 pixeles de body. Sabemos que el tamaño de letra de h2 es (14*1.2) = 16.8 px. O lo que es lo mismo aproximadamente 17 pixeles.

Podemos usar las siguientes palabras clave para definir el tamaño de letra

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

¿Por que no usar siempre pixeles?

El usar unidades relativas como % o em nos ofrece una mayor libertad a la hora de cambiar nuestros diseños. Es habitual definir el tamaño de letra en body, de modo que sea heredado por todos los elementos, y sobreescribir este valor con un unidades relativas en los elementos que deseamos. Si en algún momento queremos cambiar el tamaño de nuestra página podemos hacerlo fácilmente editando sólo un valor, el del elemento body.

Color

Podemos fijar el color de una letra por medio de la propiedad color. Esta se puede fijar usando palabras clave o una escala de rojo, verde y azul. La siguiente imagen muestra los 17 colores definidos por medio de palabras clave en CSS.

Las siguientes lineas de código ilustran los diferentes modos de definir la cantidad de rojo, verde o azul necesaria para formar nuestros colores. Podemos hacerlo en tanto por ciento, en una escala de 0-255 y en hexadecimal. Las siguiente lineas son equivalentes. Un 80% es 204 en escala 0-255. 204=(255*80)/100.

background-color: rgb(80%, 40%, 0%);
background-color: rgb(204, 102, 0);
background-color: #cc6600;

Peso de la fuente

Podemos fijar el peso de una letra por medio de la propiedad font-weight. Se pueden usar los siguientes valores:

• lighter
• normal
• bold
• bolder

Decoración del texto

Añade incluso más estilo a tu texto con la propiedad text-decoration. Por ejemplo los elementos a, los enlaces, tienen por defecto la propiedad text-decoration fijada en underline para aparecer subrayados.

• none
• underline
• overline
• line-through
• blink

Resumen

• CSS te da mucho control sobre el aspecto de tu tipografía, incluyendo tipo de fuente, peso de la fuente y estilo de la fuente.
• Una familia de fuentes es un conjunto de fuentes que comparte ciertas características.
• Las familias de fuente para la Web son serif, sans-serif, monospace, cursive y fantasy. Serif y sans-serif son las más comunes.
• Las fuentes que tus visitantes vean en tu página Web depende de las fuentes que tengan instaladas en sus ordenadores.
• Es una buena idea, especificar fuentes alternativas a la familia que desees para que se usen estas alternativas cuando el usuario no tenga instaladas las fuentes mencionadas como primera opción.
• Escribe siempre la última fuente como una familia genérica como serif o san-serif, de modo que el navegador pueda encontrar una substitución adecuada si no se encuentran otras fuentes.
• El tamaño de las fuentes se especifica normalmente usando px, em, % o palabras clave.
• Si usas pixeles (px) para especificar el tamaño de letra, le estas diciendo al navegador como cuantos pixeles de alto quieres que tengan tus letras.
• em y % son tamaños de letra relativos. Especificar el tamaño de letra usando em y % significa que el tamaño de las letras será relativo al tamaño de letra del elemento padre.
• Usar tamaños de letra relativos puede hacer que tus páginas sean más fáciles de mantener.
• Puede hacer que su texto este en negrita usando la propiedad CSS font-weight.
• Use palabras clave para definir el tamaño de letra básico en una regla para el elemento body. De modo que todos los navegadores pueden escalar el tamaño de la fuente en el caso de que los usuarios quisieran fuentes más grandes o más pequeñas.
• La propiedad font-style se usa para crear texto en cursiva o oblicuo.
• Los colores Web se usan mezclando diferentes cantidades de rojo, verde y azul.
• Si mezcla 0% de rojo, 0% de verde y 0% de azul obtiene negro.
• CSS tiene 17 colores predefinidos, incluyendo negro, blanco, rojo, azul y verde.
• Puede especificar el color que quiere usando porcentajes de rojo, verde y azul. Para ello usara valores numéricos de 0-255 para el rojo, verde o azul o usara un código hexadecimal que represente al color deseado.
• Un modo fácil de encontrar el código hexadecimal del color que quiera usar es mediante la herramienta de selección de color de una programa de edición de imágenes o alguna de las numerosas aplicaciones online.
• Los códigos hexadecimales tienen seis dígitos de 0-F. Los primeros dos dígitos representan la cantidad de rojo, los segundos la cantidad de verde y los dos últimos la cantidad de azul.
• Puede usar la propiedad text-underline para subrayar texto. El texto subrayado se confunde a menudo con el texto usado en enlaces. Debido a esto se debe usar esta propiedad con cautela.

Este curso de diseño Web online está inspirado en el libro Head First HTML with CSS & XHTML. Compre dicho libro si quiere aprender HTML y CSS rápidamente.

Etiquetas: Curso Diseño Web, tipography, Web Design