gcba/estandares

Tipografía

Opened this issue · 14 comments

paulajoglar commented

Nombre en Obelisco: tipografía
Tipo de componente: estilos

paulajoglar commented

Se modifica nombre de la tipografía. Open sans no corresponde a las variables.
Antes
Image

Después
Image

paulajoglar commented

Se solicita agregar a Storybook las siguientes variables. Se deja imagen sobre el uso de esos estilos.

Image

paulajoglar commented

En que se trabaja:

  • Analisis de los estilos
  • Nomenclaturas
  • Usos
  • Aplicación en los diferentes dispositivos
  • Unificar con storybook
paulajoglar commented

Se agrega la Nunito regular 18 y 16 como estilo.
Se eliminan las variables repetidas.
Se reemplaza en las nomenchaturas pequeño por regular.

Falta seguir trabajando con las variables (mobile o desktop) y linkear los estilos a los componentes.

paulajoglar commented

Se definen las siguientes categorías para ordenar los estilos.

Image

victorianastasi commented

Se modifica ficha en Estándares, en rama fix_typography

paulajoglar commented

Se modificó a 0 el interletrado en todos los estilos tipográficos para mejor su lectura y igualar con el uso que se está dando actualmente en storybook.

marusaad commented

Requerimiento
Actualizar todos los estilos tipográficos del sistema de diseño.

  • Revisar y empatar tipografías mobile y desktop. Construir una nueva escala flexible y consistente. Disponibilizar más variables de peso por estilo. Ajustar tamaños de la escala tipográfica a la grilla de 4px de Obelisco.

  • Actualizar la nomenclatura para que sea coherente y consistente.

Análisis UX & Research
Relevamos estilos tipográficos en diseño y desarrollo. Identificamos inconsistencias. Investigamos otros sistemas de diseño y diferentes escalas y formas de nomenclar los estilos tipográficos.

Ideación

  • Determinamos nuestro tamaño base con su interlínea: 16px (1rem) / 24px.

  • Establecimos una nueva escala sobre la cual se apoyan todos los tamaños de la tipografía. Redondeamos los valores de la escala y ajustamos los interlineados a la grilla de 4px.

  • Definimos 3 niveles de estilos (encabezados/heading, cuerpo/body, y etiquetas/label) sobre los cuales se despliegan los tamaños correspondientes en la nomenclatura de “camiseta” (XL a XS). A su vez, cada tamaño cuenta con variables Regular, SemiBold, Bold, y según el caso Underlined e Italic.

Notas de desarrollo

  • Si bien luego del H5 se pasaría a la etiqueta L o a cuerpo XL, es necesario que exista un estilo de H6 a nivel desarrollo. Esto sucede porque en tarjetas, por ejemplo, los títulos deben ser considerados un Heading y es complicado traer los estilos de Label para el H6. Posible solución: que el estilo de etiqueta L pase a ser un H6, y en etiquetas queden sólo 2 tamaños.
    Por pedido de desarrollo, debemos establecer una variable de peso determinada para cada estilo que es la que traerá por defecto.
Diehault commented

¡Hola! Actualizo con lo que hemos venido trabajando para tipografía. 🤔

¿En qué etapa nos encontramos?

  1. Definimos la escala con la que vamos a trabajar la tipografía, entendiendo 3 categorías principales: cuerpo (body), titulares (titles) y encabezados (headings). Cada una de las categorías hace referencia al uso que se le da dentro de Obelisco.
  2. Probamos toda la escala con los componentes de Obelisco, para evaluar qué componentes sufren cambios y cuáles no. Los cambios van desde la actualización de la tipografía hasta cambios específicos en componentes.

¿Qué tenemos en "Análisis de componentes 2024"?

  • La nueva escala con cada una de las categorías definidas, sin aún una descripción final para ninguna. Hay que revisar las descripciones que propusimos en un principio para saber si se ajustan a lo que queremos transmitir o no.
  • Las pruebas que hicimos con cada uno de los componentes, teniendo de guía la lista de componentes compartida con desarrollo.
  • La validación final de componentes desde diseño junto con comentarios dentro del DevMode para desarrollo, donde pueden ver qué cambios surgieron y qué componentes tienen esos cambios.

¿Cómo queda la nueva escala tipográfica?

Image
Image
Image

Las descripciones aún están para revisar, lo importante de las imágenes son los tamaños de letra e interlineado, además de los pesos y los formatos que ofrecemos.

¿Cuáles serían los pasos a seguir?

Luego de tener toda esta información validada por ambas partes del sistema de diseño (diseño y desarrollo), podríamos pasar a la implementación de la nueva escala tipográfica y cada uno de los cambios propuestos. Es, otra vez, una instancia donde nos aseguraremos de que todo esté en orden y funcione según las pruebas que hicimos; lo que hay en análisis es un puntapié para lo que viene a futuro, por lo que puede que surjan cambios que no tengamos mapeados.

