Tipografía
Dos familias, cinco pesos, una escala que arranca en un cuerpo de 10,5 pt y los criterios con los que se compone el texto.
Arcasiles Group usa dos familias: BDSupperBold para títulos y cifras grandes, Lexend para todo lo que se lee de corrido. No hay una tercera. Si dudas, usa Lexend. Debajo tienes la escala completa —web y presentación— con el tamaño, el peso y el color de cada token.
BDSupperBold — display
Títulos de portada, cifras grandes y etiquetas de botón. En cuerpo de texto no: ahí va Lexend, que tiene los cinco pesos.
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ 0123456789 ¿? ¡! & —
Lexend — texto
Texto corrido, etiquetas, pies y datos. Cinco pesos: 300, 400, 500, 600 y 700.
abcdefghijklmnñopqrstuvwxyz 0123456789 ¿? ¡! & —
300400500600700
La escala, en vivo
Cada fila se compone al tamaño exacto que fija el canon v5.0.1, no a una aproximación. Lo que ves aquí es lo que sale en la plantilla.
#f5f5f5 #272727 #5d5d5d #afafaf Interlineado y mínimos
- interlineado display
- 1,1
- interlineado títulos
- 1,25
- interlineado cuerpo
- 1,6
- mínimo legible
- 8 pt
Cómo se compone el texto
Un texto bien escrito todavía puede no leerse. Estos son los criterios con los que Arcasiles Group compone el suyo, el del branding y el de cada producto, y vienen de la tipografía de libros. Los tamaños y el interlineado son los de la escala de arriba; el piso de contraste lo fija el capítulo Accesibilidad.
El color da énfasis; la estructura la marcan el peso y el tamaño. Un color se enseña con su color, y los enlaces con un subrayado separado de la base. El mínimo de todo es el contraste AA que fija el capítulo Accesibilidad .
Criterios de legibilidad
-
La medida. 45–75 caracteres por línea, con ~66 como óptimo.
Por qué Más ancha, el ojo se pierde al volver al margen izquierdo; más estrecha, tanto salto de línea cansa.
-
Jerarquía por peso y tamaño. El color es énfasis, no estructura.
Por qué El peso y el tamaño se leen en cualquier soporte —impresión, daltonismo, modo oscuro—; el color, no.
-
Equilibra el final de línea.
text-wrap: prettyen el cuerpo,balanceen los títulos; controla viudas y huérfanas.Por qué Una palabra suelta al cerrar el párrafo o un título partido en desequilibrio rompen el ritmo justo donde el ojo descansa.
-
Marca los datos en su forma. Un hex se enseña con su color; los enlaces, con subrayado offset.
Por qué Mostrar el dato en su propia forma —el color del color, un subrayado que no toca las letras— lo hace legible sin adornos.
El hex se enseña con su color, y el tono del rótulo sale del contraste WCAG: el amarillo nunca es texto. -
Ritmo de párrafo y listas cómodas. Párrafos cortos, listas con sangría de bandera y marcador claro.
Por qué Los cortes y las sangrías dan puntos de respiro y de reentrada para que el ojo no se pierda en el bloque.
Especificación completa (web y slide)
Escala web (scale_web_pt)
| Token | Familia | Tamaño | Color | Uso |
|---|---|---|---|---|
| coverTitle | Lexend 700 | 34 pt | #272727 | Titular de cubierta (A4) |
| h1 | BDSupperBold | 24 pt | #272727 | Títulos de página |
| h2 | Lexend 600 | 13 pt | #272727 | Secciones de documento |
| h3 | Lexend 600 | 11 pt | accent | #272727 | Subsecciones |
| body | Lexend 400 | 10,5 pt | #272727 | Texto corrido |
| bodyEmphasis | Lexend 600 | 10,5 pt | — | Cuerpo con énfasis |
| tableCell | Lexend 400 | 9,5 pt | — | Celdas de tabla |
| badge | Lexend 600 | 9 pt | #f5f5f5 | Badges |
| caption | Lexend 300 | 9 pt | #afafaf | Notas y pies |
| metricValue | BDSupperBold | 28 pt | accent | Valor de métrica |
| benefitNumber | BDSupperBold | 22 pt | accent | Número de beneficio |
| ctaTitle | BDSupperBold | 40 pt | #f5f5f5 | Título de CTA |
| copyright | Lexend 400 | 8 pt | #afafaf | Copyright |
| subtitle | Lexend 400 | 14 pt | #5d5d5d | Subtítulo de documento bajo h1 (A4); cierra el salto 24 pt → 13 pt |
| mono | Monospace del sistema (ui-monospace / Menlo / Consolas) | 8 pt | — | Datos y código — excepción funcional, no fuente de marca |
Mínimo legible: 8 pt. «accent» es el color de énfasis activo; sobre fondo claro se escribe con su tono text-safe (--arc-accent-strong), porque el amarillo crudo no se lee.
Escala slide (scale_slide_pt)
| Token | Familia | Tamaño | Color | Uso |
|---|---|---|---|---|
| slideTitle | BDSupperBold | 30 pt | #272727 | Título de slide |
| slideSubtitle | Lexend 400 | 16 pt | #5d5d5d | Subtítulo de slide |
| slideH2 | Lexend 700 | 20 pt | #272727 | Título de sección |
| slideBody | Lexend 400 | 13 pt | #272727 | Cuerpo de slide |
| slideCaption | Lexend 300 | 10 pt | #5d5d5d | Notas al pie |
Escala para presentaciones 16:9 (PPTX / SlidePage, lienzo 254 × 142,9 mm). Misma jerarquía que A4, cuerpos mayores por distancia de lectura.