Fuentes
La tipografía es mucho más que simples palabras en una página; es un elemento fundamental que se entreteje en el tejido de nuestra identidad de marca. Nuestras tipografías, cuidadosamente seleccionadas, son las embajadoras silenciosas de nuestro mensaje, y aportan una voz coherente y reconocible en todas nuestras comunicaciones.
Enlaces rápidos:
Más allá de transmitir información, nuestra tipografía encarna la esencia de nuestra marca: una combinación armoniosa de sencillez, modernidad y profesionalidad. En esta sección, analizamos no solo los tipos de letra que utilizamos, sino también los principios que rigen su aplicación, garantizando una representación coherente y impactante de nuestra marca en cada interacción.
Nuestro sistema tipográfico está diseñado para ofrecer versatilidad, con directrices flexibles que se adaptan a diversos soportes; cada canal cuenta con especificaciones propias, adaptadas a partir de nuestro sistema global para lograr una imagen de marca coherente y a la vez personalizada.
Simplon
Nuestra paleta principal constituye la mayor parte de nuestro trabajo creativo y debe reflejar los tonos más intensos en todas las piezas.
Norma
La subfamilia Norm es nuestra tipografía principal y está disponible en 8 pesos.
Mono
Aunque existe un conjunto completo de caracteres mono, solo se utiliza de forma esporádica para los números.
Roboto
Roboto se utiliza en los casos en los que no se puede emplear Simplon. Si es absolutamente necesario o se exige el uso de una tipografía del sistema, Roboto es una alternativa aceptable.
Uso y aplicación
A continuación, te presentamos ejemplos de uso y aplicación en los que se describen las formas correctas e incorrectas de utilizar nuestro sistema tipográfico y de fuentes. En nuestro ritmo de diseño, el contenido y la tipografía se combinan como en una danza perfectamente coordinada. Estas normas orientan la forma en que el diseño visual y el diseño del contenido interactúan, garantizando que se complementen entre sí para lograr una combinación perfecta de legibilidad, estética e identidad de marca. Algunos retos visuales pueden resolverse con cambios en el contenido, mientras que otros retos relacionados con el contenido requieren soluciones visuales.
Aunque encontrarás orientaciones conceptuales, se han omitido deliberadamente las especificaciones concretas debido a la naturaleza variada y dinámica de los medios que abarca nuestra marca. Los departamentos, como los de diseño impreso o diseño web, establecen sus propias especificaciones basándose en estos principios rectores para ajustarse a las mejores prácticas de cada medio.
Utiliza nuestro peso de fuente «Simplon Norm Bold» en tamaños grandes para que nuestros mensajes heroicos y contundentes causen un gran impacto.
Utiliza nuestro peso de fuente «Simplon Norm Bold» en tamaños grandes para que nuestros mensajes heroicos y contundentes causen un gran impacto.
Deja mucho espacio libre alrededor de los titulares grandes. Deja que el mensaje hable por sí mismo, sin que lo obstaculicen elementos gráficos superfluos ni la proximidad a otros contenidos.
Las frases de impacto, largas y llamativas, deben ser concisas; como máximo, de 3 a 5 palabras. Se puede utilizar la puntuación para crear dramatismo, por ejemplo, con un punto o un signo de interrogación. La puntuación y las mayúsculas deben utilizarse siempre de forma coherente, sin que haya discrepancias.
A veces necesitamos transmitir un mensaje contundente que no se limite a tres o cinco palabras. Utiliza la fuente de grosor normal, pero mantén el tamaño grande, el espaciado y las normas de puntuación y mayúsculas.
Los titulares y los mensajes de impacto deben tener un tamaño grande y requieren una altura de línea más reducida que el cuerpo del texto. Se recomienda establecer una altura de línea relativa al 100 % del tamaño de la fuente, aunque se puede ajustar según el medio. Simplemente hay que evitar estirar o comprimir la altura de línea hasta el punto de que las descendentes y las ascendentes se toquen en el texto de impacto.
Los titulares y los mensajes de impacto deben tener un tamaño grande y requieren una altura de línea más reducida que el cuerpo del texto. Se recomienda establecer una altura de línea relativa al 100 % del tamaño de la fuente, aunque se puede ajustar según el medio. Simplemente hay que evitar estirar o comprimir la altura de línea hasta el punto de que las descendentes y las ascendentes se toquen en el texto de impacto.
No utilices nuestro estilo negrita en tamaños pequeños, ya que puede resultar difícil de leer a medida que se reduce el tamaño. Es importante mantener un alto nivel de contraste y orden en el contenido, así que utiliza el tamaño, el color y el estilo de la fuente para que la página resulte cómoda de leer.
No utilices el tratamiento de impacto para decir lo que ya se sabe. Recurre a las líneas de separación, los subtítulos o la proximidad para mantener estos bloques en su contexto.
SIGUIENTE SECCIÓN
La jerarquía es importante
No todo puede ser lo más importante. Utiliza la tipografía para guiar al usuario y hacer que el contenido se pueda leer rápidamente o se pueda explorar a fondo con comodidad.
Los subtítulos se leen y se ojean rápidamente
No intentes decir demasiado en un subtítulo, al igual que ocurre con el titular. Ofrece al usuario ese aliciente o esa pista para que siga leyendo si así lo desea. Utiliza los titulares a lo largo del artículo como puntos de referencia en la historia. Si el usuario se desplaza por toda la página o la ojea y solo lee los titulares, ¿entenderá la idea principal de la historia? ¿Podrá encontrar rápidamente lo que le interesa?
Los subtítulos deben seguir las mismas normas de puntuación y mayúsculas que los titulares principales.
Habrá ocasiones en las que tengas que incluir frases secundarias o anidadas. Aplica los mismos principios a estos subtítulos. Al igual que en las frases de mayor impacto, utiliza el color, el grosor y el tamaño para crear suficiente contraste y jerarquía en tu texto. No solo porque quede bien, sino porque así también resulta más fácil de leer.
La jerarquía importa
Utiliza todas las herramientas de la caja de herramientas de la marca para que la historia brille con luz propia.
Una tipografía limpia refleja nuestra experiencia.
- Altura de línea: la altura de línea puede variar y deberá adaptarse a cada medio concreto. Para que el cuerpo del texto resulte accesible, cómodo y legible, empieza con un 130 % y nunca superes el 155 % del tamaño de la fuente. El texto de los pies de foto puede estar más apretado, pero el cuerpo del texto nunca debe estar más apretado que al 100 %. Un documento técnico puede requerir una cantidad significativa de contenido en un espacio reducido, mientras que un documento de marketing siempre debe inclinarse por la claridad y la amplitud en lugar de la sobrecarga de contenido.
- Altura del párrafo: al igual que en el caso anterior, debes asegurarte de que se adapte al contenido y al medio. Dicho esto, intenta que se sitúe entre el 100 % y el 140 % del tamaño de la fuente.
- Estilo en línea: el estilo en línea puede añadir un toque de énfasis o destacar algo dentro de un texto más extenso. Utiliza estas técnicas con moderación e intenta resaltar solo unas pocas palabras clave.
Si queremos resaltar una idea o una frase completa, intenta pasar a una nueva línea.
Utiliza colores tipográficos para crear una experiencia de lectura agradable y colores que inciten a la acción. Nunca utilices un color de acción como titular. Reserva nuestro azul para las acciones y los enlaces, y evita utilizarlo en el texto estático. Asegúrate de revisar las siguientes directrices de accesibilidad para conocer los requisitos adecuados de contraste tipográfico.
Accesibilidad
Para garantizar que el mayor número posible de clientes disfrute de una experiencia homogénea, queremos seguir siendo lo más accesibles posible. Una forma de lograrlo es cumplir con las directrices WCAG 2.1 relativas a los índices de contraste del texto.
A continuación se muestra la relación de contraste mínima aceptable para nuestra paleta principal de colores de fondo. Sobre ella se muestran los diferentes colores de texto aceptables de nuestra paleta. Por «mínimo» nos referimos a que identificamos el texto más claro sobre los fondos más claros que se puede utilizar para cumplir con los estándares AAA. Se puede utilizar este color, así como cualquier otro más oscuro del mismo grupo de tonos. Y lo mismo ocurre a la inversa con los fondos oscuros y los textos más claros.
Ten en cuenta que, si el color del texto aparece en negrita, solo cumplirá con los estándares AA, por lo que se debe evitar su uso en aplicaciones con fuentes pequeñas y de peso ligero.
Solo mostramos los colores de texto recomendados. No se recomienda utilizar tonos morados, naranjas, amarillos ni verde azulado para el texto.
Colores neutros
El texto puede tener un tono más oscuro que cualquiera de los que se indican a continuación.
Marina
El texto puede ser más claro que cualquiera de los tonos que se indican a continuación.
Azul
El texto puede quedar más claro o más oscuro que cualquiera de los tonos que se indican a continuación, dependiendo de la mitad de la paleta que utilicemos.
