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
).
- Numérico: Relativo al tamaño de la fuente (e.g.,
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;
}