Tipo de letra
La propiedad font-family, seguida de una tipografía concreta o de una serie de tipos de letra separadas por comas, define la apariencia del elemento HTML en cuestión.
Hay muchos tipos de letra, pero un pequeño conjunto de ellos se usan con asiduidad, como el tipo Times New Roman, Helvética, Georgia, Arial, Verdana, etc. Cada uno tiene sus propias características. Normalmente los tipos sin serifa (como arial o verdana) suelen proporcionar una estética agradable y moderna, mientras que los que sí la tienen (como times) se suelen usar para textos largos, como libros o documentos más densos. La práctica nos irá marcando la pauta de qué tipo será el más adecuado en cada caso.
h1 {font-family: Georgia, "Times New Roman", Times, Serif;}
body {font-family: Helvetica, Arial, Sans-serif; }
Con este ejemplo estamos definiendo un formato concreto para toda la página y otro para los títulos.
Al definir un valor para el cuerpo de la página, estamos estableciendo ese tipo de letra para todos los elementos excepto para aquellos en los que se indique otra cosa. Es una práctica muy habitual.
Normalmente siempre indicaremos un grupo de fuentes, ya que, si el navegador no tiene instalada la primera, recurrirá a las alternativas, hasta llegar a la última que hemos indicado, que define una fuente genérica. Las fuentes genéricas son serif, sans-serif, cursive, fantasy y monospace.
Tipos de letra no instalados
Hasta la versión 3 del estándar CSS el uso de tipografías estaba bastante acotado, ya que sólo podíamos emplear aquellos tipos de letra que intuíamos que el usuario podría tener instalados. Ahora eso no es así y podemos indicar al navegador que emplee un tipo de letra que nosotros distribuimos junto a la página web.
Si observamos la figura, veremos que junto a la página web y la hoja de estilos hemos incorporado también un par de tipos de letra, archivos con extensión .ttf. Es decir, tipografías en formato TrueType.
Para incorporar esas tipografías, modificaremos las líneas anteriores estableciéndolas de la siguiente manera:
@font-face {
font-family: TipoTitulos;
src: url('ModernAntiqua.ttf');
}@font-face {
font-family: TipoGeneral;
src: url('ConsolaMono.ttf');
}h1 {
font-family: TipoTitulos, Serif;
}body {
font-family: TipoGeneral, Sans-serif;
}
Es decir, mediante la directiva @font-face le indicamos al navegador que tenemos un nuevo tipo de letra basado en un archivo que nosotros mismos le suministramos. A su vez, en font-family emplearemos el nuevo tipo de letra. Incluso podemos poner una fuente genérica, por si hubiese algún problema de carga de los archivos.
Tamaño de letra
Para el tamaño de letra se emplea la propiedad font-size.
body {font-size: 2em;}
En el valor, además de un número, indicaremos la medida que empleamos entre una de éstas:
- %: un porcentaje para el texto hará que varíen sus tamaños basados en el valor original. Por ejemplo, body {font-size: 80%; } hace que el texto se vea un 20% más pequeño de lo normal, mientras que un 150% lo incrementaría en un 50%.
- px, cm, pt o in: para indicar medidas en píxeles, centímetros, puntos o pulgadas. No suele ser muy apropiado, porque cada navegador puede mostrar diferencias en este sentido, aunque para definir estilos de impresión sí que nos dará unos valores más precisos.
- em: es el valor recomendado por el W3C, si queremos emplear valores fijos. 1em es su valor base y equivale a 16 píxeles. 2em sería el doble de tamaño .5em la mitad (es lo mismo que 0.5em), etc.
- Valores fijos: hay ciertos modificadores fijos que podemos emplear, que van de menor a mayor (xx-small, x-small, small, medium, large, x-large y xx-large). Éstos no necesitan un número y asignan siempre el mismo tamaño.
- Valores relativos: usando smaller (más pequeño) y larger (más grande) conseguimos que la tipografía aumente o disminuya su tamaño respecto a su valor original.
Los diferentes valores se pueden mezclar, pero finalmente lo más recomendable sería emplear una escala basada en porcentajes o en em. A nuestra plantilla de ejemplo incorporaremos el siguiente bloque:
body {font-size:100%;}
h1 {font-size:3em;}
h2 {font-size:2em;}
p {font-size:0.8em;}
Conseguiremos unos títulos grandes, con un texto general al 100% de su tamaño, es decir, a 1em y unos párrafos un poco más pequeños.
Texto en negrita
La propiedad font-weight especifica si el texto irá en negrita o no, con diferentes grados:
- bold: negrita.
- bolder y lighter: valor relativo que aplica un efecto más pronunciado en el primer caso o menos en el segundo.
- 100..900: también podemos indicar con un valor entre 100 y 900 el grado de "negrita" que queremos.
- normal: hace que el texto no se muestre en negrita, saltándose cualquier otra directriz marcada por otras normas.
Mayúsculas y minúsculas
La propiedad font-variant se emplea para forzar que un texto concreto se muestre en mayúsculas con tamaño de minúsculas, lo que se conoce como versalitas ("versal" es un sinónimo de mayúsculas).
Sus valores son normal o small-caps.
Ahora todos juntos
Todas las propiedades anteriores tienen algo en común; pueden ser agrupadas mediante una propiedad única denominada font. Los valores que podemos asignarle son todos los anteriores, separados por espacios, siguiendo este orden:
- font-style (opcional)
- font-weight (opcional)
- font-variant (opcional)
- font-size
- font-family
Los valores opcionales no es necesario indicarlos. De hecho, aún se puede añadir un valor más justo antes de font-family denominado line-height, que veremos un poco más tarde.
Así una línea mínima que definiese el estilo del cuerpo de la página podría quedar así:
body {font: 1em, TipoGeneral, Sans-serif; }
Un ejemplo más completo sería éste:
p {font:italic bolder small-caps 0.8em Georgia,"Times New Roman",Serif; }
Espacios
La propiedad letter-spacing modifica el espacio entre los caracteres de una palabra y word-spacing hace lo mismo pero entre palabras.
Las medidas que se emplean en ambos casos son las mismas que ya vimos para el tamaño de letra. Además podemos emplear el valor normal para reestablecer cualquiera de los dos valores, si los hemos modificado en otro elemento. Aquí tenemos algunos ejemplos:
p {letter-spacing:normal}
p {letter-spacing: 12 px}
p {letter-spacing: -.1em}
p {word-space: 1.5 em}
p {word-space: 3 em}
En el eje vertical podemos emplear la propiedad line-height para incrementar o reducir el espacio entre líneas. Las dos líneas siguientes modifican la separanción entre líneas de un párrafo:
p {line-height:1em}
p {line-height:2em}
Mientras que la primera elimina casi por completo el espacio entre líneas, la segunda pone el texto a doble espacio.
Mayúsculas y minúsculas
Con la propiedad text-transform podemos convertir un bloque de texto completo en:
- Mayúsculas: con el valor uppercase.
- Minúsculas: valor lowercase.
- Primera en mayúsculas, resto en minúsculas: capitalize convierte la primera letra de cada palabra a mayúscula.
- Dejar el texto como está: emplearemos el valor none.
Su composición, si la segunda parte fuese, por ejemplo, una clase aplicada a un valor span, quedaría así:
span.parte2 {vertical-align:baseline}
span.parte2 {vertical-align:top}
span.parte2 {vertical-align:-.6em}
Contamos con un amplio muestrario de parámetros, como se puede observar. Podemos definir valores relativos, absolutos o utilizar algunas palabras clave como top (alineación superior), bottom (inferior), baseline (se alinean sus lineas base), etc. Este tipo de propiedades se suele modificar con algún tipo de editor, por lo que no es necesario recordar todos sus valores.
Sangrado del texto
El sangrado (a veces denominado indentación, en referencia al término inglés) consiste en desplazar a la izquierda o a la derecha la primera línea de un párrafo. Con CSS se puede realizar mediante la propiedad text-indent, seguida de algún valor numérico absoluto o relativo. Ejemplo:
p {text-indent: 2.5em}
p {text-indent: 3%}
Alineación del texto
Otro factor clásico de cualquier editor de texto es su capacidad de alinear el texto horizontalmente a la izquierda, derecha, centrado o justificado. Con CSS se realiza mediante la propiedad text-align.
Es tan simple como añadir alguna regla de este tipo:
body {text-align: justify; }
h1 {text-align: right;}
Los valores posibles son left (izquierda, el predefinido), right (derecha), center (centrado) o justify (justificado).
Espacios en blanco
La propiedad white-space controla el tratamiento que hace el navegador de los espacios en blanco. Los navegadores tienden a comprimir o ampliar esos espacios para ajustar las palabras en las líneas. Para evitarlo, podemos utilizar el valor pre con la propiedad white-space y así conseguir que éstos no se modifiquen. Esto es útil si tenemos un texto exacto, fórmulas, un poema, etc. Las rupturas de línea que tuviese el texto original se respetarán escrupulosamente.
Igualmente, si indicamos la opción nowrap, el navegador no cortará las líneas, sino que mantendrá cada párrafo o bloque de texto en la misma línea. La línea se prolongará hacia la derecha todo lo que sea necesario.
Ajuste de palabras
La propiedad word-wrap permite, con el valor break-word, la ruptura de palabras que no serían divisibles en circunstancias normales, como palabras muy largas en cuadros de texto pequeños. Su valor predeterminado es normal, permite la ruptura cuando sea posible y si no, se traslada la palabra a la línea siguiente.
Decoración del texto
La propiedad text-decoration cuenta con algunos valores para decorar una línea de texto. Por ejemplo, para un rótulo <h1>:
- h1{text-decoration:none;} elimina cualquier decoración que pueda tener un elemento.
- h1{text-decoration:underline;} el texto aparece subrayado.
- h1{text-decoration:overline;} el texto se presenta con una línea por encima.
- h1{text-decoration:line-through;} el texto se muestra tachado.
- h1{text-decoration:blink;} el texto parpadea, distrayendo la atención sobre el resto de la página. Se debe usar con mucho criterio.
Estas opciones se emplean con frecuencia para tachar un texto que ya no vale o para resaltar los estados de un enlace, mediante sus pseudoselectores. Por ejemplo, el enlace de la figura se resalta mediante un underline y un overline al pasar el ratón sobre el.
Para conseguirlo, hemos añadido estas dos líneas a nuestro archivo de estilos:
a:link {text-decoration: none; }
a:hover {text-decoration: overline underline;}
Sombras
Con CSS3 es posible añadir sombras a un texto con la propiedad text-shadow; así de fácil:
h1 { text-shadow: rgb(90,90,90) 2px 2px 4px };
Lleva cuatro parámetros:
- Color: expresado de diferentes maneras, es además opcional.
- X e Y: los dos valores siguientes son obligatorios e indican la distancia de la sombra.
- Suavizado: el último valor es opcional y especifica lo difuminada que se mostrará la sombra.
Para obtener unas sombras apropiadas, es necesario realizar algunas pruebas e intentar conseguir el efecto que buscamos. Un ejemplo:
h1 {text-shadow:rgb(160,160,90) 4px 4px 16px;}