Tipo de Letra, Tamaño y Color en HTML: Ejemplos

CSS se diseñó para dar formato a los sitios web, mientras que HTML se diseñó para crear las estructuras de los sitios web. Entre los posibles formateos de CSS se encuentra el del texto.

A través de más de 250 propiedades, la apariencia de un sitio web puede personalizarse enormemente gracias a CSS. Algunas de estas propiedades influyen en la apariencia de los textos y son éstas, al menos las más comunes, las que descubriremos y aprenderemos a utilizar en este artículo.

¿Pero, esto tiene que ver con HTML? Sí, recuerda que puedes incluir CSS dentro de HTML en 3 diferentes formas. Y una de ellas, en la misma línea de código que alguna etiqueta HTML (CSS inline).

Cambiar el Color de un Texto: color

Empecemos por una propiedad sencilla de usar y utilizada en casi todos los sitios web, la propiedad CSS color. Esta propiedad permite cambiar el color de un texto gracias a palabras clave predefinidas, a un valor en hexadecimal, en RGB o RGBA y, por último, también se pueden utilizar valores anotados en HSL o HSLA.

Además de cambiar el color de un texto, el color te permite gestionar la transparencia del texto utilizando un canal alfa, lo que te permite componer con un fondo.

Descubre todos los códigos de colores HTML aquí, listos para copiar y pegar.

Ejemplo para HTML:

<p style="color: red;">Este texto aparecerá en rojo.</p>

Cambiar el Tipo de Letra de un Texto: font-family

La propiedad font-family permite cambiar el tipo de letra de un texto dado. Para ello, basta con indicar el nombre del tipo de letra que se desea utilizar entre comillas.

Es posible indicar varios tipos de letra seguidos, de forma que si no se puede utilizar el primero de la lista se utilizará el siguiente y así sucesivamente hasta que se pueda utilizar uno de los tipos de la lista.

Si no se puede utilizar ninguna de las fuentes para el texto indicado, se utilizará la fuente por defecto del sitio. Esta fuente por defecto puede definirse directamente, en la lista declarada de fuentes font-family, por uno de los nombres de familia genéricos existentes en CSS.

Estos nombres de familia genéricos son fuentes de reserva para mantener un diseño deseado que represente la intención del sitio. En los nombres de familia genéricos, encontraremos:

• serif
• sans-serif
• monospace
• cursive
• fantasy
• system-ui
• math
• emoji
• fangsong

Cada uno de estos nombres genéricos tiene su propia particularidad y a veces un uso particular, como “emoji”, que se diseñó especialmente para mostrar emoji.

Sin embargo, antes de declarar un nombre genérico en tu familia de fuentes, puedes especificar una fuente “Web Safe“. Las fuentes Web Safe son fuentes preinstaladas en todos los navegadores y dispositivos que acceden a Internet. Son universales y debería ser seguro utilizarlas si has declarado una fuente personalizada que no es reconocida por el navegador antes de esta fuente Web Safe.

Éstas son algunas de las fuentes Web Safe que puedes utilizar:

• Arial (sans-serif)
• Calibri (sans-serif)
• Helvetica (sans-serif)
• Segoe UI (sans-serif)
• Tahoma (sans-serif)
• Trebuchet MS (sans-serif)
• Verdana (sans-serif)
• Garamond (serif)
• Georgia (serif)
• Times New Roman (serif)
• Courier New (monospace)
• Brush Script MT (cursive)

Mientras que las fuentes personalizadas deben ir entre comillas, los nombres genéricos y las fuentes Web Safe no requieren comillas en su declaración.

Por último, veamos algunos ejemplos de cómo declarar una propiedad CSS font-family:

font-family: sans-serif;

font-family: Courier New, monospace;

font-family: "Fira Sans", Arial, sans-serif;

Ejemplo para HTML:

<p style="font-family: Arial, sans-serif;">Este texto utilizará la fuente Arial o una fuente sans-serif si Arial no está disponible.</p>

<p style="font-family: Verdana, Arial, sans-serif;">Este texto utilizará la fuente Verdana, Arial o una fuente sans-serif si ambas no están disponibles.</p>

Cambiar el Tamaño de un Texto: font-size

Con la propiedad CSS font-size puedes influir en el tamaño de tus textos. Para ello, puedes utilizar palabras clave definidas o valores personalizados en diferentes unidades.

Las palabras clave definidas pueden dividirse en 2 familias: tamaños absolutos y tamaños relativos.

Un tamaño absoluto es una palabra clave que designa un valor absoluto basado en el tamaño por defecto del usuario (por ejemplo, medium). Hay un total de 7 palabras clave para tamaños absolutos que son:

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

Un tamaño relativo se define en relación con el tamaño de su elemento padre. Así, con la palabra clave “larger” el texto será más grande que su elemento padre y con la palabra clave “smaller” el tamaño será más pequeño.

