Typography
Símbolos, números y letras que se pueden imprimir en soporte físico y digital
Estilo tipográfico
Las fuentes son esenciales para crear un diseño magnífico, así como para los productos digitales multiplataformas, siendo fundamental para la consistencia visual, generando la misma experiencia para nuestros usuarios desde cualquier dispositivo con el que accedan a elektra.mx
Designed by Christian Robertson
El estilo de esta familia de fuentes, no incluye adornos, ni pequeñas terminaciones o remates, es recomendable para usar en pantallas y evitar sobrecargas para cansar la vista y facilita la lectura. Es una tipografía de código abierto con un aspecto profesional y de libre acceso. Roboto es el tipo de estilo de fuente predeterminado en el sistema operativo Android desde la versión 4.0 de 2010, actualmente es una de las fuentes recomendada en el Design System de Android: Material Design.
También tiene un amplio conjunto de caracteres que incluye muchos alfabetos internacionales. Incluye un amplio conjunto de caracteres en alfabeto latino, cirílico, griego, hebreo, árabe y chino. La estructura tiene una forma geométrica con un esqueleto mecánico.
La fuente contiene 28 estilos y es también un tipo de letra que incluye pesos fino, ligero, regular, medio, negrita y negro.
Uno de los beneficios principales de la tipografía es que siendo una fuente de código abierto es de uso libre en cualquier plataforma digital o impresa, por lo que su implementación no representa ningún problema en términos de licencias de uso.
Desde su diseño, Roboto ha sido uno de los tipos de letra más populares en todo el mundo. Es sencillo, limpio y fácil de entender. Con su diseño sencillo, Roboto se impone con fuerza, sin embargo, ¿qué es lo que lo hace tan especial? Hay tres factores principales: patrones de diseño únicos, resolución rápida y carácter estable. Cada uno de estos factores es importante en el diseño tipográfico de Roboto. También tiene una gran altura x, lo que facilita su lectura en tamaños pequeños.
Roboto ofrece una experiencia de lectura óptima, porque evita la tensión diagonal que puede causar molestias al lector. La familia tipográfica tiene un amplio soporte lingüístico. Debido a la naturaleza dual de la fuente, es más amigable y adecuada para la mayoría de las secciones que se quieran utilizar.
Usando Roboto
Desde que Christian Robertson la diseñó en 2010, clientes como Google, Scholastic y The Guardian han utilizado el tipo de letra Roboto. Es conocido por su uso de un tipo de letra sin gracia fuerte, así como por su capacidad para destacar frente a una variedad de estilos de fuente diferentes. Ahora, más que nunca, las nuevas empresas tecnológicas utilizan el tipo de letra Roboto para darles una sensación de estabilidad visual.
En conclusión, Roboto es una nueva fuente que fue diseñada para ser más legible en pantallas móviles. Muchos fabricantes la utilizan, como Apple y Google. Para garantizar la consistencia y facilidad de lectura en todos los dispositivos, es importante mantener y respetar en todo momento el uso de Roboto como familia tipográfica oficial para los productos que estaremos desarrollando en elektra.mx y no utilizar alguna diferente en ningún caso.
¿Por qué elegimos Roboto para elektra.mx?
Elegimos Roboto como la tipografía general y oficial para la plataforma digital de elektra.mx, al ser una fuente sencilla y clara de leer en cualquier dispositivo, con una amplia variedad de estilos, así como la ventaja de ser Open Source y ser utilizada en cualquier plataforma sin restricciones o temas de licencias.
Tamaño de tipografías
Al momento de diseñar pantallas en las que se utilicen distintos tamaños de texto, funciones y ubicaciones, es vital definir el tamaño de estas con base en la jerarquía tipográfica oficial y no improvisar o calcular el tamaño de la letra en cada uno de los componentes, botones, títulos, textos, etc.
¿Hoy que tenemos en elektra.mx?
Hoy actualmente en la página tenemos componentes, botones e información con una tipografía y tamaño distintos, por ello es que necesitamos ajustar los estilos para que su consistencia visual se homologue y se aprecie mejor para nuestros usurarios. En el siguiente ejemplo podemos observar la diferencia con los estilos ajustados.
¿Cuál es la jerarquía tipográfica?
La jerarquía tipografía, es de los principios de mayor importancia para el desarrollo de la interface del usuario. Esta nos apoyará en desarrollar textos claros y legibles, además de conducir al usuario de manera intuitiva a explorar y leer el texto. Explicado fácilmente, esto se da como un buen uso, ya que genera un máximo impacto a través del texto y el diseño. La jerarquía crea contraste entre los elementos y a su vez esto logra la utilización de los tipos de letra, tamaño, peso, letras mayúsculas, minúsculas, negritas o cursivas, orientación y color en distintas capas.
¿Y cuál es su uso correcto de la jerarquía en nuestro producto?
Al momento de diseñar las interfaces es importante mantener la consistencia tipográfica dada por la jerarquía definida, esto nos permitirá generar pantallas legibles y ordenadas a la vista del usuario en cualquier parte de su proceso sin importar el dispositivo que esté utilizando.
¿Cómo se compone una caja de texto en el PDP?
Las cajas de texto deberán ser determinadas en sus dimensiones de acuerdo al Grid de 8 píxeles y alineadas o centradas a las columnas para mantener la consistencia visual y los espacios entre los elementos de manera correcta:
Alineación correcta de cajas de texto
Medidas verticales de cajas de texto sugeridas
¿Cuál es el interlineado correcto?
Un fundamento relacionado directamente con el ritmo vertical es el interlineado (Line Height) entre los párrafos del contenido, es importante que se asignen espaciados mínimos para generar una lectura fluida y clara sin que las líneas de texto se sobrepongan o se encuentren muy separadas entre sí.
Es importante respetar los parámetros asignados en la tabla de la jerarquía tipográfica para garantizar un espaciado adecuado de acuerdo al tamaño de la fuente utilizado.
¿Como usar el interlineado de manera correcta?
Alineación de textos
La alineación de texto juega un papel vital en la experiencia de lectura del contenido, es importante que esta siempre se configure desde la izquierda para generar fluidez en la lectura y evitar el formato centrado o justificado para rellenar los espacios vacíos con el fin de mitigar la fatiga visual al leer, sobre todo en textos largos.
¿Cuál es la longitud de párrafo recomendada?
Una longitud de párrafo adecuada es crucial para asegurarnos que nuestros clientes leerán el contenido. Si un párrafo es demasiado largo y el texto es amplio, es posible que los lectores no lo lean completo. En cambio, si utilizamos líneas cortas es más cómoda y rápida la lectura, garantizando que nuestro contenido será leído.
Estilo tipográfico para Apps
La tipografía es uno de los elementos que más contribuyen a definir el aspecto final de un producto digital. Así que es muy importante que se incluyan todas sus características en el Design System: fuente, variantes, tamaño, interlineado, espaciado.
En este espacio abordaremos un poco más a fondo la tipografía de Apple para iOS (San Francisco) para conocer más el porqué de esta tipografía y que es lo que ofrece al equipo de diseño y desarrollo.
San Francisco es un tipo de letra diseñado por Apple que proporciona una voz tipográfica coherente, legible y amigable. En todos los productos Apple, los contornos de tamaño específico y el seguimiento dinámico garantizan una legibilidad óptima en cualquier tamaño de punto y resolución de pantalla. Los números tienen una anchura proporcional por defecto, para que se sientan armoniosos y espaciados de forma natural dentro de las interfaces centradas en el tiempo y los datos que la gente utiliza a diario.
La tipografía contiene 9 pesos o estilos, incluida la cursiva, y funciones como minúsculas, fracciones, números inferiores y superiores, índices, flechas, etc., ofrece amplitud y profundidad para una composición tipográfica de precisión. San Francisco también se adapta inteligentemente a diferentes contextos. Al indicar la hora, por ejemplo, los dos puntos de San Francisco cambian a una forma centrada verticalmente.
Se introdujo por primera vez con el lanzamiento del Apple Watch en 2015 y, desde entonces, se ha convertido en el tipo de letra predeterminado de todos los productos de Apple, incluidos iOS, macOS y tvOS. La fuente se diseñó para que fuera fácil de leer en pantallas pequeñas y para que fuera compatible con caracteres latinos y chinos.
Hay varias razones por las que se utiliza la fuente San Francisco en los proyectos. En primer lugar, se ha convertido en un icono del lenguaje de diseño de Apple y mucha gente la reconoce al instante. En segundo lugar, se diseñó específicamente para pantallas digitales, por lo que es muy legible y fácil de leer en pantallas de todos los tamaños. Por último, es un tipo de letra moderno y elegante que puede añadir un toque de sofisticación a tus diseños.
Cuando utilices la fuente San Francisco en tus proyectos, debes tener en cuenta algunos consejos:
- Utilízala con moderación y solo para titulares u otros textos destacados. Puede resultar abrumadora si se utiliza en exceso.
- Considera la posibilidad de combinarla con una fuente serif o monoespaciada para el cuerpo del texto.
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?.
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, de la siguiente forma:
Pautas para iPhone (San Francisco font (SF))
| 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 Android (Roboto font)
| 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 |
Es importante hacer un esfuerzo por mantener un tamaño de letra mínimo que la mayoría de la gente pueda leer con facilidad. Las diferencias en las pantallas de los dispositivos, incluida la densidad de píxeles y el brillo, pueden influir en el tamaño mínimo adecuado de la fuente.
Equivalencias entre pt, px, em, %, sp
¿Cuál es la jerarquía tipográfica?
La jerarquía tipografía, es de los principios de mayor importancia para el desarrollo de la interface del usuario. Aquí mostraremos los tamaños y jerarquías tanto para Android como para iOS, para dudas de que es jerarquía puedes consultar la sección de Tipografía Web.
Android
iOS
Medidas verticales de cajas de texto sugeridas
También puedes consultar
Layout
Color System
A través de nuestro sistema de diseño establecemos prácticas que nos permitan el diseño de una interfaz más aceptable y que ayuden a mejorar la experiencia de nuestro usuario para el e-commerce de Elektra.mx
Aquí puedes encontrar el portal digital y las apps disponibles:
