17 formas de personalizar el texto de un sitio web con CSS (con ejemplos)

Si alguna vez te has preguntado “¿cómo se cambia el texto en CSS?”, este es el artículo adecuado para ti. A continuación, repasaremos las distintas formas en las que puedes personalizar el texto de un sitio web mediante el marcado CSS.

¿Por qué esto importa?

Porque la tipografía es una parte importante deDiseño web. Al igual que usarfuentes personalizadasLa capacidad de diseñar el texto de su sitio web para asegurarse de que se adapte al resto de su marca es primordial.

Afortunadamente, CSS ofrece muchas opciones de estilo para ayudar con eso. En esta publicación, cubriremos las más importantes y algunas menos conocidas.

17 formas diferentes de aplicar estilo al texto mediante CSS

A continuación se muestran distintas formas de personalizar el texto en las páginas web mediante propiedades CSS. Puede probarlas todas fácilmente con suherramientas para desarrolladores de navegadoresAsí es, ni siquiera necesitas tener tu propio sitio web, puedes probarlo en cualquier página web que tenga texto.

1. familia de fuentes

Lo primero de lo que queremos hablar es de la font-familypropiedad. Esta determina qué fuente utilizará tu texto.

Es bastante fácil de usar. A continuación se muestra el código que acompaña al ejemplo anterior.

#div-one {font-family: Arial;}#div-two {font-family: Courier;}#div-three {font-family: Impact;}

Simplemente determina el elemento cuya fuente quieres cambiar con un selector CSS, agrega la font-familypropiedad e incluye el nombre de la fuente como valor.

Los valores pueden ser nombres de familias de fuentes como Arialy "Open Sans"o declaraciones de fuentes genéricas como serifo monospace. Si utiliza esta última, el navegador utilizará la aproximación más cercana que tenga.

Si el valor contiene espacios en blanco, como “ Times New Roman", debe utilizar comillas dobles; si no los contiene, como Tahomao sans-serif, puede omitirlos.

Creación de pilas de fuentes

En el diseño web, normalmente se incluyen fuentes de respaldo proporcionando una lista de fuentes (una llamada pila de fuentes) dividida por comas.

#div {font-family: "Open Sans", Arial, sans-serif;}

Se utilizan en caso de que el navegador no tenga disponible la fuente original (por ejemplo, porque no está instalada en el equipo del usuario o no está en el sitio web). Luego pasa a la segunda fuente de la lista y así sucesivamente hasta encontrar una con la que pueda trabajar.

De esta manera, puede asegurarse de que su sitio web siga luciendo lo más parecido a lo que tenía en mente originalmente, incluso si un visitante no puede utilizar la fuente que tenía prevista.

Para que esto funcione, las dos últimas opciones son, por lo general, una fuente segura para la web que probablemente esté disponible en cualquier computadora y, luego, una declaración genérica como serifo sans-serif. Puede encontrar fuentes seguras para la web y su compatibilidadaquí.

Otra práctica común es definir fuentes predeterminadas al comienzo de la hoja de estilo asignándolas al bodyselector y a todosencabezados, luego use otras familias de fuentes para elementos específicos más adelante.

body {font-family: Garamond, "Times New Roman", serif;}h1,h2,h3,h4,h5,h6 {font-family: "Roboto", "Helvetica Neue", sans-serif;}.page-title {font-family: Garamond, serif;}

2. tamaño de fuente

Como probablemente sea obvio, con esta propiedad CSS puedes personalizar el tamaño del texto.

Tiene dos opciones: establecer tamaños absolutos (por ejemplo, en px) o relativos (en em, rem, o similares).

#div-one {font-size:Actualizado;}#div-two {font-size: 8em;}#div-three {font-size: 5rem;}

Este último es más común hoy en día, ya que es más útil paraDiseño responsivoyaccesibilidad.

Al usar em, 1emes igual a 16px(ese es el tamaño de fuente predeterminado del navegador). Puede calcular otros tamaños de fuente a partir de ahí, simplemente divida el valor de píxel que desea por 16 para obtener el emvalor. Por ejemplo, estas dos declaraciones de tamaño de fuente tendrán el mismo tamaño:

#div-one {font-size: 32px;}#div-two {font-size: 2em;}

Hay un montón de matemáticas más involucradas en el uso emy, rema veces, puedes leer más sobre ello.aquí.

3. peso de la fuente

Úselo font-weightpara controlar el grosor de sus fuentes.

Hay varias formas de hacer esto. Utilice una de las designaciones de grosor de fuente preexistentes ( thin, light, normal, bold, extra-bold,etc.) o ingrese un valor numérico en negrita (entre 1y 1000parafuentes variables, en pasos de cien entre 100y 900para fuentes no variables).

#div-one {font-weight: light;}#div-two {font-weight: 800;}#div-three {font-weight: bolder;}

También puedes usar lightery bolderpara indicar que quieres aumentar o disminuir el peso en un paso en comparación con el elemento principal. Sin embargo, esto es muy poco frecuente.

