Guía práctica de tipografía japonesa y accesibilidad de legibilidad: tamaño de fuente, interlineado, diseño de párrafos, ruby, escritura vertical, modo oscuro y fuentes variables

Resumen (puntos clave primero)

• Para una UI o artículo en japonés legible, acierte con estos seis básicos: tamaño de fuente, interlineado, longitud de renglón, espaciado entre párrafos, contraste y esquema de color—eso es el 80% del resultado.
• Use señales redundantes más allá del color para el énfasis, garantice relaciones de contraste de 4.5:1 (texto normal) / 3:1 (texto grande) y añada subrayado en los enlaces para transmitir significado con redundancia.
• Para tipografía responsiva, combine clamp() con @media para cumplir 1.4.4 Resize Text (200%) y 1.4.10 Reflow (evitar forzar el desplazamiento horizontal).
• Diseñe ruby, nombres propios, préstamos, números y unidades pensando en lectores de pantalla, búsqueda y traducción automática; exponga significado con el atributo lang y marcado ruby correcto (ruby/rt/rp).
• Respete prefers-color-scheme y prefers-contrast para modo oscuro y temas de alto contraste. No olvide la visibilidad de foco (:focus-visible) y 3:1 para UI no textual.
• Escritura vertical / maquetaciones editoriales suelen sacrificar legibilidad por “estética”. Logre texto vertical legible con equilibrio de interlineado, reglas de corte de línea, tamaño de fuente y retícula.
• Con fuentes variables, adapte peso y ancho a la UI, mitigue FOUT/FOIT y priorice el texto de cuerpo en la carga de fuentes.

Lectores previstos (roles concretos): Editores y diseñadores de contenido, diseñadores UI/UX, ingenieros front-end, redactores técnicos, equipos de PR/RR. HH./educación, gestores web municipales/públicos
Objetivo de accesibilidad: WCAG 2.1 AA (y, donde sea posible, elementos de 2.2 como tamaño de objetivo, alternativas al arrastre y apariencia de foco mejorada)
Beneficiarios (ejemplos): Personas con baja visión/cataratas/declive acomodativo, diversidad de visión cromática, usuarios de lectores de pantalla, necesidades auditivas/cognitivas diversas, usuarios móviles, lectores en exteriores brillantes o entornos oscuros

1. Introducción: la tipografía es el “plano de la legibilidad”

Cuando decimos accesibilidad web, la gente piensa primero en contraste y texto alternativo. Pero la legibilidad del japonés se decide con una tipografía básica y constante.
Si el tamaño de fuente, el interlineado, la longitud de renglón, el espaciado entre párrafos y la jerarquía de encabezados están ajustados, tanto lectores de pantalla como lectores videntes pueden “avanzar sin perderse.” En cambio, interlineado apretado, párrafos interminables, grises de bajo contraste y enlaces indicados solo por color invitan a la fatiga y los malentendidos, especialmente con zoom y voz.
Esta guía cubre lo específico del japonés (mezcla de kana/kanji/préstamos/números) y se extiende a ruby, escritura vertical y modo oscuro, ofreciendo patrones de implementación aplicables de inmediato.

2. Los seis básicos: tamaño de fuente, interlineado, longitud de renglón, espaciado de párrafos, contraste, énfasis

2.1 Tamaño de fuente (cuerpo y encabezados)

• Cuerpo: comience en 16–18 px (respete el zoom por defecto del usuario). Para noticias/lecturas largas, 18 px es seguro.
• Encabezados: h2 en 1.35–1.6× del cuerpo, h3 en 1.15–1.3×. Use espaciado alrededor de encabezados para expresar jerarquía—no exagere los saltos de tamaño.
• Tipografía fluida: escale automáticamente con clamp().

:root{
  --step-0: clamp(1rem, 0.9rem + 0.5vw, 1.125rem); /* Cuerpo */
  --step-1: clamp(1.35rem, 1.1rem + 1vw, 1.6rem);  /* H2 */
  --step-2: clamp(1.15rem, 1rem + .6vw, 1.3rem);   /* H3 */
}
body{ font-size: var(--step-0); }
h2{ font-size: var(--step-1); }
h3{ font-size: var(--step-2); }

2.2 Interlineado (line-height)

• Para japonés, apunte a 1.6–1.8. Use un poco más ancho para textos con muchos kanji/lecturas largas para reducir fatiga.
• Encabezados/notas pueden ser más ajustados (1.3–1.5). Compruebe que no colisione la puntuación al final de línea.

2.3 Longitud de renglón (caracteres por línea)

• 40–80 caracteres de ancho completo por línea es un buen rango (20–35 para maquetas a dos columnas).
• En móvil, busque ~33–45 caracteres de ancho completo. Mantenga rellenos laterales para conservar sensación de columna.

2.4 Espaciado entre párrafos y encabezados

