Uno de los puntos importantes a la hora de realizar una página web es el texto que en ella se incluye. Para un desarrollador que está comenzando, el primer contenido que produce es principalmente texto. Para que esto no sea monótono, se pueden utilizar varios métodos para modificar el texto (fuente, color, tamaño) y que tus primeras páginas web sean un poco diferentes.
En HTML/XHTML hay un elemento que se puede utilizar, aunque esté desaprobado. Se trata de la etiquetas <font>.
La etiqueta font es un elemento en línea, que debe ir dentro de un elemento en bloque (como un párrafo, por ejemplo), dentro del cual se da estilo al texto introducido dentro de la etiqueta. Anteriormente existía otro elemento, la etiqueta <basefont>, pero los navegadores web han dejado de dar soporte a esta etiqueta y, a día de hoy, ya no funciona en ellos, con lo que no la comentaremos en esta entrada.
Cuando utilicemos font, para modificar el texto se utilizan estos tres atributos:
- color: Especifica el color del texto en el documento.
- face: Especifica la fuente del texto del documento.
- size: Especifica el tamaño del texto del documento.
Algunos ejemplos de uso de estas etiquetas son:
- Texto en color rojo:
<p>Texto en <font color="red">color rojo</font></p>
- Texto con fuente Verdana
<p>Texto con fuente <font face"Verdana">Verdana</font></p>
- Texto con tamaño mayor (tamaño 5)
<p>Texto con tamaño <font size="5">mayor (tamaño 5)</font></p>
Para poder trabajar con las fuentes que queramos incluir en nuestro diseño, será necesario linkarlas a nuestra web. Para ello hay que añadir la siguiente etiqueta dentro de la cabecera del documento HTML:
<link href="dirección de la fuente" rel="stylesheet"/>
El campo dirección de la fuente debe ser la dirección donde esté alojada la fuente que vayamos a utilizar. Se pueden encontrar fuentes en diversos sitias webs, como por ejemplo Google Fonts. Dentro de esta web podemos encontrar diversas fuentes de uso libre. Copiando el enlace tipo que nos facilita (misma estructura que se indica arriba) a nuestro sitio web tendremos acceso a la fuente que queramos. Si queremos utilizar la fuente Open Sans (facilitada en la web), tendremos que introducir la siguiente etiqueta link:
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
Ahora, cuando utilicemos la etiqueta font, el atributo face debería tener el valor «Open Sans».
<font face="Open Sans">Texto con fuente Open Sans</font>
Como el uso de estas etiquetas en HTML5 está desaprobado, para trabajar con fuentes se realiza desde una hoja de estilos CSS. Para ello se pueden emplear las distintas propiedades que se exponen a continuación:
- line-height: regula el interlineado que hay entre los párrafos. No es una característica del tipo de letra, pero es conveniente tratarlo en esta sección. El valor se puede expresar en cualquier unidad de longitud, aunque lo más lógico es utilizar porcentajes o em. Si se expresa en porcentajes, el valor 100% corresponde al interlineado normal.
p { line-height: 150%; }
p { line-height: 1.5em; } - font-family: permite establecer el tipo de letra (fuente) del docuento. Se puede escribir el nombre concreto de una fuente (escribiéndolo entre comillas si el nombre contiene espacios), pero hay que tener en cuenta si la persona que ve la página no tiene esa fuente instalada en su ordenador (o la tiene instalada con otro nombre) su navegador utilizará una fuente distinta. Las fuentes genéricas son serif, sans-serif, cursive, fantasy o monospace. Si ponemos varias fuentes separadas por comas, el navegador aplicará la primera fuente y, en caso de no poder, acudirá a la siguiente hasta encontrar una válida.
p { font-family: monospace; }
p { font-family: "Tahoma", sans-serif; } - font-size: permite establecer el tamaño del tipo de letra del documento. Se puede expresar de distintas formas:
- Tamaño absoluto: el navegador tiene definidos una serie de tamaños que se llaman xx-small, x-small, small, medium, large, x-large y xx-large.
p { font-size: xx-large; } - Tamaño relativo: Se pueden utilizar los valores larger o smaller. Estos valores se interpretan con respecto al elemento padre y se toman el valor siguiente o anterior de la lista de tamaños absolutos.
p { font-size: smaller; } - Valor numérico con unidades absolutas: Se puede definir un tamaño concreto, por ejemplo, 14pt, 3cm, 20px, etc.
p { font-size: 16pt; } - Valor numérico con unidades relativas: Se puede definir el tamaño de cada elemento mediante porcentajes.
p { font-size: 150%; }
- Tamaño absoluto: el navegador tiene definidos una serie de tamaños que se llaman xx-small, x-small, small, medium, large, x-large y xx-large.
- font-weight: sirve para definir la «negrita». Permite elegir el grosor del trazo. Existen nueve valores numéricos (100, 200, 300, 400, 500, 600, 700, 800, 900), del más fino al más grueso. Además, existen los valores normal y bold que deben coincidir respectivamente, con los valores numéricos 400 y 700. Y por último, existen los valores lighter y bolder que significan, respectivamente, un valor inferior y superior en la lista de valores numéricos y se interpretan respecto del elemento padre. Los tres navegadores principales (Firefox, Chrome y Edge) muestran tres grosores distintos: de 100 a 500 como normal, 600 y 700 como bold y 800 y 900 más grueso que bold. Esos grosores no se aprecian de la misma manera en cada tipo de letra.
p { font-weight: bold; } - font-style: sirve para definir el tipo de letra «itálica». En Tipografía se distinguen dos formas de inclinación: oblícua (la forma de la letra no cambia, simplemente se inclina) e itálicas (además de inclinarse, la forma de algunas letras, como la a, cambia).Permite elegir normal, oblique o italic.
p { font-style: italic; } - text-decoration: Subrayado del texto.
- color: sirve para darle el color al texto. Se puede poner tanto en hexadecimal (#FFFFFF es color blanco), o en escalas rgb y hls.
- text-align: sirve para alinear el texto. Sus posibles valores son left (por defecto), right, center o justify.
- word-spacing: regula el espaciado entre las palabras.
- letter-spacing: regula el espaciado entre las letras.
- text-transform: transformaciones del texto a mayúsculas o minúsculas. Sus posibles valores son capitalize (pone a mayúscula la primera letra), uppercase (todo en mayúsculas), lowercase (todo en minúscula) y none.
- font-variant: convierte las minúsculas en mayúsculas, pero mantienen un tamaño inferior a las mayúsculas normales.