Texto y Tipografía en CSS

En CSS, las propiedades de texto y tipografía son esenciales para controlar la apariencia del texto en una página web. Estas propiedades permiten definir el tipo de letra, el tamaño, el estilo, el espaciado, y otros aspectos tipográficos que afectan la legibilidad y el diseño.

1. Propiedad font-family

La propiedad font-family se utiliza para definir la fuente o conjunto de fuentes a usar en el texto. Es posible especificar varias fuentes como opciones de respaldo, en caso de que la primera no esté disponible.

Sintaxis:

selector {
    font-family: 'Nombre de Fuente', respaldo, tipo-genérico;
}

Ejemplo:

p {
    font-family: 'Arial', sans-serif;
}

• Tipos Genéricos Comunes:
  • serif: Con remates (e.g., Times New Roman)
  • sans-serif: Sin remates (e.g., Arial)
  • monospace: Espaciado fijo (e.g., Courier New)
  • cursive: Estilo cursivo (e.g., Comic Sans)
  • fantasy: Estilo decorativo (e.g., Impact)

2. Propiedad font-size

La propiedad font-size define el tamaño del texto. Puedes usar diferentes unidades como píxeles (px), em (em), puntos (pt), o porcentajes (%).

• Sintaxis:

selector {
    font-size: valor;
}

Ejemplo:

h1 {
    font-size: 36px;
}

• Unidades Comunes:
  • px: Píxeles (medida absoluta).
  • em: Relativo al tamaño de la fuente del elemento padre.
  • rem: Relativo al tamaño de la fuente raíz (generalmente 16px).
  • %: Relativo al tamaño de la fuente del elemento padre.

3. Propiedad font-weight

La propiedad font-weight controla el grosor del texto. Puedes usar valores predefinidos como bold, normal, o números que van desde 100 (muy fino) hasta 900 (muy grueso).

• Sintaxis:

selector {
    font-weight: valor;
}

Ejemplo:

strong {
    font-weight: bold;
}

4. Propiedad font-style

La propiedad font-style define si el texto debe mostrarse en estilo normal, cursiva (italic), u oblicua (oblique).

• Sintaxis:

selector {
    font-style: valor;
}

Ejemplo:

em {
    font-style: italic;
}

5. Propiedad line-height

La propiedad line-height controla la altura de la línea, es decir, el espacio vertical entre las líneas de texto. Es crucial para la legibilidad del texto.

• Sintaxis:

selector {
    line-height: valor;
}

Ejemplo:

p {
    line-height: 1.5;
}

• Unidades Comunes:
  • Numérico: Relativo al tamaño de la fuente (e.g., 1.5).
  • Unidades Absolutas: (e.g., 20px, 1.5em).

6. Propiedad text-align

La propiedad text-align define cómo se alinea el texto dentro de su contenedor. Las opciones comunes son left, right, center, y justify.

• Sintaxis:

selector {
    text-align: valor;
}

Ejemplo:

h2 {
    text-align: center;
}

7. Propiedad text-decoration

La propiedad text-decoration se usa para añadir decoraciones al texto, como subrayado (underline), línea sobre el texto (overline), línea a través del texto (line-through), o quitar cualquier decoración (none).

• Sintaxis:

selector {
    text-decoration: valor;
}

Ejemplo:

a {
    text-decoration: none;
}

8. Propiedad text-transform

La propiedad text-transform controla la capitalización del texto, como convertir todo a mayúsculas (uppercase), minúsculas (lowercase), o capitalizar solo la primera letra de cada palabra (capitalize).

• Sintaxis:

selector {
    text-transform: valor;
}

Ejemplo:

h1 {
    text-transform: uppercase;
}