por Omar Benyakhlef | accesibilidad, CSS, Diseño para móviles, Diseño Web, Font, Fuentes, responsive, UX
Como diseñadores, nos vemos siempre en la obligación de ofrecer una experiencia de usuario excepcional. Una de esas técnicas es el uso de unidades relativas en lugar de unidades absolutas al definir tamaños y dimensiones en CSS. Este enfoque no solo simplifica el proceso de diseño, sino que también garantiza una adaptabilidad óptima en una amplia gama de dispositivos y pantallas. En este artículo, exploraremos en detalle qué son las unidades relativas, por qué son importantes y cómo pueden mejorar significativamente la calidad y la flexibilidad del diseño web.
El uso de unidades relativas en el diseño web es una práctica fundamental para crear experiencias de usuario adaptables, escalables y fáciles de mantener. Al adoptar em, rem y porcentajes en lugar de dimensiones absolutas, los diseñadores pueden garantizar que su contenido se vea y funcione de manera óptima en una amplia variedad de dispositivos y pantallas. Además, las unidades relativas fomentan la accesibilidad al permitir que los usuarios ajusten el tamaño del texto según sus preferencias personales, lo que resulta en una experiencia más inclusiva para todos. En resumen, al priorizar las unidades relativas en el diseño web, los diseñadores pueden crear sitios web que sean flexibles, adaptables y atractivos para una audiencia diversa.
¿Qué son las unidades relativas?
En CSS, las unidades relativas son aquellas cuyo tamaño se calcula en relación a otra propiedad, generalmente el tamaño de la fuente del elemento padre. Las unidades relativas más comunes son:
- Em (em): Esta unidad representa el tamaño de la fuente actual. Por ejemplo, si el tamaño de la fuente de un elemento es de 16 píxeles, 1em equivale a 16 píxeles. Si se establece un tamaño de fuente de 1.5em en un elemento con una fuente de 16 píxeles, el tamaño de fuente resultante sería de 24 píxeles (1.5 * 16).
Se recomienda su uso para tamaños de fuente y dimensiones que deben ajustarse en relación con el contenido de texto.
- Rem (rem): Similar a em, pero en lugar de basarse en el tamaño de la fuente del elemento padre, rem se calcula utilizando el tamaño de fuente del elemento raíz (generalmente el tamaño de fuente del elemento
<html>). Esto garantiza una mayor consistencia en todo el documento, ya que rem no se ve afectado por los cambios en el tamaño de la fuente de los elementos secundarios.
Rem es ideal para establecer dimensiones globales que deben mantenerse consistentes en todo el sitio web, como márgenes, rellenos y anchos de contenedores.
Vamos. a intentar verlo de un modo más claro en el siguiente ejemplo:
html {
font-size: 16px;
}
.nombre_clase {
font-size: 24px;
padding: 2em; margin: 2rem;
}
El padding definido con unidades em, se refiere al tamaño de la fuente de la clase a la que pertenece, es decir, padding: 2em = 2×24= 48px El margin, definido con unidades rem, se refiere al tamaño fuente del documento, es decir, margin: 2rem = 2×16=32px
La mayoría de los navegadores tienen por defecto el tamaño de texto de párrafo de 16px, este valor lo puede cambiar el usuario modificando las preferencias del navegador, esto significa que cuando utilizamos las unidades relativas rem, además, estamos dando la oportunidad al usuario de modificar el tamaño de todo el contenido de la web a su antojo, según sus preferencias.
Hemos definido em y rem para definir los tamaños de fuente, ahora vamos a ver cómo definir relativamente los demás tamaños.
- Porcentaje (%): Aunque no exclusivamente relativa al tamaño de la fuente, el porcentaje también se utiliza comúnmente para definir dimensiones en relación con el tamaño de su elemento padre. Por ejemplo, un ancho del 50% en un div hará que ese div tenga la mitad del ancho de su contenedor padre.
- VH: significa “viewport height”, es decir, altura de la ventana gráfica, que es la altura de la pantalla visible y que depende de cada uno de los dispositivos. 100VH representaría el 100% de la altura de la ventana gráfica o la altura completa de la pantalla.
- VW: significa «viewport weight», es decir, anchura de la ventana gráfica, el ancho de la pantalla visible, y 100VW representa el 100% del ancho de la pantalla.
La diferencia del % con VH y VW, es que el primero se refiere al elemento padre, y los segundos al tamaño de pantalla del dispositivo, los tres son imprescindibles si queremos ajustar elementos en función de la pantalla del dispositivo.
Ventajas del uso de unidades relativas:
- Escalabilidad y Adaptabilidad: Una de las principales ventajas de las unidades relativas es su capacidad para adaptarse a diferentes tamaños de pantalla y dispositivos. Al utilizar em o rem para definir tamaños de fuente y dimensiones de diseño, el contenido se ajusta automáticamente según el tamaño de la fuente del usuario o el tamaño de la pantalla, lo que garantiza una experiencia de usuario consistente y atractiva en todos los dispositivos, desde teléfonos móviles hasta pantallas de escritorio.
- Facilidad de Mantenimiento: Al evitar tamaños absolutos en favor de unidades relativas, se simplifica el proceso de mantenimiento del sitio web. Cambiar el tamaño de fuente base en el elemento raíz afectará automáticamente a todas las demás dimensiones definidas en unidades relativas, lo que facilita ajustar el diseño según las necesidades cambiantes del proyecto o las preferencias del usuario.
- Accesibilidad Mejorada: El uso de unidades relativas puede mejorar la accesibilidad del sitio web al permitir que los usuarios ajusten el tamaño de la fuente según sus preferencias. Esto es especialmente beneficioso para aquellos con discapacidades visuales o que simplemente prefieren un tamaño de fuente más grande para facilitar la lectura.
- Compatibilidad con Diseño Responsivo: Las unidades relativas son fundamentales para el diseño web receptivo, donde el diseño y el contenido se adaptan dinámicamente a diferentes resoluciones y tamaños de pantalla. Al utilizar em, rem y porcentajes en lugar de píxeles absolutos, se garantiza que el diseño se ajuste sin problemas a una variedad de dispositivos y configuraciones de pantalla.
por Omar Benyakhlef | accesibilidad, Diseño para móviles, Fuentes
El diseño web para dispositivos móviles se ha convertido en un aspecto crucial para garantizar una experiencia de usuario satisfactoria. Uno de los elementos más importantes del diseño móvil es el tamaño de la tipografía, ya que influye en la legibilidad, la accesibilidad y, en última instancia, en la retención de los visitantes. Aquí te brindamos pautas esenciales para utilizar el tamaño de tipografías de manera efectiva en dispositivos móviles. (más…)
por Omar Benyakhlef | Diseño para móviles, Diseño Web, Fuentes, UI, Usabilidad, UX
Cuando hablamos de diseñar para web o app, una de las preguntas que me suelen hacer es ¿cuál es el tamaño correcto que debo usar?.
La proliferación de pantallas HD lleva tiempo dándonos dolor de cabeza a los diseñadores. Lo que en un principio sólo era un simple «Pixel (px)» ahora se ha convertido en «puntos (pt)», «píxeles escalables (sp)» o «píxeles independientes de la densidad (dp)» como para no preocuparse !!
En este post no nos vamos a meter en temas de programación, vamos a enfocarlo sólo desde el punto de vista del diseñador, si se te escapan estos términos o la densidad de pantalla, o los factores de escala, lee este post de Densidad de pixel, tamaño de diseños para HTML, Android e iOS
Pues bien, para definir el tamaño correcto de fuentes, como es evidente, habrá que diferenciar si se trata de web, de web-mobile, de iOS o de Android, vamos a ello:
NOTA: Todas estas pautas están definidas por Google y Apple developer.
Pautas de tipografía de iPhone
| Títulos de página, títulos modales (el mayor tamaño para título será de 34pt) |
17pt |
| Texto de párrafo, enlaces |
17pt |
| Texto secundario |
15pt |
| Texto terciario, subtítulos, botones segmentados |
13pt |
| Botones, entradas de texto |
17pt |
| Barra de acciones (leyenda de iconos de acción) |
10pt |
Pautas de tipografía de Android
En este caso tomamos como referencia la fuente roboto
| Títulos de página |
20sp |
| Texto de párrafo, enlaces |
14sp |
| Lista de títulos |
14sp |
| Lista de títulos de elementos, fragmentos de texto importantes |
16sp |
| Texto secundario, subtítulos |
14sp |
| Botones, pestañas |
14sp |
| Entradas de texto |
16sp |
Pautas de tipografía para Web
| Títulos de página |
20px – |
| Texto de entrada |
16px |
| Tamaño de cuerpo |
16px |
| Texto secundario |
13 – 14px |
Los títulos a partir de 20px, luego ya queda a criterio del diseñador si quiere usar títulos extra grandes.
Equivalencias entre pt, px, em, %, sp
Para ver la equivalencia de sp o dp con px, accede aquí: Equivalencias px dp
| Pt |
Px |
Em |
Porcentaje |
| 6pt |
8px |
0.5em |
50% |
| 7pt |
9px |
0.55em |
55% |
| 7.5pt |
10px |
0.625em |
62.5% |
| 8pt |
11px |
0.7em |
70% |
| 9pt |
12px |
0.75em |
75% |
| 10pt |
13px |
0.8em |
80% |
| 10.5pt |
14px |
0.875em |
87.5% |
| 11pt |
15px |
0.95em |
95% |
| 12pt |
16px |
1em |
100% |
| 13pt |
17px |
1.05em |
105% |
| 13.5pt |
18px |
1.125em |
112.5% |
| 14pt |
19px |
1.2em |
120% |
| 14.5pt |
20px |
1.25em |
125% |
| 15pt |
21px |
1.3em |
130% |
| 16pt |
22px |
1.4em |
140% |
| 17pt |
23px |
1.45em |
145% |
| 18pt |
24px |
1.5em |
150% |
| 20pt |
26px |
1.6em |
160% |
| 22pt |
29px |
1.8em |
180% |
| 24pt |
32px |
2em |
200% |
| 26pt |
35px |
2.2em |
220% |
| 27pt |
36px |
2.25em |
225% |
| 28pt |
37px |
2.3em |
230% |
| 29pt |
38px |
2.35em |
235% |
| 30pt |
40px |
2.45em |
245% |
| 32pt |
42px |
2.55em |
255% |
| 34pt |
45px |
2.75em |
275% |
| 36pt |
48px |
3em |
300% |
Nielsen sugería un tamaño mínimo de 10 puntos correspondiente a 13px o bien 12 puntos que corresponde a 16 px si el público objetivo eran personas mayores.
Si nos fijamos en alguno de los sitios más visitados, Twitter, Amazon o Wikipedia, utilizan 14px y Google 13px
Todas estas tablas y medidas significan más tiempo a la hora de desarrollar un trabajo, pero son indispensables si queremos que el resultado de nuestros diseños sea perfecto en cualquier pantalla. Pero además de los tamaños de fuente, hay otros factores que son muy importantes y que ayudan a que la usabilidad sea mejor, un ejemplo es el interlineado, de nada sirve utilizar buenos tamaños si luego hacemos denso el texto. Como norma general se usa un mínimo del 120% del tamaño de la fuente para el interlineado, siendo 1.5em, 150% lo ideal- Tenemos que hacer que la lectura sea fluida, que no cueste diferenciar el renglón, pero que tampoco haya que pegar grandes saltos de una línea a otra.
Otra de las recomendaciones, se refiere a la cantidad de texto por línea. El ancho óptimo va de los 45 a 75 caracteres, estableciéndose que una línea de 66 caracteres se puede considerar ideal para obtener una buena experiencia de lectura.
Si lo que te preocupa es el contraste, hay una herramienta muy útil que nos indica si es o no correcta la elección que hemos designado a nuestro fondo y tipografía. Contraste fondo-tipografía
Más abajo tienes más artículos que te pueden ayudar también a la hora de elegir la fuente correcta.
por Omar Benyakhlef | Descargas, Font, Fuentes
Dugas es una fuente ultra condensada y minimalista ideal para el diseño de carteles, títulos y titulares. Aquí os dejo unos ejemplos en los que podéis ver la fuerza que tiene.
Puede ocurrir que si utilizamos tamaños pequeños de fuente o poco contraste con el fondo, llegue a ser poco legible, pero para eso siempre hay solución. Bastaría con darle a la fuente un estilo de trazo interior de 1px y con el mismo color de fondo, de ese modo le quitamos espesor a la tipografía, pero a cambio es más legible, es cuestión de gustos 😉
Al final del post puedes descargarte la fuente DUGAS de forma gratuíta
DESCARGA GRATIS LA FUENTE DUGAS
por Omar Benyakhlef | Font, Fuentes, Iconos
Me gusta tener un listado de sitios a los que recurrir cuando tengo necesidad de encontrar algo distinto. Unas veces se trata de inspiración, otras alguna fuente que me sorprenda, ¿sabes de lo que te hablo verdad? 😉
Frebie es uno de los últimos que he añadido a mis favoritos y que hoy me gustaría compartir con vosotros.
AHHH !!!! Y ES GRATIS !!!!!
Aquí os dejo una muestra de alguno de los recursos que podéis encontrar, y al final del post el enlace para visitarlo, espero que sea de vuestro agrado.
VISITAR FREBIE
por Omar Benyakhlef | Font, Fuentes
Facunda es una fuente gratuita creada por bybu.
Se trata de una fuente condensada ideal para titulares modernos con un aspecto retro-vintage. Cuenta con 5 estilos diferentes y es de uso público.
En principio os puede parecer que no hay diferencia en el estilo alternate, si os fijáis por ejemplo en la barra horizontal de la letra A, veréis que en la variedad alternate, en lugar de estar situada a mitad de altura, está un poco más alta.
A continuación os dejos una imagen para que podáis ver su aspecto y el botón de descarga.
(más…)
