CSS
Tutorial CSS: Tipografía avanzada
Aprende a dominar la tipografía avanzada en CSS con vertical-align, font-display y font-feature-settings para mejorar la legibilidad y el diseño web.
Aprende CSS y certifícateAlineación vertical con vertical-align y baseline
La alineación vertical de elementos en CSS es uno de esos aspectos que parecen sencillos a primera vista, pero que pueden resultar sorprendentemente complejos en la práctica. Entender cómo funciona la propiedad vertical-align
y el concepto de baseline
nos ayudará a controlar con precisión la posición vertical de los elementos en línea.
Fundamentos de vertical-align
La propiedad vertical-align
determina cómo se alinean verticalmente los elementos inline o inline-block dentro de su contenedor. Esta propiedad no afecta a elementos en bloque, lo cual es una confusión común entre quienes se inician en CSS.
Los valores básicos que podemos asignar a vertical-align
son:
baseline
(valor por defecto)top
middle
bottom
sub
super
text-top
text-bottom
- Valores en longitud (px, em, %)
Veamos un ejemplo sencillo con imágenes y texto:
.icon {
vertical-align: middle;
width: 24px;
height: 24px;
}
.icon-top {
vertical-align: top;
}
.icon-baseline {
vertical-align: baseline;
}
.icon-bottom {
vertical-align: bottom;
}
<p>
Texto con icono <img src="icon.svg" class="icon"> alineado al medio.
<br>
Texto con icono <img src="icon.svg" class="icon icon-top"> alineado arriba.
<br>
Texto con icono <img src="icon.svg" class="icon icon-baseline"> en la línea base.
<br>
Texto con icono <img src="icon.svg" class="icon icon-bottom"> alineado abajo.
</p>
Entendiendo la línea base (baseline)
El concepto de baseline es fundamental para comprender la alineación vertical. La línea base es una línea imaginaria sobre la que se asientan los caracteres de texto. Algunos caracteres como "g", "j" o "p" tienen partes que descienden por debajo de esta línea.
Por defecto, los elementos inline se alinean con su línea base coincidiendo con la línea base del texto circundante. Esto explica por qué a veces vemos pequeños espacios debajo de las imágenes cuando las colocamos junto al texto.
Alineación con valores específicos
Exploremos con más detalle los valores más comunes:
baseline: Alinea la línea base del elemento con la línea base del elemento padre.
middle: Alinea el punto medio del elemento con la línea base del padre más la mitad de la altura de la "x" (x-height) del padre.
top: Alinea la parte superior del elemento con la parte superior de la línea más alta.
bottom: Alinea la parte inferior del elemento con la parte inferior de la línea.
text-top: Alinea la parte superior del elemento con la parte superior del texto del elemento padre.
text-bottom: Alinea la parte inferior del elemento con la parte inferior del texto del elemento padre.
Veamos un ejemplo más elaborado:
.container {
font-size: 20px;
line-height: 1.5;
background-color: #f0f0f0;
padding: 10px;
}
.box {
display: inline-block;
width: 50px;
height: 50px;
background-color: #3498db;
margin-right: 10px;
}
.baseline {
vertical-align: baseline;
}
.middle {
vertical-align: middle;
}
.top {
vertical-align: top;
}
.bottom {
vertical-align: bottom;
}
.text-top {
vertical-align: text-top;
}
.text-bottom {
vertical-align: text-bottom;
}
<div class="container">
Texto base
<div class="box baseline"></div>
<div class="box middle"></div>
<div class="box top"></div>
<div class="box bottom"></div>
<div class="box text-top"></div>
<div class="box text-bottom"></div>
</div>
Valores numéricos y porcentajes
Además de los valores predefinidos, vertical-align
acepta valores numéricos y porcentajes:
.shift-up {
vertical-align: -5px; /* Desplaza 5px hacia arriba desde la línea base */
}
.shift-down {
vertical-align: 10px; /* Desplaza 10px hacia abajo desde la línea base */
}
.percent {
vertical-align: 50%; /* Desplaza hacia arriba un 50% de la line-height del elemento */
}
Estos valores son relativos a la línea base. Los valores negativos mueven el elemento hacia arriba, mientras que los valores positivos lo mueven hacia abajo.
Casos prácticos de uso
1. Centrar iconos junto a texto
Un caso de uso común es alinear iconos con texto:
.icon {
vertical-align: middle;
margin-right: 5px;
}
<button>
<img src="icon.svg" class="icon" alt="">
Enviar mensaje
</button>
2. Eliminar el espacio bajo las imágenes
Para eliminar el pequeño espacio que aparece debajo de las imágenes:
img {
vertical-align: bottom; /* o también: middle, top */
display: block; /* Otra solución alternativa */
}
3. Alinear elementos en tablas
En celdas de tabla, podemos controlar la alineación vertical:
td {
vertical-align: middle; /* Centra el contenido verticalmente */
height: 100px;
}
.header-cell {
vertical-align: bottom; /* Alinea el contenido con la parte inferior */
}
Limitaciones y consideraciones
Es importante entender algunas limitaciones de vertical-align
:
- Solo funciona en elementos inline, inline-block o celdas de tabla.
- No funciona para centrar contenido verticalmente dentro de un contenedor en bloque (para esto es mejor usar flexbox o grid).
- El comportamiento puede variar ligeramente entre navegadores.
Solución de problemas comunes
Problema: Espacio no deseado debajo de imágenes
/* Solución 1: Cambiar vertical-align */
img {
vertical-align: bottom;
}
/* Solución 2: Convertir a bloque */
img {
display: block;
}
Problema: Alineación inconsistente de iconos con texto
/* Asegúrate de que tanto el icono como el texto tengan propiedades consistentes */
.icon {
vertical-align: middle;
font-size: inherit; /* Si el icono es un elemento de fuente */
}
Combinación con line-height
La propiedad line-height
afecta directamente a cómo funciona vertical-align
, ya que determina la altura de la línea y, por tanto, el espacio disponible para la alineación:
.container {
line-height: 2; /* Aumenta el espacio entre líneas */
}
.icon {
vertical-align: middle; /* El comportamiento cambiará según el line-height */
}
La interacción entre vertical-align
y line-height
es especialmente importante cuando trabajamos con texto de diferentes tamaños o elementos con alturas variables.
Ejemplo práctico: Formulario con iconos
Un ejemplo real donde la alineación vertical es crucial:
.input-group {
margin-bottom: 15px;
}
.input-icon {
vertical-align: middle;
margin-right: 8px;
width: 18px;
height: 18px;
}
.form-input {
vertical-align: middle;
padding: 8px;
font-size: 16px;
}
<div class="input-group">
<img src="user-icon.svg" class="input-icon" alt="">
<input type="text" class="form-input" placeholder="Nombre de usuario">
</div>
<div class="input-group">
<img src="lock-icon.svg" class="input-icon" alt="">
<input type="password" class="form-input" placeholder="Contraseña">
</div>
Entender cómo funciona vertical-align
y el concepto de baseline
nos permite controlar con precisión la alineación vertical de elementos en línea, mejorando significativamente la apariencia y profesionalidad de nuestros diseños web.
Font-display y estrategias de carga de fuentes
La carga de fuentes web puede tener un impacto significativo en el rendimiento y la experiencia del usuario. Cuando utilizamos fuentes personalizadas, es común experimentar el llamado "parpadeo de texto invisible" (FOIT - Flash of Invisible Text) o el "parpadeo de texto sin estilo" (FOUT - Flash of Unstyled Text). La propiedad font-display
nos permite controlar cómo se comportan las fuentes durante su carga.
La propiedad font-display
La propiedad font-display
se utiliza dentro de la regla @font-face
y determina cómo se renderiza el texto mientras la fuente se está descargando. Esta propiedad acepta cinco valores diferentes:
auto
(comportamiento predeterminado del navegador)block
swap
fallback
optional
Cada uno de estos valores define un comportamiento específico durante tres períodos de tiempo:
- Período de bloqueo: tiempo durante el cual el navegador puede mostrar texto invisible mientras espera la fuente.
- Período de intercambio: tiempo durante el cual el navegador puede mostrar una fuente alternativa mientras espera la fuente personalizada.
- Período de fallo: momento en que el navegador decide que la fuente ha fallado en cargar.
Veamos cómo implementar font-display
en una regla @font-face
:
@font-face {
font-family: 'OpenSans';
src: url('opensans.woff2') format('woff2'),
url('opensans.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap; /* Estrategia de visualización */
}
Valores de font-display y sus comportamientos
1. font-display: auto
@font-face {
font-family: 'MyFont';
src: url('myfont.woff2') format('woff2');
font-display: auto;
}
Con auto
, el navegador utiliza su estrategia predeterminada para mostrar fuentes. Generalmente, esto significa que el texto permanecerá invisible durante un breve período mientras se carga la fuente (FOIT).
2. font-display: block
@font-face {
font-family: 'MyFont';
src: url('myfont.woff2') format('woff2');
font-display: block;
}
Con block
, el navegador establece un período de bloqueo corto (generalmente 3 segundos) durante el cual el texto permanece invisible. Si la fuente no se carga en ese tiempo, se muestra el texto con una fuente alternativa hasta que la personalizada esté disponible.
Este valor prioriza la consistencia visual sobre la velocidad de visualización del contenido.
3. font-display: swap
@font-face {
font-family: 'MyFont';
src: url('myfont.woff2') format('woff2');
font-display: swap;
}
Con swap
, el navegador muestra inmediatamente el texto utilizando una fuente alternativa (fallback) y luego "intercambia" a la fuente personalizada cuando ésta termina de cargarse. No hay período de bloqueo.
Este valor prioriza la visualización inmediata del contenido sobre la consistencia visual, lo que puede causar un FOUT (Flash of Unstyled Text).
4. font-display: fallback
@font-face {
font-family: 'MyFont';
src: url('myfont.woff2') format('woff2');
font-display: fallback;
}
Con fallback
, el navegador establece un período de bloqueo muy corto (100ms aproximadamente). Si la fuente no se carga en ese tiempo, se muestra el texto con una fuente alternativa. Luego hay un período de intercambio corto (3 segundos aproximadamente) durante el cual la fuente personalizada puede reemplazar a la alternativa si termina de cargarse.
Este valor busca un equilibrio entre mostrar contenido rápidamente y minimizar el cambio visual.
5. font-display: optional
@font-face {
font-family: 'MyFont';
src: url('myfont.woff2') format('woff2');
font-display: optional;
}
Con optional
, el navegador establece un período de bloqueo muy corto similar a fallback
. La diferencia es que el navegador puede decidir no utilizar la fuente personalizada en absoluto, basándose en la velocidad de conexión del usuario.
Este valor prioriza el rendimiento sobre la fidelidad visual, siendo ideal para conexiones lentas.
Estrategias de carga de fuentes
Además de font-display
, existen otras técnicas para optimizar la carga de fuentes:
1. Precargar fuentes críticas con rel="preload"
<link rel="preload" href="fonts/opensans.woff2" as="font" type="font/woff2" crossorigin>
El atributo preload
indica al navegador que debe comenzar a descargar este recurso lo antes posible, ya que será necesario pronto. Esto es especialmente útil para fuentes críticas que se utilizan en el contenido visible inicialmente.
2. Subconjuntos de fuentes (font subsetting)
Reducir el tamaño de los archivos de fuentes incluyendo solo los caracteres necesarios:
@font-face {
font-family: 'MyFont';
src: url('myfont-latin.woff2') format('woff2');
unicode-range: U+0000-00FF; /* Solo caracteres latinos básicos */
font-display: swap;
}
La propiedad unicode-range
especifica qué rango de caracteres incluye esta fuente, permitiendo al navegador cargar solo los subconjuntos necesarios.
3. Formato de fuentes moderno (WOFF2)
@font-face {
font-family: 'MyFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
font-display: swap;
}
El formato WOFF2 ofrece una mejor compresión (aproximadamente 30% más pequeño que WOFF), reduciendo significativamente el tiempo de carga. Es recomendable proporcionar WOFF como respaldo para navegadores más antiguos.
4. Fuentes variables
Las fuentes variables permiten incluir múltiples variaciones de una familia de fuentes en un solo archivo:
@font-face {
font-family: 'MyVariableFont';
src: url('myvariablefont.woff2') format('woff2-variations');
font-weight: 100 900; /* Rango de pesos disponibles */
font-display: swap;
}
.light-text {
font-weight: 300;
}
.bold-text {
font-weight: 700;
}
En lugar de cargar archivos separados para cada peso o estilo, las fuentes variables permiten ajustar estos parámetros dinámicamente desde un único archivo.
Ejemplo práctico: Estrategia completa de carga de fuentes
Veamos un ejemplo que combina varias estrategias para una carga óptima:
<!-- En el <head> del documento HTML -->
<link rel="preload" href="fonts/opensans-latin.woff2" as="font" type="font/woff2" crossorigin>
/* Fuente principal con subconjuntos */
@font-face {
font-family: 'OpenSans';
src: url('fonts/opensans-latin.woff2') format('woff2'),
url('fonts/opensans-latin.woff') format('woff');
unicode-range: U+0000-00FF; /* Caracteres latinos básicos */
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: 'OpenSans';
src: url('fonts/opensans-latin-ext.woff2') format('woff2'),
url('fonts/opensans-latin-ext.woff') format('woff');
unicode-range: U+0100-024F; /* Caracteres latinos extendidos */
font-weight: 400;
font-display: fallback;
}
/* Definición de fuentes alternativas */
body {
font-family: 'OpenSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}
En este ejemplo:
- Precargamos la fuente latina básica que se usará inmediatamente.
- Utilizamos subconjuntos para cargar solo los caracteres necesarios.
- Aplicamos diferentes estrategias de
font-display
según la prioridad del contenido. - Proporcionamos una cascada de fuentes alternativas de sistema de alta calidad.
Consideraciones de rendimiento
- Limita el número de fuentes: Cada fuente adicional aumenta el tiempo de carga.
- Prioriza formatos modernos: WOFF2 ofrece la mejor compresión.
- Considera el uso de fuentes del sistema: Las fuentes del sistema no requieren descarga y pueden ofrecer una buena experiencia de usuario.
/* Ejemplo de stack de fuentes del sistema */
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
- Monitoriza el rendimiento: Utiliza herramientas como Lighthouse o WebPageTest para evaluar el impacto de tus estrategias de carga de fuentes.
La elección de la estrategia adecuada de font-display
y las técnicas de optimización dependerá de las prioridades específicas de tu proyecto: si priorizas la consistencia visual, la velocidad de carga del contenido o buscas un equilibrio entre ambas.
Ajuste de kerning y ligaduras con font-feature-settings
La tipografía profesional va mucho más allá de elegir una fuente bonita. Los detalles tipográficos como el espaciado entre caracteres específicos (kerning) y las ligaduras pueden marcar la diferencia entre un diseño amateur y uno profesional. CSS nos ofrece control preciso sobre estos aspectos mediante la propiedad font-feature-settings
.
¿Qué son el kerning y las ligaduras?
Antes de sumergirnos en el código, es importante entender estos conceptos:
Kerning: Es el ajuste del espacio entre pares de caracteres específicos para mejorar la legibilidad y apariencia visual. Por ejemplo, en pares como "AV", "To" o "Wa", un buen kerning acerca estos caracteres de manera que el espacio entre ellos parezca ópticamente consistente.
Ligaduras: Son caracteres especiales que combinan dos o más glifos en uno solo. Las ligaduras más comunes son "fi", "fl", "ff", donde las letras se fusionan para evitar colisiones entre partes de los caracteres y mejorar la estética del texto.
La propiedad font-feature-settings
La propiedad font-feature-settings
nos permite acceder a características tipográficas avanzadas que están incluidas en muchas fuentes OpenType modernas. Esta propiedad utiliza etiquetas de características OpenType de cuatro caracteres para activar o desactivar funcionalidades específicas.
La sintaxis básica es:
.elemento {
font-feature-settings: "xxxx" on/off, "yyyy" on/off;
}
Donde "xxxx" e "yyyy" son las etiquetas de características OpenType.
Control del kerning
Para controlar el kerning, utilizamos la etiqueta kern
:
.texto-con-kerning {
font-feature-settings: "kern" on;
}
.texto-sin-kerning {
font-feature-settings: "kern" off;
}
También existe una propiedad específica para el kerning que es más recomendable usar cuando solo queremos ajustar esta característica:
.texto-con-kerning {
font-kerning: normal; /* Activa el kerning */
}
.texto-sin-kerning {
font-kerning: none; /* Desactiva el kerning */
}
La propiedad font-kerning
acepta tres valores:
auto
: El navegador decide si aplicar kerning o nonormal
: Activa el kerningnone
: Desactiva el kerning
Trabajando con ligaduras
Las ligaduras se controlan mediante varias etiquetas, dependiendo del tipo de ligadura que queramos activar:
liga
: Ligaduras estándar (fi, fl, ff)dlig
: Ligaduras discrecionales (más decorativas)hlig
: Ligaduras históricasclig
: Ligaduras contextuales
Ejemplo de implementación:
.texto-con-ligaduras-estandar {
font-feature-settings: "liga" on;
}
.texto-con-todas-ligaduras {
font-feature-settings: "liga" on, "dlig" on, "hlig" on, "clig" on;
}
.texto-sin-ligaduras {
font-feature-settings: "liga" off;
}
Al igual que con el kerning, CSS ofrece propiedades específicas para las ligaduras:
.texto {
font-variant-ligatures: common-ligatures; /* Activa ligaduras comunes */
}
.texto-avanzado {
font-variant-ligatures: common-ligatures discretionary-ligatures;
}
.texto-sin-ligaduras {
font-variant-ligatures: no-common-ligatures;
}
Ejemplo práctico combinando kerning y ligaduras
Veamos un ejemplo completo que aplica tanto kerning como ligaduras:
.texto-tipografico {
/* Enfoque con propiedades específicas (recomendado) */
font-kerning: normal;
font-variant-ligatures: common-ligatures discretionary-ligatures;
/* Alternativa con font-feature-settings */
/* font-feature-settings: "kern" on, "liga" on, "dlig" on; */
}
<p class="texto-tipografico">
Affinity Typography offers fine kerning adjustments for professional text layouts.
</p>
Características tipográficas adicionales
Además del kerning y las ligaduras, font-feature-settings
permite controlar muchas otras características tipográficas:
Números de estilo antiguo vs. alineados
.numeros-alineados {
font-feature-settings: "lnum" on; /* Lining numbers */
}
.numeros-estilo-antiguo {
font-feature-settings: "onum" on; /* Old-style numbers */
}
Números tabulares vs. proporcionales
.numeros-tabulares {
font-feature-settings: "tnum" on; /* Tabular numbers - mismo ancho */
}
.numeros-proporcionales {
font-feature-settings: "pnum" on; /* Proportional numbers - ancho variable */
}
Fracciones
.fracciones {
font-feature-settings: "frac" on; /* Convierte 1/2 en ½ */
}
Versalitas (small caps)
.versalitas {
font-feature-settings: "smcp" on; /* Small caps */
}
Combinando múltiples características
Podemos combinar varias características en una sola declaración:
.texto-financiero {
font-feature-settings: "kern" on, "liga" on, "tnum" on, "frac" on;
}
Este ejemplo activaría el kerning, las ligaduras estándar, los números tabulares y las fracciones, ideal para un texto con contenido financiero.
Propiedades específicas vs. font-feature-settings
Aunque font-feature-settings
es muy potente, es preferible usar propiedades CSS específicas cuando sea posible:
/* Mejor enfoque: usar propiedades específicas */
.texto-tipografico {
font-kerning: normal;
font-variant-ligatures: common-ligatures;
font-variant-numeric: oldstyle-nums tabular-nums;
font-variant-caps: small-caps;
}
/* Enfoque alternativo: usar font-feature-settings */
.texto-tipografico-alternativo {
font-feature-settings: "kern" on, "liga" on, "onum" on, "tnum" on, "smcp" on;
}
Las propiedades específicas tienen mejor soporte en navegadores y son más fáciles de mantener.
Verificación de soporte de características
No todas las fuentes soportan todas las características OpenType. Para verificar qué características están disponibles en una fuente específica, puedes usar herramientas como:
Ejemplo práctico: Texto editorial profesional
Veamos un ejemplo completo para un texto editorial que requiere alta calidad tipográfica:
.articulo {
font-family: 'Equity Text', Georgia, serif;
line-height: 1.5;
/* Características tipográficas */
font-kerning: normal;
font-variant-ligatures: common-ligatures contextual;
font-variant-numeric: oldstyle-nums proportional-nums;
/* Para navegadores que no soportan las propiedades anteriores */
font-feature-settings: "kern" on, "liga" on, "clig" on, "onum" on, "pnum" on;
}
.articulo h1, .articulo h2 {
font-variant-caps: small-caps;
font-feature-settings: "kern" on, "liga" on, "smcp" on;
}
.articulo .datos-financieros {
font-variant-numeric: lining-nums tabular-nums;
font-feature-settings: "kern" on, "liga" on, "lnum" on, "tnum" on;
}
Consideraciones de rendimiento y compatibilidad
Rendimiento: Activar muchas características OpenType puede afectar ligeramente el rendimiento de renderizado, especialmente en dispositivos de gama baja.
Compatibilidad: Aunque el soporte para
font-feature-settings
es bueno en navegadores modernos, siempre es recomendable proporcionar alternativas para navegadores más antiguos.Tamaño de archivo: Las fuentes con muchas características OpenType tienden a ser más grandes, lo que puede afectar los tiempos de carga.
/* Enfoque progresivo */
.texto {
/* Solución básica para todos los navegadores */
font-family: 'Mi Fuente', serif;
/* Mejoras para navegadores modernos */
font-kerning: normal;
font-variant-ligatures: common-ligatures;
/* Fallback para navegadores que solo soportan font-feature-settings */
font-feature-settings: "kern" on, "liga" on;
}
Uso en interfaces de usuario
Para interfaces de usuario, es importante considerar la legibilidad por encima de la estética:
.ui-elemento {
/* Priorizar legibilidad en UI */
font-kerning: normal;
font-variant-ligatures: no-common-ligatures;
font-variant-numeric: lining-nums tabular-nums;
font-feature-settings: "kern" on, "liga" off, "lnum" on, "tnum" on;
}
En interfaces, los números alineados y tabulares suelen ser preferibles para mantener la consistencia visual, mientras que las ligaduras pueden desactivarse para mejorar la legibilidad en tamaños pequeños.
El dominio de estas características tipográficas avanzadas te permitirá crear diseños web con una calidad tipográfica profesional, mejorando tanto la estética como la legibilidad de tus proyectos.
Ejercicios de esta lección Tipografía avanzada
Evalúa tus conocimientos de esta lección Tipografía avanzada con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.
Reto modelo caja CSS
Propiedades de posicionamiento
Modelo de caja
Sombras en texto y cajas
Reto implementación de fuentes web
Sintaxis básica
Estilos de fuente
Diseño responsive con media queries
Animaciones y transiciones
Proyecto CSS Landing page simple
Reto unidades de medida
Propiedades de texto
Metodologías BEM, SMACSS, OOCSS
Herencia y cascada
Sintaxis avanzada
Reto fondos background CSS
Reto sintaxis CSS
Flexbox en diseños modernos
Elementos 'float' y 'clear'
Pseudo-clases y pseudo-elementos
Reto grid de columnas en CSS
Selectores avanzados
Reto componente responsive
Reto formulario estilizado
Proyecto CSS crear una navbar
Proyecto CSS Dashboard Responsive
Reto Flexbox Hero
Propiedades de fondo
Introducción a CSS
Reto selectores básicos CSS
Reto Flexbox Card
Reto propiedades texto
Modelo de caja
Propiedad 'display'
Variables en CSS
Grid en diseños de cuadrícula
Selectores básicos
Reto tema claro/oscuro con variables
Reto especificidad y cascada
Todas las lecciones de CSS
Accede a todas las lecciones de CSS y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.
Introducción A Css
Introducción Y Entorno
Entorno Para Desarrollar Css
Introducción Y Entorno
Sintaxis
Sintaxis De Selectores Y Propiedades
Selectores Básicos
Sintaxis De Selectores Y Propiedades
Herencia Y Cascada
Sintaxis De Selectores Y Propiedades
Pseudo-clases Y Pseudo-elementos
Sintaxis De Selectores Y Propiedades
Colores En Css
Sintaxis De Selectores Y Propiedades
Unidades De Medida
Sintaxis De Selectores Y Propiedades
Especificidad
Sintaxis De Selectores Y Propiedades
Estilos De Fuente
Estilización De Texto Y Fondo
Propiedades De Texto
Estilización De Texto Y Fondo
Sombras En Texto Y Cajas
Estilización De Texto Y Fondo
Propiedades De Fondo
Estilización De Texto Y Fondo
Fuentes Web
Estilización De Texto Y Fondo
Efectos De Texto: Gradientes, Recortes
Estilización De Texto Y Fondo
Tipografía Avanzada
Estilización De Texto Y Fondo
Modelo De Caja
Modelo Caja
Propiedades De Posicionamiento
Modelo Caja
Propiedad 'Display'
Modelo Caja
Elementos 'Float' Y 'Clear'
Modelo Caja
Rellenos Y Márgenes
Modelo Caja
Bordes Y Contornos
Modelo Caja
Absolute, Fixed, Sticky Y Z-index
Posicionamiento
Flexbox Para Crear Layouts Y Estructuras
Flexbox
Css Grid Para Crear Layouts Y Estructuras
Flexbox
Propiedades Del Contenedor Flex
Flexbox
Propiedades De Los Items Flex
Flexbox
Columnas Y Filas En Grid
Css Grid
Espaciado Y Alineación
Css Grid
Tipografía Responsive
Diseño Responsive
Fundamentos Del Diseño Responsive
Diseño Responsive
Imágenes Responsive
Diseño Responsive
Funciones Matemáticas
Variables Y Funciones Css
Transformaciones 2d
Transformación, Transición, Animación
Transformaciones 3d
Transformación, Transición, Animación
Animaciones
Transformación, Transición, Animación
Transiciones
Transformación, Transición, Animación
Css Para Formularios
Css Avanzado
Accesibilidad Web Con Css
Css Avanzado
Container Queries
Css Avanzado
Selectores Avanzados
Css Avanzado
Animaciones Y Transiciones
Técnicas Modernas Y Metodologías
Variables En Css
Técnicas Modernas Y Metodologías
Diseño Responsive Con Media Queries
Técnicas Modernas Y Metodologías
Metodologías De Escritura En Css
Técnicas Modernas Y Metodologías
En esta lección
Objetivos de aprendizaje de esta lección
- Comprender el funcionamiento de la propiedad vertical-align y el concepto de baseline para alinear elementos inline.
- Conocer las estrategias de carga de fuentes web mediante la propiedad font-display y técnicas asociadas.
- Aprender a controlar el kerning y las ligaduras usando font-feature-settings y propiedades específicas.
- Aplicar ajustes tipográficos avanzados para mejorar la legibilidad y estética del texto en la web.
- Identificar limitaciones y buenas prácticas para optimizar el rendimiento y compatibilidad tipográfica.