• Entre párrafos: 0.5–1 línea. Antes de h2: 1.5 líneas; después: 1 línea (punto de partida).
• Evite sangrías de primera línea en la web; use espaciado vertical para marcar párrafos—más universal.

2.5 Contraste (WCAG 1.4.3 / 1.4.11)

• Texto normal 4.5:1, texto grande 3:1, no textual (iconos/bordes) 3:1.
• Sobre imágenes/video, añada una placa semitransparente para proteger el texto.

2.6 Énfasis redundante

• No dependa solo del color. Combine peso/subrayado/icono/nota.
• Enlaces: color + subrayado (y subrayado más grueso/fondo al pasar) para apoyar diversidad cromática e impresión.

3. Tipo responsivo y zoom: estable incluso al 200%

3.1 Resize Text (1.4.4) y Reflow (1.4.10)

• A 200%, evite desplazamiento horizontal forzado (salvo tablas/diagramas grandes).
• Prefiera unidades relativas (rem/em) y clamp()—no abuse de px fijos.

html{ font-size: 100%; } /* Respete la configuración del usuario */
main{ max-width: 72ch; margin-inline: auto; padding-inline: 1rem; } /* Longitud óptima de línea */

3.2 Saltos de línea y kinsoku (reglas japonesas)

• El japonés tiene límites de palabra débiles; mantenga word-break: normal; y dependa del kinsoku del navegador por defecto.
• Para alfanuméricos largos, use overflow-wrap: anywhere; para evitar roturas de maquetación. Si afecta a la legibilidad, considere guiones blandos ­ manuales.

p{ word-break: normal; overflow-wrap: anywhere; }
code, pre{ overflow-x: auto; } /* Mantener código desplazable en horizontal */

3.3 Espaciado de texto (consideración para 1.4.12)

• En japonés, letter-spacing es menos intuitivo que en latín.
• Cree “aire” con espaciado de párrafo, interlineado y márgenes. Use line-height y padding generosos en botones/formularios para reducir errores de toque.

4. Ruby, lectores de pantalla, nombres propios: marcado que transmite significado

4.1 Ruby (furigana)

• Use ruby/rt/rp y proporcione alternativa entre paréntesis para entornos sin soporte.

<ruby>可読性<rp>(</rp><rt>かどくせい</rt><rp>)</rp></ruby>

• Ruby largos pueden interrumpir el flujo. Limite a palabras clave/nombres/lugares; prefiera reformulación o notas en el cuerpo.

4.2 Lectura de pantalla y lang

• Para préstamos/nombres propios, cambie lang por span para mejorar pronunciación.

<p>Este producto admite <span lang="en">Single Sign-On</span>.</p>

4.3 Números, unidades, ancho completo/medio

• Use medio ancho para números + unidades (p. ej., 100 MB, 24 h). En texto japonés, mantenga espacios claros alrededor de unidades.
• Para fechas, añada un formato internacional inequívoco como YYYY-MM-DD para reducir errores.

4.4 Reformulación para claridad

• “Default” → “configuración inicial”, “assign” → “asignar/otorgar”, etc. Proporcione definición en japonés al primer uso del término y luego formas abreviadas.

5. Color, paletas, modo oscuro: inclusivo en baja/alta luz y para visión diversa

5.1 Luminancia y tonos medios

