CSS Tipografía

Propiedades que controlan fuente, tamaño, espaciado y alineación del texto.

Tipografía Playground Interactivo

Controla todas las propiedades tipográficas en tiempo real.

El veloz murciélago hindú comía feliz cardillo y kiwi. La cigüeña tocaba el saxofón detrás del palenque de paja.
p { font-size: 16px; }
text-shadow · font-variant Efectos

text-shadow añade sombras al texto. font-variant activa small-caps y variantes tipográficas.

Sombra suave

Neon glow

Small Caps con font-variant

@font-face · font-display Web Fonts

Carga fuentes personalizadas. font-display: swap muestra texto con fuente de respaldo mientras carga.

@font-face {
  font-family: 'MiFuente';
  src: url('fuente.woff2') format('woff2'),
       url('fuente.woff')  format('woff');
  font-weight: 400 700; /* rango */
  font-display: swap;
}

body { font-family: 'MiFuente', sans-serif; }
text-decoration — Playground Decoración

Controla el subrayado y otras decoraciones de texto. Ahora con control fino de color, estilo y grosor.

Texto de ejemplo


                

              

            

          


          

            

              writing-mode · text-orientation
              Dirección
            

            
Cambia la dirección del flujo del texto. Útil para etiquetas laterales, texto en japonés/chino y diseños creativos.

            

              

                
horizontal-tb
(default)

                
vertical-rl
Texto vertical

                
vertical-lr

              

              
/* Etiqueta lateral */
.label {
  writing-mode: vertical-rl;
  text-orientation: mixed;  /* default */
  transform: rotate(180deg);
}

            

          


          

            

              font-variant · font-feature-settings
              OpenType
            

            
Activa características tipográficas avanzadas de las fuentes OpenType: ligaduras, números de estilo antiguo, fracciones, versalitas.

            

              

                
Números old-style: 0123456789 (font-variant-numeric: oldstyle-nums)

                
Tabular: 1 11 111 1111 (alineación en tablas)

                
Small caps: Texto en versalitas

              

              
/* Forma moderna */
font-variant-numeric: oldstyle-nums;
font-variant-ligatures: common-ligatures;
font-variant-caps: small-caps;

/* Forma de bajo nivel (más control) */
font-feature-settings: "onum" 1, "liga" 1, "smcp" 1;

            

          


          

            

              Variable Fonts
              Moderno
            

            
Una sola fuente con ejes de variación continuos (peso, anchura, inclinación). Elimina la necesidad de múltiples archivos de fuente.

            

              
Variable Font Demo

              
              
@font-face {
  font-family: 'Inter';
  src: url('Inter.woff2') format('woff2-variations');
  font-weight: 100 900;  /* rango continuo */
  font-display: swap;
}
/* Uso de ejes */
.heading { font-variation-settings: 'wght' 750, 'wdth' 85; }

            

          


          

            

              text-overflow · truncación
              Recorte
            

            
Controla cómo se muestra el texto que desborda su contenedor. Requiere overflow: hidden y white-space: nowrap.

            

              

                
Una línea larga que se trunca con ellipsis cuando no cabe en el contenedor disponible

                
Varias líneas: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Truncado en 2 líneas.

              

              
/* 1 línea */
.truncate {
  overflow: hidden; white-space: nowrap;
  text-overflow: ellipsis;
}
/* N líneas */
.clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}