Diehault commented

¡Hola! Actualizamos con los pesos predeterminados que definimos para cada uno de los tamaños de la nueva escala tipográfica.

Pesos predeterminados

Body

  • Todos los tamaños tienen regular/400 como peso predeterminado.

Titles

  • Titular L: bold/700.
  • Titular M: semibold/600.
  • Titular S: semibold/600.

Headers

  • Encabezado H1: bold/700.
  • Encabezado H2: semibold/600.
  • Encabezado H3: semibold/600.
  • Encabezado H4: semibold/600.
  • Encabezado H5: bold/700.
  • Encabezado H6: semibold/600.

Esta información la dejamos asentada en el archivo de "Análisis de componentes 2024" dentro de la página de Tipografía. Como tal, en la escala no señalamos un peso predeterminado porque mostramos todos los pesos como opciones, pero esta definición fue necesaria para que en el Storybook pudiéramos mostrar un peso por defecto para cada tamaño.

  • 👍1
Diehault commented

¡Hola! 🥸

Como análisis a lo que conversamos durante la weekly del día martes 09/04, compartimos el siguiente mensaje por Discord con el equipo de Obelisco a través del canal de Experiencia Digital:

¡Holi! Les actualizamos con lo último que conversamos sobre tipografía en la weekly.

1. Sobre Tipografía en Storybook
Les compartimos algunos links de sistemas de diseño que incluyen cosas sobre Tipografía en su Storybook y otros que no incluyen nada. También, incluimos URLs de sistemas de diseño gubernamentales para que vean la parte de desarrollo de los estilos (GOV.UK, Helsinki, Italia -que tiene Bootstrap-, USWDS).

Links de sistemas de diseño gubernamentales

Stoybooks que no incluyen estilos

Stoybooks que incluyen estilos

2. Cosas que negociaríamos

  • Listas ordenadas y desornadas, que muestran hoy día dentro de Tipografía en Storybook, como "Listas nativas" o "Listas HTML".
  • Marks/utilities/transformaciones (?) Para ponerlos como "Personalización de párrafo".

(#) ¿Qué contiene?

<strong> = bold.
<em> = itálica/énfasis.
<small> = texto más chico (no sabemos por qué).
<mark> = resaltado con color (¿cómo funciona? ¿Tenemos que elegir nosotros el color?).
<sup> = superíndice.
<sub> = subíndice.
<kbd> = letras para teclado (como atajos o letras individuales).

3. Cosas que no negociaríamos

  • Display headings: no es algo que queramos disponibilizar ahora. En Bootstrap aclara:

When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.

Hoy en día no contamos con esta necesidad, por lo que incluir los display implica sugerir un uso no enmarcado dentro de la escala tipográfica, con buenas y malas prácticas, además de ejemplos de uso. No consideramos correcto incluirlo solo porque está como posibilidad.

(#) ¿Qué contiene color utilities en texto?

.text-primary
.text-primary-emphasis
.text-secondary
.text-secondary-emphasis
.text-success
.text-success-emphasis
.text-danger
.text-danger-emphasis
.text-warning
.text-warning-emphasis
.text-info
.text-info-emphasis
.text-light
.text-light-emphasis
.text-dark
.text-dark-emphasis
.text-body
.text-body-emphasis
.text-body-secondary
.text-body-tertiary
.text-black
.text-white
.text-black-50
.text-white-50

Acá el foco del problema está en la accesibilidad. Habría que hacer pruebas de color para cada una de estas "utilidades" y ver cuándo se usarían. Tendríamos que investigar más sobre el contexto de uso; entendemos que el "danger" y el "success", como semánticos, pueden ir en un input, pero los demás no sabemos bien a qué se aplicarían, salvo que están únicamente como posibilidad. Además, los textos de "warning" y "warming-emphasis" no serían accesibles por ser naranjas, por ejemplo. Pensamos que no estaría bueno concebirlos como aislados, sino verlos un poco más a fondo y relacionarlos a una función que cumplan dentro de nuestro sistema de diseño.

davisLjr commented

Según lo charlado en la reunión del viernes 12/04,

Se llegó a la conclusión de que la nomenclatura de "transformaciones", "listas ordenadas y desordenadas" puede ser cambiada para mantener una armonía entre UI-KIT y Storybook.

En cuanto a las clases display y color, se realiza la propuesta de la creación de documentación disponible en Storybook con el detalle de las clases que vienen de Bootstrap y también las propias de Obelisco, de manera que éstas no estén encapsuladas en un componente, sino que sean independientes y estén disponibles para casos donde estas lleguen a ser necesitadas por los desarrolladores o diseñadores.

De igual forma, la invitación es que la decisión sea investigada y tomada por los gerentes operativos y subgerentes operativos de Diseño - Desarrollo. Para poder continuar manteniendo buenas prácticas en UI-KIT y en Storybook a nivel desarrollo.