import { Meta } from '@storybook/addon-docs';
import image1 from './assets/tipografias/tipos.png'
import image2 from './assets/tipografias/escala_tipografica.png'
import image3 from './assets/tipografias/peso_tipos.png'
# Tipografías
La tipografía tiene como objetivo principal presentar la información de textos de manera clara para el usuario, estableciendo jerarquías en el contenido. Adicionalmente, se trata de un elemento del lenguaje visual que contribuye a aplicar consistencia y el tono de la marca.
### Tipografías productivas y expresivas
El sistema de diseño incluye dos definiciones tipográficas diferentes en función de las necesidades de la Seguridad Social.
Las tipografías **productivas** son utilizadas de manera generalizada en soluciones digitales, donde el foco del usuario está en la interacción. Estas tipografías se han creado para garantizar la comprensión y la estructuración, por lo que se usan en las partes de contenidos de los sitios web y aplicaciones.
Por otro lado las tipografías **expresivas** están reservadas a usos más editoriales y de marketing, donde la complejidad gráfica de las misma puede distraer al usuario.
En **Grafito** combinamos ambas tipografías, por un lado las productivas para la mayoría de los textos regulares y contenido genérico, y por otro lado las expresivas para elementos de mayor carácter como los títulos o menús.
En el enfoque genérico de **Grafito** empleamos dos familias tipográficas **Lato**, como productiva, y **Alegreya**, como expresiva. Ambas familias son de código abierto (Google Fonts), cuyo uso no incurre en coste económico alguno para la Administración Pública. Se puede acceder y descargar la tipografía Lato desde [[Lato GitHub Repo](https://href.li/?https://github.com/mrkelly/lato)] y Alegreya desde [[Alegreya GitHub Repo](https://href.li/?https://github.com/SorkinType/Alegreya)].
Empleamos Lato para el texto en general por su gran legibilidad en medios digitales, incluso en tamaños pequeños, y por sus similitudes en estructura con la tipografía Gill Sans, extensamente utilizada dentro de la Administración Pública a través de los logotipos del Gobierno de España y los distintos Ministerios.
Por otro lado, Alegreya aporta contraste y ayuda a reforzar jerarquías. Se trata de una tipografía con remates (serif) que contrasta con la sencillez de Lato (sans serif).
Para excepciones donde no se puedan encontrar estas fuentes tipográficas, se definen las fuentes de uso alternativo del sistema de usuario (en principio disponibles por el usuario localmente), por orden, como productiva Helvetica Neue, Arial y la genérica sans-serif, y como expresiva Georgia, Times y la genérica serif.
En los distintos temas se pueden definir **tipografías específicas**, aunque se recomienda por consistencia mantener las tipografías genéricas. En cualquier caso, para redefiniciones tipográficas, siempre es recomendable emplear el recurso de diferenciación entre lo productivo y lo expresivo para balancear el diseño de los contenidos escritos.
### Escalas y tratamientos tipográficos
La escala tipográfica de **Grafito** emplea incrementos variables, dado que las necesidades en cada tramo de escala son diferentes.
Nuestra escala tipográfica utiliza incrementos de 2px en el extremo inferior de la escala, 4px en el rango intermedio bajo, 6px en el intermedio alto y 8px en el superior, de acuerdo a la ecuación sencilla definida.
> .*Xn = Xn-1 + {INT[(n-2)/4] + 1}*.** 2 *
> .*Xn: step n type size Xn-1: step n-1 type size*
El **peso** de la fuente (font weight) es un recurso tipográfico importante que puede ser utilizado tanto para generar énfasis como para establecer jerarquías de contenido. Las combinaciones de peso y tamaño tienen que ser cuidadosamente elegidas. Un peso Bold siempre tendrá más énfasis que un peso Regular. Sin embargo, un peso Regular puede representar mayor jerarquía que un peso Bold si el tamaño del primero es significativamente mayor que el del segundo.
Lato presenta un rango de pesos amplio (desde Thin hasta Black) ofreciendo una gran versatilidad, aunque por sencillez de nuestro sistema de diseño solamente utilizaremos Light, Regular y Bold con el objetivo de mantener la simplicidad y escalabilidad de la solución, además de reducir los tiempos de descarga.
Con respecto a Alegreya, únicamente emplearemos el peso Bold.
Cada uno de los pesos tipográficos presentará una versión en **cursiva** (italic) con el objetivo de enfatizar aquellas palabras que sea necesario.
La **interlinea** (line-height) influye directamente en la legibilidad y ritmo del texto. La interlinea siempre está basada en el tamaño de la propia fuente. Idealmente la interlinea en un texto estándar presenta un ratio de 1:1.5 (tamaño de la tipografía : interlinea). Así, por ejemplo, un texto a 16px/1rem tendrá una interlinea de 24px/1.5rem.
Para los titulares, los cuales necesitan menos espacio de interlinea debido a su gran tamaño, se define un ratio menor 1:1.25.
El **color** de la tipografía tiene siempre presente la legibilidad y accesibilidad en el sistema. Tomamos como colores de referencia el negro y el blanco de la dupla blanco y negro definido en cada tema y tenderemos a evitar colores en la tipografía, aunque pueden darse excepciones como el color azul para reforzar la capacidad de interacción con elementos (links), si se desea en cada tema.
De la misma manera, se podrá customizar cada uno de los temas con los tratamientos más adecuados, aunque se recomienda mantener estos definidos como generales.
### Estilos tipográficos
Con el objetivo de crear un sistema versátil y escalable a otros productos nos desvinculamos del concepto de jerarquía de “headings” de los documentos HTML (‘h1’, ‘h2’, etc.). Cada uno de estos estilos tipográficos tiene asignado un nombre de token, configurable en cada momento y que hace que sean estos independientes de su ubicación o tipología de elemento.
Los estilos tipográficos son configuraciones preestablecidas de elementos tipográficos (font-size, weight, line-height, etc) con el objetivo de aportar agilidad en la definición y consistencia en la utilización, a prueba de errores en el sistema. La elección del estilo tipográfico adecuado viene determinada por la composición o estructura de la plantilla. Los productos pueden tener varios niveles de arquitectura o áreas que requieren ciertas variaciones en la jerarquía tipográfica.