Podcast de CSS - 036: Texto y Tipografía
El texto es uno de los componentes básicos de la Web.
Cuando creas un sitio web, no necesariamente necesitas aplicar un estilo a tu texto; HTML tiene un estilo predeterminado bastante razonable.
Sin embargo, es probable que el texto constituya la mayor parte de tu sitio web, por lo que vale la pena agregar un poco de estilo para mejorarlo. Si cambias algunas propiedades básicas, puedes mejorar significativamente la experiencia de lectura de tus usuarios.
En este módulo, comenzaremos con la regla @font-face
, que te permite importar
fuentes personalizadas en tus páginas web. Esto garantiza que tengas la tipografía exacta que necesitas, independientemente de las fuentes instaladas por el usuario.
Luego, veremos las propiedades esenciales de fuentes de CSS, incluidas las siguientes:
font-family
, font-style
, font-weight
y font-size
. Estos conceptos básicos
la etapa de manipulación del texto para mejorar el estilo y la legibilidad.
También veremos las propiedades específicas de los párrafos, como text-indent
y
word-spacing
, antes de concluir con temas avanzados, como las fuentes variables
y seudoelementos, que perfeccionan aún más tu control tipográfico.
Se proporcionarán ejemplos prácticos y consejos para consolidar su comprensión y aplicación de estas técnicas de CSS.
La regla @font-face
La regla-at de CSS @font-face
es fundamental en el diseño web, ya que te permite especificar
y usa fuentes personalizadas para mostrar texto. La belleza de @font-face
yace en su
versatilidad: le permite obtener fuentes de un servidor remoto o de una fuente
instalada en el dispositivo del usuario.
Sintaxis
@font-face {
font-family: "Trickster";
src:
local("Trickster"),
url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
url("trickster-outline.otf") format("opentype"),
url("trickster-outline.woff") format("woff")
}
Descriptores
ascent-override
- Personaliza la métrica de ascenso, lo que afecta el espacio por encima del grupo de referencia.
descent-override
- Ajusta la métrica de descenso, lo que afecta el espacio debajo del modelo de referencia.
font-display
- Controla el comportamiento de visualización de la fuente según su estado de descarga.
font-family
- Asigna un nombre a la fuente para usarla en propiedades relacionadas con la fuente.
font-stretch
- Establece una escala horizontal aceptable, especificada como un valor o un rango único.
font-style
- Define el estilo de fuente y admite rangos de ángulos para estilos oblicuos.
font-weight
- Determina el grosor de la fuente o el rango de grosores disponibles.
font-feature-settings
- Permite el acceso a las funciones de fuentes de OpenType.
font-variation-settings
- Proporciona un control más preciso sobre la configuración de las fuentes variables.
line-gap-override
- Anula el intervalo de líneas predeterminado de la fuente.
size-adjust
- Aplica un factor de escala al contorno y las métricas de la fuente.
src
- Define la fuente de la fuente, ya sea local o remota. Esto es necesario para
Regla
@font-face
. Combinarurl()
ylocal()
dentro desrc
es una estrategia común que usa una fuente local si está disponible y vuelve a un archivo de fuente remoto como resguardo. Los navegadores priorizan los recursos según el orden de declaración, por lo quelocal()
suele preceder aurl()
. unicode-range
- Limita los caracteres para los que se debe usar esta fuente.
Descripción
@font-face
libera a los diseñadores de las restricciones de las fuentes "aptas para la Web", ya que les permite usar tipografía personalizada. La capacidad de la función local()
para buscar
para una fuente en el dispositivo del usuario ofrece una experiencia perfecta que no
depender necesariamente de una conexión a Internet.
Tipos de MIME de la fuente
Formato | Tipo de MIME |
---|---|
TrueType | font/ttf |
OpenType | font/otf |
Formato de fuente abierta web | font/woff |
Web Open Font Format 2 | font/woff2 |
Diferencia entre @font-face y font-family
En CSS, a menudo se confunden @font-face
y font-family
, pero tienen propósitos distintos.
Como ya mencionamos, @font-face
es una regla que se usa para definir las fuentes personalizadas que quieres usar en tu aplicación web. Le indica al navegador dónde descargar la fuente, cómo mostrarla durante la carga (con la propiedad font-display
) y especifica qué subconjunto de caracteres descargar (con unicode-range
).
Por el contrario, font-family
es una propiedad de CSS que se usa dentro de una regla de CSS para asignar un
una fuente determinada o una lista de fuentes a un elemento. Las fuentes que se enumeran en font-family
pueden ser fuentes seguras para la Web, fuentes del sistema o fuentes personalizadas definidas con @font-face
.
En resumen, @font-face
declara una fuente y le asigna un nombre.
font-family
aplica esta fuente declarada a los elementos HTML.
Este es un ejemplo de uso de ambos:
<table>
<thead>
<tr>
<th><p><pre>
@font-face {
font-family: "CustomFont";
src: url("customfont.woff2") format("woff2");
}
body {
font-family: "CustomFont", Arial, sans-serif;
}
En este ejemplo, @font-face
define "CustomFont" y le indica al navegador dónde encontrarlo. Luego, la propiedad font-family
la aplica al elemento body, con Arial como resguardo si “CustomFont” no está disponible.
Cambia el tipo de letra
Usa font-family
para cambiar el tipo de letra de tu texto.
La propiedad font-family
acepta una lista de cadenas separadas por comas, que hagan referencia a familias de fuentes específicas o genéricas. Las familias de fuentes específicas son cadenas con comillas, como "Helvetica", "EB Garamond" o "Times New Roman". Las familias de fuentes genéricas son palabras clave, como serif
, sans-serif
y monospace
(consulta la lista completa de opciones en MDN). El navegador mostrará el primer tipo de letra disponible de la lista proporcionada.
Cuando usas font-family
, debes especificar, al menos, una familia de fuentes genéricas en caso de que el navegador del usuario no tenga tus fuentes preferidas. En general, la familia de fuentes genéricas de resguardo debe ser similar a tus fuentes preferidas: si usas font-family: "Helvetica"
(una familia de fuentes Sans Serif), tu resguardo debe ser sans-serif
para que coincida.
Usa fuentes cursivas y oblicuas
Usa font-style
para establecer si el texto debe aparecer en cursiva o no. font-style
acepta una de las siguientes palabras clave: normal
, italic
y oblique
.
Aplicar negrita al texto
Usa font-weight
para establecer la “negrita” del texto. Esta propiedad acepta valores de palabras clave (normal
, bold
), valores relativos de palabras clave (lighter
, bolder
) y valores numéricos (100
a 900
).
Las palabras clave normal
y bold
son equivalentes a los valores numéricos 400
y 700
, respectivamente.
Las palabras clave lighter
y bolder
se calculan en relación con el elemento superior. Consulta Signing of Relative Weights de MDN para obtener un gráfico útil que muestra cómo se determina este valor.
Cómo cambiar el tamaño del texto
Usa font-size
para controlar el tamaño de los elementos de texto. Esta propiedad acepta valores de longitud, porcentajes y algunos valores de palabras clave.
Además de los valores de longitud y porcentaje, font-size
acepta algunos valores de palabras clave absolutas (xx-small
, x-small
, small
, medium
, large
, x-large
, xx-large
) y un par de valores de palabras clave relativos (smaller
, larger
). Los valores relativos están relacionados con el font-size
del elemento superior.
Cambiar el espacio entre las líneas
Usa line-height
para especificar la altura de cada línea en un elemento. Esta propiedad acepta un número, una longitud, un porcentaje o la palabra clave normal
. En general, se recomienda usar un número en lugar de una longitud o un porcentaje para evitar problemas con la herencia.
Cambia el espacio entre caracteres
Usa letter-spacing
para controlar la cantidad de espacio horizontal entre los caracteres del texto. Esta propiedad acepta valores de longitud, como em
, px
y rem
.
Ten en cuenta que el valor especificado aumenta la cantidad de espacio natural entre los caracteres. En la siguiente demostración, selecciona una letra individual para ver el tamaño del letterbox y cómo cambia con letter-spacing
.
Cambia el espacio entre palabras
Usa word-spacing
para aumentar o disminuir la longitud del espacio entre cada palabra del texto. Esta propiedad acepta valores de longitud, como em
, px
y rem
. Ten en cuenta que la longitud que especifiques es para espacio adicional además del espaciado normal. Esto significa que word-spacing: 0
es equivalente a word-spacing: normal
.
Abreviatura de font
Puedes usar la propiedad abreviada font
para establecer muchas propiedades relacionadas con la fuente a la vez. La lista de propiedades posibles es font-family
, font-size
, font-stretch
, font-style
, font-variant
, font-weight
y line-height
.
Consulta el artículo font
de MDN para conocer los detalles sobre cómo ordenar estas propiedades.
Cómo cambiar mayúsculas y minúsculas
Usa text-transform
para modificar las mayúsculas del texto sin necesidad de cambiar el código HTML subyacente. Esta propiedad acepta los siguientes valores de palabras clave: uppercase
, lowercase
y capitalize
.
Cómo agregar al texto subrayados, sobrelíneas y líneas directas
Usa text-decoration
para agregar líneas al texto. Los guiones bajos son los más usados, pero también puedes agregar líneas sobre el texto o justo en medio de él.
La propiedad text-decoration
es una abreviatura de las propiedades más específicas que se detallan a continuación.
La propiedad text-decoration-line
acepta las palabras clave underline
, overline
y line-through
. También puedes especificar varias palabras clave para varias líneas.
La propiedad text-decoration-color
establece el color de todas las decoraciones de text-decoration-line
.
La propiedad text-decoration-style
acepta las palabras clave solid
, double
, dotted
, dashed
y wavy
.
La propiedad text-decoration-thickness
acepta cualquier valor de longitud y establece el ancho de trazo de todas las decoraciones de text-decoration-line
.
La propiedad text-decoration
es una abreviatura de todas las propiedades anteriores.
Agrega una sangría al texto
Usa text-indent
para agregar un sangría a tus bloques de texto. Esta propiedad toma una longitud (por ejemplo, 10px
, 2em
) o un porcentaje del ancho del bloque contenedor.
Cómo lidiar con el contenido oculto o desbordado
Usa text-overflow
para especificar cómo se representa el contenido oculto. Hay dos opciones: clip
(la predeterminada), que trunca el texto en el punto de desbordamiento, y ellipsis
, que muestra una elipsis (…) en el punto de desbordamiento.
Controlar los espacios en blanco
La propiedad white-space
se usa para especificar cómo se debe manejar el espacio en blanco en un elemento. Para obtener más información, consulta el artículo white-space
en MDN.
white-space: pre
puede ser útil para renderizar arte ASCII o bloques de código con sangría cuidadosamente.
Controla cómo se dividen las palabras
Usa word-break
para cambiar la forma en que se deben “dividir” las palabras cuando se desbordan en la línea. De forma predeterminada, el navegador no divide las palabras. Si usas el valor de palabra clave break-all
para word-break
, se le indicará al navegador que divida las palabras en caracteres individuales si es necesario.
Cambiar la alineación del texto
Usa text-align
para especificar la alineación horizontal del texto en un bloque o elemento de celda de tabla. Esta propiedad acepta los valores de palabra clave left
, right
, start
, end
, center
, justify
y match-parent
.
Los valores left
y right
alinean el texto a la izquierda y a la derecha del bloque, respectivamente.
Usa start
y end
para representar la ubicación del comienzo y del final de una línea de texto en el modo de escritura actual. Por lo tanto, start
se asigna a left
en inglés y a right
en la secuencia de comandos árabe, que se escribe de derecha a izquierda (RTL). Son alineaciones lógicas. Obtén más información en nuestro módulo de propiedades lógicas.
Usa center
para alinear el texto en el centro del bloque.
El valor de justify
organiza el texto y cambia los espacios entre palabras automáticamente para que el texto se alinee con los bordes izquierdo y derecho del bloque.
Cómo cambiar la dirección del texto
Usa direction
para establecer la dirección del texto, ya sea ltr
(de izquierda a derecha, la opción predeterminada) o rtl
(de derecha a izquierda). Algunos idiomas, como el árabe, el hebreo o el persa, se escriben de derecha a izquierda, por lo que se debe usar direction: rtl
. Para el inglés y todos los demás idiomas que se leen de izquierda a derecha, usa direction: ltr
.
Cambia el flujo del texto
Usa writing-mode
para cambiar la forma en que se organiza y fluye el texto. El valor predeterminado es horizontal-tb
, pero también puedes establecer writing-mode
en vertical-lr
o vertical-rl
para el texto que deseas que fluya horizontalmente.
Cómo cambiar la orientación del texto
Usa text-orientation
para especificar la orientación de los caracteres en el texto. Los valores válidos para esta propiedad son mixed
y upright
. Esta propiedad solo es relevante cuando writing-mode
se configura en un elemento que no sea horizontal-tb
.
Cómo agregar una sombra al texto
Usa text-shadow
para agregar una sombra al texto. Esta propiedad espera tres longitudes (x-offset
, y-offset
y blur-radius
) y un color.
Consulta la sección text-shadow
de nuestro módulo sobre sombras para obtener más información.
Fuentes variables
Por lo general, las fuentes "normales" requieren la importación de diferentes archivos para diferentes versiones del tipo de letra, como negrita, cursiva o condensada. Las fuentes variables son fuentes que pueden contener muchas variantes diferentes de un tipo de letra en un solo archivo.
Consulta nuestro artículo sobre fuentes variables para obtener más información.
Pseudoelementos
Pseudoelementos ::first-letter
y ::first-line
Los pseudoelementos ::first-letter
y ::first-line
se orientan a la primera letra y a la primera línea de un elemento de texto, respectivamente.
Pseudoelemento ::selection
Usa el seudoelemento ::selection
para cambiar la apariencia del texto seleccionado por el usuario.
Cuando se usa este seudoelemento, solo se pueden utilizar ciertas propiedades de CSS: color
, background-color
, text-decoration
, text-shadow
, stroke-color
, fill-color
y stroke-width
.
font-variant
La propiedad font-variant
es un atajo para varias propiedades CSS que te permiten elegir variantes de fuente, como small-caps
y slashed-zero
. Las propiedades de CSS que incluye esta abreviatura son font-variant-alternates
, font-variant-caps
, font-variant-east-asian
, font-variant-ligatures
y font-variant-numeric
. Consulta los vínculos de cada propiedad para obtener más detalles sobre su uso.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre tipografía en la Web
¿Cuál de las siguientes palabras clave se puede usar como un resguardo genérico de font-family
?
serif
monospace
italic
italic
es una palabra clave válida para font-style
, no para font-family
.sci-fi
fantasy
es un resguardo genérico válido para font-family
.sans-serif
helvetica
"Helvetica"
no es una palabra clave genérica, sino que hace referencia a una familia de fuentes específica.¿Qué sentencia se usa para convertir la primera letra de cada palabra en mayúscula? p. ej., This is a sentence.
➡ This Is A Sentence.
text-capitalize: true;
text-case: capitalize;
text-transform: capitalize;
font-style: capitals;
font-variant: capitalize;
Verdadero o falso: Usa text-orientation
para alinear el texto a la izquierda, a la derecha o al centro.
text-orientation
cambia la rotación de las letras en una línea.text-orientation
cambia la rotación de las letras en una línea. Usa text-align
para alinear el texto hacia la izquierda, la derecha o el centro (y más).¿Qué propiedad de CSS se puede usar para cambiar el espacio entre las líneas de texto?
line-spacing
leading
baseline-distance
line-height
Recursos
- En Prácticas recomendadas para fuentes, se analizan la importación de fuentes, la renderización de fuentes y otras prácticas recomendadas para usar fuentes en la Web.
- Texto y estilo de fuente fundamentales de MDN.