Tenga en cuenta que, para poder utilizar un grosor de fuente determinado, este debe estar presente en su sitio o en la máquina del usuario (y disponible en la fuente elegida para empezar). Por eso, al instalar fuentes personalizadas, puede elegir qué grosores de fuente incluir.

Si no se carga un peso, el navegador no puede usarlo.

4. estilo de fuente

En casi todos los casos, esta propiedad CSS se utiliza para convertir una fuente en cursiva. Solo acepta tres valores: normal(predeterminado), italic, y oblique.

obliquees casi lo mismo que , italicpero simula fuentes en cursiva al inclinar la fuente original. Además, la compatibilidad con el navegador es peor. Aquí se explica cómo utilizar font-style:

#div-one {font-style: normal;}#div-two {font-style: italic;}#div-three {font-style: oblique;}

5. variante de fuente

font-variantSólo tiene un uso: hacer que las fuentes aparezcan en mayúsculas pequeñas, es decir, letras minúsculas transformadas en mayúsculas más pequeñas. ¿No te parece claro? A esto me refiero:

No me pidas un caso práctico para esto, probablemente sea de los tiempos antiguos de Internet. Si quieres intentarlo, aquí tienes cómo hacerlo:

#div {font-variant: small-caps;}

6. fuente

Esta es una propiedad abreviada que puede utilizar para declarar font-style, font-variant, font-weight, , y font-sizetodo en una sola declaración.line-heightfont-family

#div {font: italic small-caps 300 40px/200px Impact;}

Aquí está la sintaxis para usarlo (tenga en cuenta la barra entre font-sizey line-height, esto es obligatorio si desea declarar ambos):

font: font-style font-variant font-weight font-size/line-height font-family;

Solo se requieren font-sizey font-family, el resto volverá al valor predeterminado si no se declara.

También hay otros valores que puedes utilizar, como caption, icon, y small-caption. Más información sobre estoaquí.

7. color

La colorpropiedad determina, como ya habrás adivinado, el color de la fuente y solo el color de la fuente (incluidos los text-decorationelementos). Muchos principiantes (yo incluido) podrían pensar que también debería determinar el color de todos los elementos, pero para eso hay que investigar background-color(porque, técnicamente, colorcolorea el primer plano).

Su uso colores bastante sencillo:

#div-one {color: #f2db3f;}#div-two {color: #1bf20f;}#div-three {color: #412535;}

Puedes definir el color del texto de varias maneras diferentes:

• Usando un nombre de color como red, pink, bluepero también papayawhipo navajowhite(hay una extensalista de colores HTML predefinidospara elegir).
• Como valor hexadecimal, por ejemplo #ff0000.
• Un valor de color RGB como rgb(255, 0, 0);.

Para obtener más información, consulte nuestro extenso tutorial sobreCómo definir colores en CSS.

8. color de fondo

Si quieres ir aún más allá, también puedes usar background-color. Como ya se mencionó anteriormente, esta es la propiedad que controla el color del fondo del texto. A menudo es útil en combinación con colorpara asegurarse de que el texto tenga suficiente contraste para seguir siendo legible. Puedes usarEsta herramientapara estar seguro de que es verdad.

Este también es un factor importante en la accesibilidad. A continuación, se muestra cómo lograr lo anterior en CSS:

#div {color: #f2db3f;}#div p {background-color: #000;}

9. transformación de texto

Otra forma de personalizar el texto de tu sitio web mediante CSS es usar text-transform. Solo tiene tres casos de uso: convertir el texto en mayúsculas, en minúsculas o poner en mayúscula la primera letra de cada palabra.

También es muy sencillo de utilizar:

#div-one {text-transform: uppercase;}#div-two {text-transform: lowercase;}#div-three {text-transform: capitalize;}

Existe otro valor para text-transform, que es full-width. Transforma todas las letras para que se coloquen dentro de un cuadrado de ancho fijo. Esto suele ser relevante solo cuando se utilizan glifos de idiomas asiáticos como el japonés o el coreano, especialmente en combinación con el alfabeto latino.

10. decoración de texto

En realidad, esto es una abreviatura de cuatro propiedades diferentes: text-decoration-line, text-decoration-color, text-decoration-styley text-decoration-thickness.

Sin embargo, en la mayoría de los casos, simplemente se utiliza text-decorationpor sí solo. ¿Qué tipo de valores toman las diferentes propiedades y qué hacen?

• text-decoration-line— Puede utilizar overline, line-through, underliney nonepara crear líneas encima, debajo o a través del texto. nonese utiliza con mayor frecuencia para eliminar el subrayado estándar de los enlaces. También puede utilizar más de un valor en combinación.
• text-decoration-color— Controla el color de la línea. Acepta las declaraciones de color CSS habituales.
• text-decoration-style— Cambia el estilo de la decoración. Puede ser solid, double, dotted, dashed, wavy, y none.
• text-decoration-thickness— Establece el grosor de la línea mediante los valores habituales, como px, %y em. También acepta autoy from-font, que utiliza cualquier valor que pueda estar incluido en la fuente elegida.

