Resumen de Principios Fundamentales de Tipografía y Composición
Principios Fundamentales de Tipografía y Composición: Guía SEO
Introducción
Breve guía práctica sobre unidades tipográficas y consideraciones de texto para la web. Aquí veremos qué unidades existen (absolutas y relativas), cómo influyen en la legibilidad, cómo se aplican en herramientas como Figma y buenas prácticas para ancho de línea, interlineado, color y funciones OpenType en entornos digitales.
Definición: El "body" es el tamaño base del texto que representa el contenido principal de lectura en una página.
1. Unidades tipográficas en la web
Unidades absolutas
- px (píxel): unidad usada frecuentemente en la web. Es la unidad absoluta más habitual, aunque su tamaño físico varía según el dispositivo y la densidad de pantalla.
Definición: Unidad absoluta es una medida fija (como px) cuyo valor puede depender del dispositivo, no de la escala relativa del documento.
Unidades relativas
- rem: relativo al tamaño de la raíz (root) del documento (normalmente al tamaño del elemento html o del body). Muy útil para escalabilidad global.
- em: relativo al tamaño de fuente del elemento padre. Bueno para escalas locales, pero puede tener acumulación de tamaño.
- %: porcentaje respecto a un contenedor.
- vh / vw: unidades relativas al viewport (1vh = 1% de la altura visible, 1vw = 1% del ancho visible).
- pt: puntos; Figma usa pt para fuentes, aunque en CSS se usan raramente para diseño adaptable.
Definición: Unidad relativa cambia según el contexto (raíz, elemento padre, viewport), facilitando diseños responsivos.
Tabla comparativa
| Unidad | Relativa/Absoluta | Uso típico | Ventaja | Precaución |
|---|---|---|---|---|
| px | Absoluta | Posiciones, medidas precisas | Predecible en diseño visual | No escala fácil entre dispositivos |
| rem | Relativa | Tipografías base y escalado general | Control centralizado | Depende del tamaño raíz |
| em | Relativa | Componentes locales | Escala con contexto | Puede acumularse |
| % | Relativa | Anchos, tamaños relativos | Flexible | Dependiente del contenedor |
| vh / vw | Relativa | Tipos responsivos y layouts | Relacionado al viewport | Puede generar tamaños extremos |
| pt | Absoluta* | Figma para fuentes | Coincide con medidas tipográficas | En la web no siempre consistente |
2. Body: tamaño base y recomendaciones
- Valor por defecto de navegador: típicamente 16px, aunque el usuario puede modificarlo.
- No existe una fórmula única para el "cuerpo ideal"; sin embargo, las prácticas recomiendan considerar legibilidad, contraste, espaciado y tamaño entre 8 a 18 px según contexto.
Qué influye en elegir el tamaño de body
- Tamaño y densidad de pantalla
- Distancia de lectura (monitor vs móvil)
- Tipografía (x-height, grosor de trazo)
- Contenido y público objetivo
- Espaciado vertical y horizontal
Expresiones posibles: px, em, rem, pt, %, vh, vw.
3. Ancho de línea (line length)
- Recomendación práctica: entre 50 y 75 caracteres por línea.
- En medidas CSS equivalentes: rango aproximado min 20em, max 38em (depende de tamaño de fuente elegido).
- Material Design, HIG de Apple y otras guías coinciden en rango similar.
Definición: Ancho de línea es la cantidad de caracteres legibles por línea que optimizan la fluidez de lectura.
Relación con interlineado: ambos deben ajustarse en conjunto; ancho de línea muy ancho o muy estrecho afecta cómo se percibe la interlínea.
4. Interlineado (line-height) y leading
- Line-height en web equivale al concepto de leading en tipografía: distancia vertical entre líneas de texto.
- No hay fórmula perfecta; como regla práctica se sugiere un interlineado de aproximadamente 20% mayor que el cuerpo (por ejemplo, para 16px usar cerca de 19–20px), ajustando según tipo y diseño.
Factores que afectan el interlineado
- Altura x (x-height) de la fuente
- Estructura del diseño y anchura de colu
Regístrate para el resumen completo¿Ya tienes cuenta? Iniciar sesión
Unidades y Tipografía Web
Klíčová slova: Fundamentos de Tipografía, Diseño y creación de letras, Diseño y Creación de Tipos — Diseño de letras, Diseño y Creación de Tipos — Diseño tipográfico general, Caligrafía y técnicas de letra, Contexto histórico y teoría, Diseño y Creación de Tipos — Espaciado y kerning, Diseño y Creación de Tipos — Minúsculas y espaciado, Historia y producción tipográfica, Historia de la tipografía y tipógrafos, Sistemas de escritura y tipografía, Diseño y Creación de Tipos — Mayúsculas y versales, Diseño tipográfico y dibujo vectorial, Diseño y Creación de Tipos — Correcciones ópticas, Diseño y Creación de Tipos — Fundamentos tipográficos, Aplicaciones y Uso (Display y Editorial), Diseño y Creación de Tipos — Variantes y familias, Escrituras y tipografía histórica, Alfabetos y evolución histórica, Narrativa y Editorial — Tipografía y diseño editorial, Narrativa y Editorial — Tipografía y ortotipografía, Diseño y Creación de Tipos — Unidades y web, Diseño y formas históricas de letras, Diseño y Creación de Tipos — Caracteres tipográficos, Diseño y Creación de Tipos — Glifos y detalles, Narrativa y Editorial — Narrativa fantástica, Diseño y Creación de Tipos — Símbolos y ampersand
Klíčové pojmy: La unidad px es absoluta pero varía según dispositivo, Usar rem para escalado global y em para escalado local, Valor por defecto del body suele ser 16px pero debe ajustarse al contexto, Ancho de línea ideal: 50–75 caracteres (aprox. 20em–38em), Interlineado ≈ 20% mayor que el cuerpo como punto de partida, Preferir alineado a la izquierda; justificar es problemático en web, Evitar negro/ blanco puro sin comprobar contraste y accesibilidad, Funciones OpenType (ligaduras, versalitas, fractions) se pueden usar vía CSS, Figma usa px para layout y pt para tamaño de fuente; Text Styles para consistencia, Hyphenation y control de widows/orphans son posibles pero dependen del navegador