A continuación, puedes definir un tamaño mediante un valor numérico personalizado y una unidad elegida. Hay múltiples unidades para definir el tamaño de un texto, aquí están algunas de ellas:

• px
• ex
• em
• rem
• % (porcentaje)
• …

La unidad “px” para “píxeles” permite definir un tamaño estático y absoluto que es totalmente independiente de cualquier otro elemento padre, hijo o raíz.

Las unidades “ex“, “em” o “%” son relativas al tamaño del elemento padre. Así, un tamaño fijado en “50%” para un elemento cuyo elemento padre es “20px” representará un tamaño para el elemento destino de “10px”.

La unidad “rem” es relativa al tamaño de la raíz HTML, el elemento “<HTML>“. Así, si el tamaño definido para el elemento se ha establecido en 16px, un elemento del sitio con un tamaño de “1rem” tendrá un tamaño equivalente al del elemento <HTML>, es decir, “16px”. Un elemento con un tamaño de “0.75rem” tendrá finalmente un tamaño de “12px” con el tamaño previamente definido para el elemento <HTML>.

He aquí algunos ejemplos de la definición de “font-size“:

font-size: 18px;

font-size: 1.2em;

font-size: 0.8rem;

font-size: 80%;

Ejemplo para HTML:

<p style="font-size: 18px;">Este texto aparecerá con un tamaño de fuente de 18 píxeles.</p>

<p style="font-size: 200%;">Este texto aparecerá con un tamaño de fuente del 200% del tamaño de fuente del elemento padre.</p>

Definir el Peso de un Texto: font-weight

El grosor (peso) de un texto es lo que hace que parezca texto en negrita o texto fino. Esta propiedad se define mediante palabras clave o valores numéricos.

Al igual que con font-size, existen palabras clave para definir la gordura absoluta o relativa.

Las palabras clave de grosor relativo son «bolder» y «lighter».

Los elementos que tengan la propiedad font-weight establecida a ‘bolder’ serán más negrita que su elemento padre y a la inversa con ‘lighter’ sus caracteres se mostrarán con menos grosor que el elemento padre.

Los valores numéricos y los niveles absolutos de grosor están vinculados, por lo que son posibles las siguientes asociaciones:

No todos los tipos de letra están disponibles en todos los pesos; algunos se han diseñado para utilizar únicamente los pesos “normal” y “bold“.

El valor por defecto para el nivel de grosor de un texto es “normal” o un valor numérico de “400”.

Estos son algunos ejemplos de cómo se utiliza la propiedad font-weight:

font-weight: 200;

font-weight: extra bold;

font-weight: lighter;

Ejemplo para HTML:

<p style="font-weight: bold;">Este texto aparecerá en negrita.</p>

<p style="font-weight: 500;">Este texto aparecerá en una fuente de grosor medio.</p>

Cambiar la Forma de un Texto: font-style

La propiedad CSS font-style permite dar a un texto la forma “cursiva” u “oblicua”.

Sólo funciona con las palabras clave predefinidas que son :

• “normal” para una forma normal
• “italic” para una forma cursiva
• “oblique” para una forma oblicua

He aquí cómo utilizar la propiedad con cada valor:

font-style: normal;

font-style: italic;

font-style: oblique;

El valor “oblique” puede tomar un segundo parámetro que es la inclinación del texto. Así, si deseas escribir un texto oblicuo con una inclinación de 30 grados, establecerías su propiedad “font-style” de la siguiente manera:

font-style: oblique 30deg;

Ejemplo para HTML:

<p style="font-style: italic;">Este texto aparecerá en cursiva.</p>

<p style="font-style: oblique;">Este texto aparecerá en una fuente inclinada hacia la derecha.</p>

Definir la Alineación de un Texto: text-align

Al igual que en los procesadores de texto, en CSS también es posible definir que un texto esté alineado a la izquierda o a la derecha, que esté centrado o justificado.

La propiedad CSS que permite esto es text-align y puede tomar 4 valores predefinidos diferentes correspondientes a las alineaciones mencionadas anteriormente.

Las asociaciones entre palabra clave y alineación son las siguientes:

• “left” para una alineación a la izquierda
• “right” para una alineación a la derecha
• “center” para texto centrado
• “justify” para un texto justificado

Así, tendrás las siguientes posibilidades para text-align:

text-align: left;

text-align: right;

text-align: center;

text-align: justify;

Ejemplo para HTML:

<p style="text-align: center;">Este texto aparecerá centrado.</p>

<p style="text-align: justify;">Este texto aparecerá justificado.</p>

Conclusión

CSS ofrece muchas posibilidades para dar formato al texto de tu sitio o aplicación web. En este artículo hemos visto las propiedades más comunes y más utilizadas en CSS, pero existe una amplia gama de otras propiedades. ¡Deja tu aporte en los comentarios!