Cómo utilizar la decoración de texto

Puedes utilizarlos por separado, pero, como ya hemos dicho, es más habitual utilizar la abreviatura. Esta es la sintaxis:

text-decoration: text-decoration-line text-decoration-color text-decoration-style text-decoration-thickness;

Only the value for text-decoration-line is required, the rest is optional. To achieve the effects seen in the example image above, you can use the code below.

#div-one {text-decoration: overline;}#div-two {text-decoration: line-through;}#div-three {text-decoration: underline dotted;}#div-four {text-decoration: line-through black 10px;}#div-five {text-decoration: underline wavy 0.1em;}#div-six {text-decoration: none;}

Quick tip: a common alternative to using text-decoration for underlining text such as links, is to use the border property instead. It offers the benefit that you can control the distance between the line and the text and can also make the line extend beyond the text. Both are not possible with text-decoration.

11. text-shadow

If you have read our tutorial on CSS box shadows, text-shadow should not pose a big problem for you. Basically, you can use it to give text a shadow including control over its orientation, color, and blur.

#div-one {text-shadow: -5px 4px black;}#div-two {text-shadow: 0 0Actualizado #fff;}#div-three {text-shadow:-10px -10px rgba(0, 0, 0, 0.4),-20px -20px rgba(0, 0, 0, 0.3),-30px -30px rgba(0, 0, 0, 0.2),-40px -40px rgba(0, 0, 0, 0.1),-50px -50px rgba(0, 0, 0, 0.05);}

text-shadow takes up to four values: horizontal offset, vertical offset, blur, and color.

text-shadow: offset-x offset-y blur-radius color;

The first two are mandatory when using text-shadow, the others are optional. Note that the offsets take negative values to move the shadow left and up, positive values for right and down.

You can define both offsets, blur, and color in the usual ways for determining dimensions and colors in CSS. Except for color, they most commonly use px.

Also, just like for box-shadow, you can also set several shadows to the same element in one declaration, just comma separate them.

12. text-align

With the CSS property text-align, you can customize the horizontal alignment of text on your website. It can either be left, right, center, or justify (meaning the spaces between words stretch to make the text fit the available space).

Here’s the accompanying code to the image above:

#div-one {text-align: left;}#div-two {text-align: right;}#div-three {text-align: center;}#div-four {text-align: justify;}

Note that, depending on the text direction (left to right or right to left), the default alignment is either left or right and there is no need specifically define it via CSS as it happens automatically.

Related properties to text-align are:

• text-align-last — Works the same as text-align but only affects the last line of text in an element.
• direction/unicode-bidi — Allow you to change the direction of text (e.g. right-to-left).

13. – 16. Text Spacing

There are a number of CSS properties you can use to change spacing in website text.

line-height

This can make a difference in the spacing between lines of text. It takes the usual CSS size and length units but is most commonly simply defined as a multiplier without a unit.

div {line-height: 2;}

When you do that, the line height will simply be a product of the font size and the value in line-height.

word-spacing

This property gives you control over the distance between individual words (you would have never guessed that, I am sure).

As you can see from the image above, it also takes negative values to make the distance smaller. Aside from that, you can use it with most length and size unit declarations available in CSS.

div {word-spacing: 10px;}

letter-spacing

The name also already gives it away, you can use this to increase or decrease the space between letters.

Esto último ocurre, por supuesto, a través de valores negativos y letter-spacingtambién toma las unidades habituales para declarar tamaños.

div {letter-spacing: 12px;}

sangría de texto

Esta propiedad CSS le brinda la posibilidad de sangrar la primera línea de texto en el elemento al que la aplica.

Así es como se ve en el marcado:

div p {text-indent: 25%;}

Puedes utilizar las unidades habituales de ancho y largo, así como porcentajes. Los valores negativos también te permiten mover el texto hacia la izquierda.

17. Otras formas de personalizar el texto mediante CSS

Además de lo que ya hemos cubierto, existen otras formas de orientar el texto en CSS. Para ello, tiene sentido aprender sobreClases e identificadores HTML,propiedades personalizadas, ypseudoelementosMe gusta ::first-lettero ::first-word. Si bien esto está un poco más allá del alcance de este artículo, asegúrese de consultar los tutoriales vinculados.

También hay más propiedades CSS que te permiten trabajar con texto y profundizar en los detalles. Es posible que quieras investigar cosas como word-break, hypheno font-kerningsi quieres ponerte realmente a prueba.

Personalización de texto en CSS en pocas palabras

CSS ofrece muchas formas de personalizar el texto de su sitio web. Junto con las fuentes personalizadas, le permite hacer que el texto de su página tenga exactamente el aspecto que desea.

Arriba, hemos repasado las propiedades CSS más importantes que te permiten hacer cambios radicales. Si bien hay muchas más, estas son las básicas que necesitas.

¿Conoces otras propiedades CSS útiles que puedas usar para personalizar el texto en los sitios web? Si es así, ¡cuéntanoslo en los comentarios!