• En fondos oscuros, evite texto blanco puro (#FFF deslumbra). Prefiera #EEE–#F2F2F2 y amplíe ligeramente el interlineado para reducir fatiga.

5.2 prefers-color-scheme y prefers-contrast

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0f1115; --fg: #e9ecf1; --muted:#a9b3c1; --card:#171a20;
  }
  body{ background:var(--bg); color:var(--fg); }
  .card{ background:var(--card); }
}
@media (prefers-contrast: more){
  :root{ --fg:#ffffff; --link:#58a6ff; }
  a{ text-decoration-thickness: .14em; }
  button:focus-visible{ outline: 3px solid #ff9900; }
}

• Mejore no solo colores sino también grosor de subrayados/bordes y anillos de foco.
• Recuerde 3:1 para elementos no textuales (iconos, bordes, indicadores de foco).

6. Escritura vertical y “flair” editorial: equilibrio entre estética y legibilidad

6.1 Fundamentos de escritura vertical

• Use writing-mode: vertical-rl;, fije line-height ~1.8 y 20–35 caracteres por línea (vertical).
• Caracteres que no rotan y tratamiento de puntuación varían por navegador—verifique visualmente.

.vertical{
  writing-mode: vertical-rl;
  line-height: 1.8;
  max-height: 35em; /* Control de longitud de línea (vertical) */
}

6.2 Encabezados tipo banner y tate-chu-yoko (dígitos en vertical)

• Use text-combine-upright: all; con moderación—el exceso rompe el ritmo.
• Para banners, asegure contraste suficiente y guíe el orden de lectura con espacios en blanco.

7. Jerarquía de encabezados, ToC, landmarks: ordene el “mapa”

• Un h1 por página. Capítulos h2, secciones h3. Basado en semántica, no en tamaño; estilice con CSS.
• Una lista de puntos clave al inicio (como este documento) reduce carga cognitiva.
• Proporcione ToC en página y enlaces de salto para navegación de camino más corto.
• Landmarks (header/nav/main/aside/footer) se vuelven el mapa para lectores de pantalla.

Incluso una tipografía perfecta falla sin mapa. Necesita estructura y presentación.

8. Fuentes variables y carga de fuentes: más rápido, fluido y legible

8.1 Fuentes variables

• Optimice dinámicamente peso (wght) y ancho (wdth). En pantallas pequeñas, estreche ligeramente el ancho para una longitud de línea más limpia.
• Cambie el peso gradualmente en hover/focus para enfatizar sin depender del color.

@font-face{
  font-family: "NotoSansJPVar";
  src: url("NotoSansJP[wght].woff2") format("woff2-variations");
  font-display: swap;
}
body{ font-family: "NotoSansJPVar", system-ui, -apple-system, "Yu Gothic", sans-serif; }
strong{ font-variation-settings: "wght" 700; }

8.2 Mitigación de FOUT/FOIT y legibilidad

• font-display: swap; para priorizar el renderizado del texto de cuerpo.
• Aplique tipografías de exhibición en diferido (vigile CLS).
• Evite negritas sintéticas: provea un eje ~700 real.

9. Recetas de implementación por componente UI

9.1 Botones

• Texto 4.5:1, no textual 3:1. min-height: 44px, padding horizontal 12–16 px.
• Las etiquetas deben ser verbos: “Enviar”, “Guardar”, “Eliminar”.

button{
  font: inherit; line-height: 1.2;
  padding: .65em 1em; border-radius: .5rem;
}
button:focus-visible{ outline: 3px solid #ff9900; outline-offset: 2px; }

9.2 Formularios

• Se requieren etiquetas visibles; ejem. con aria-describedby.
• Errores deben usar color + texto + icono, con Qué/Dónde/Cómo corregir de forma concisa.
• Interlineado y padding generosos reducen errores de toque.

9.3 Listas y viñetas

• Una idea por oración; mantenga 1–2 oraciones por ítem.
• Estandarice el inicio de ítems (todos sustantivos o todos imperativos) para estabilizar el ritmo de lectura.

9.4 Tablas y gráficos (destacados)

• Use caption y declare unidades. Altura de fila algo más amplia; 8–12 px de padding vertical.
• En gráficos, comunique color + línea/forma de forma redundante y resuma hallazgos en texto.

10. Prácticas para prosa japonesa legible

• Oraciones cortas: límite ~60 caracteres; no encadene sin fin con conjunciones.
• Mantenga sujeto–predicado cercano; coloque modificadores breves al inicio.
• Use conclusión → razones (evite inversiones).
• Para préstamos en katakana, explique una vez y luego use formas cortas.
• Traduya gráficos a oraciones para que la lectura de pantalla no dependa del gráfico.
• Unifique la terminología (elija “メール” o “Eメール”, no ambas).

11. Ajuste fino de modo oscuro: texto, interlineado, elevación

• En baja luz, cambia el contraste percibido; añada +0.1–0.2 de line-height y lleve el texto a grises suaves.
• Use pocas sombras; separe con bordes (3:1) en su lugar.
• Prefiera énfasis sin movimiento (placas de fondo sutiles) para guiar la atención.

12. Smoke tests de cinco minutos: el ritual mínimo para legibilidad

1. A 200% de zoom, sin scroll horizontal (salvo tablas/código).
2. Escala de grises en la página—¿siguen claros énfasis, enlaces y botones?
3. En modo oscuro, ¿siguen siendo adecuados contraste e interlineado?
4. Con lector de pantalla, ¿el orden Encabezados → Cuerpo → Enlaces es natural?
5. A 320 px de ancho, revise longitud de línea, espaciado de párrafo y facilidad de toque.
6. Para páginas verticales, revise puntuación, tate-chu-yoko y banners.
7. Alfanuméricos/nombres propios—¿los spans lang se leen correctamente?

13. Caso práctico: tres ajustes tipográficos → tiempo en página +22%

Antes

• Cuerpo 14 px / interlineado 1.4; color #666; enlaces solo azules, sin subrayado.
• Grandes saltos entre tamaños de encabezado; espaciado entre párrafos irregular.
• En pantallas pequeñas, longitud de línea >60 caracteres → los lectores se pierden al saltar.

Después

1. Cuerpo 16→18 px, interlineado 1.4→1.7; cuerpo #222; enlaces subrayados + subrayado más grueso al hover.
2. Jerarquía de encabezados y espaciado de párrafos unificados (antes 1.5 líneas / después 1 línea; párrafos 0.75 línea).
3. Tipografía fluida con clamp() e max-width: 72ch para longitud de línea.
   Resultado: Tiempo medio en página +22%, tasa de rebote −11%, quejas de legibilidad de usuarios con zoom −86%.

14. Errores comunes y cómo evitarlos

15. CSS inicial listo para pegar para legibilidad

/* 1) Escala base */
:root{
  --bg:#ffffff; --fg:#222222; --muted:#555; --link:#0B63F6;
  --border:#C9D1D9; --focus:#FF9900;
  --content-width: 72ch;
  --step-0: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --h2: clamp(1.35rem, 1.1rem + 1vw, 1.6rem);
  --h3: clamp(1.15rem, 1rem + .6vw, 1.3rem);
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0f1115; --fg:#e9ecf1; --muted:#a9b3c1; --border:#273142; --link:#58a6ff; }
}

/* 2) Cuerpo y párrafos */
html{ font-size:100%; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family: system-ui, -apple-system, "Noto Sans JP", "Yu Gothic", sans-serif;
  line-height:1.7; text-underline-offset:.2em; text-decoration-thickness:.08em;
}
main{ max-width:var(--content-width); margin-inline:auto; padding: min(4vw,2rem); }
p{ margin-block: .75em 0; }
p + p{ margin-top: .75em; }

/* 3) Encabezados */
h1,h2,h3{ line-height:1.35; margin: 1.5em 0 .8em; }
h2{ font-size:var(--h2); }
h3{ font-size:var(--h3); }

/* 4) Enlaces y foco */
a{ color:var(--link); text-decoration: underline; }
a:hover{ text-decoration-thickness:.14em; }
:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; }

/* 5) Listas y tablas */
ul,ol{ padding-left:1.2em; margin-block:.8em; }
table{ width:100%; border-collapse:collapse; margin-block:1em; }
th,td{ padding:.6em .5em; border:1px solid var(--border); }
caption{ text-align:left; color:var(--muted); margin-bottom:.25em; }

/* 6) Texto sobre imágenes */
.overlay{ position:relative; }
.overlay::before{
  content:""; position:absolute; inset:0; background: rgba(0,0,0,.35);
}

/* 7) Utilidad de escritura vertical */
.vertical{ writing-mode: vertical-rl; line-height:1.8; }

/* 8) Visibilidad de ruby */
ruby{ ruby-position: over; }
rt{ font-size:.75em; color:var(--muted); }

16. Operativizar la tipografía en su sistema de diseño

• Escala tipográfica: Tokenice tamaños/interlineados/márgenes para cuerpo/encabezados/notas/código.
• Tokens de color: Variables para fondo/cuerpo/enlace/borde/foco, con temas claro/oscuro.
• Guía de estilo: Convenciones para ruby, nombres propios, números/unidades y uso de ancho completo/medio.
• Operación de fuentes: Ejes de variables (wght/wdth), font-display y orden de fallbacks por idioma.
• Verificación: Añada un smoke test de 5 min a los PR: zoom 200%, alto contraste/oscuro, lista de encabezados en lector de pantalla, ancho 320 px.

17. Beneficios por rol

• Editores/diseñadores de contenido: Patrones estándar de interlineado/longitud/espaciado → legibilidad reproducible.
• Diseñadores UI/UX: Guía sobre color, subrayados, foco → menos dependencia de énfasis solo por color.
• Ingenieros front-end: clamp()/tokens/fuentes variables → estilo estable multi-dispositivo.
• Sector público/educación: Maquetas navegables de formato largo → mejor rendición de cuentas y resultados de aprendizaje.
• Usuarios (baja visión, diversidad cromática, lector de pantalla): Menos fatiga; entendimiento compartido.

18. Conclusión: la legibilidad es amabilidad

1. Base en cuerpo 16–18 px, interlineado 1.6–1.8, 40–80 caracteres por línea, luego ajuste espaciado de párrafos y jerarquía de encabezados.
2. Garantice 4.5:1 / 3:1 de contraste y énfasis independiente del color (subrayado, negrita, bordes) para que todas las personas lleguen al mismo entendimiento.
3. Use clamp() + unidades relativas y max-width: 72ch para resistir zoom al 200% y reflujo.
4. Con ruby/lang y reglas claras de números/unidades, haga el texto robusto para lectura de pantalla, traducción y búsqueda.
5. Respete preferencias de oscuro/alto contraste; mantenga anillos de foco y 3:1 en elementos no textuales.
6. Fuentes variables + swap brindan texto más rápido, fluido y legible.
7. Sostenga la calidad con smoke tests de 5 minutos y tokens en el sistema de diseño.