Justo hace dos días descubrí lo que era la proporción áurea. Estaba investigando sobre escalas tipográficas con el propósito de implementarlo en mi proyecto, y me topé con tan genial concepto.
.
Me da gusto ver que aquí también vemos ese tema, que estamos profundizando en teoría, y que conocemos tan útiles herramientas como https://type-scale.com
.
Para las personas que tengan interés en seguir profundizando sobre el tema, les comparto el video donde escuché del concepto por primera vez: https://www.youtube.com/watch?v=ot-5dQG2v5M
Visión general de los Sistemas de Diseño
Anatomía de un Sistema de Diseño
Fundamentos de diseño para Figma: lo que necesitas saber antes de comenzar
¿Cómo crear un sistema de diseño? Proceso, principios y flujo de trabajo
Neo Brutalismo: tendencias de diseño y proyecto del curso
Taller Creativo: Nombramiento de nuestro Sistema de Diseño
Conceptos y recursos importantes en Sistemas de diseño
Guía de Estilos con Figma
Design Tokens: cómo y cuándo usarlos
Cómo calcular escalas tipográficas matemáticamente
Guía de Tipografías en Figma: tamaños, escalas y tokens
Cómo escoger colores: psicología, pautas y accesibilidad
Guía de Colores en Figma
Espaciado y elevación
Guía de espaciado y elevación en Figma
Guía de iconos e ilustraciones en Figma
Cómo Documentar Sistemas de Diseño
Librería de componentes
Atomic Design
Arquitectura y auditoría de componentes
Átomo: botón y variantes
Molécula: card responsiva y variantes
Molécula: header responsivo y variantes
Organismo: hero y variantes
Publicando la librería de componentes
Reto: template y páginas
Implementación y medición
Cómo vender y medir un Sistema de Diseño
Mi experiencia creando Sistemas de Diseño (desde cero) en Startups
Toma el Curso de Sistemas de Diseño con Storybook
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
No se trata de lo que quieres comprar, sino de quién quieres ser. Aprovecha el precio especial.
Antes: $249
$209
Paga en 4 cuotas sin intereses
Termina en:
15 Días
17 Hrs
53 Min
26 Seg
Cómo calcular escalas tipográficas matemáticamente
8/26Recursos
Aportes 20
Preguntas 4
Ordenar por:
Escala tipográfica: es esencialmente un rango de tamaños de letra definidos por una proporción.
Proporción aurea: La proporción áurea, también conocida como la divina proporción, es un número irracional que se aproxima a 1,618. Se utiliza en matemáticas y arte por su estética agradable y armónica. Se dice que se encuentra en la naturaleza en formas como la espiral de una concha o la disposición de hojas en un tallo.
Base: de donde partimos la escala
Radio: la distancias entre las escalas
Tercera: intervalos que se producen entres dos notas
Tercera menor: corresponde a la relación de frecuencias 6:5
Fórmula para definir las escalas basado en la proporción áurea:
Multiplicando la base por el número aureo. Ejemplo:
12 x 1,618
Proporciones de escala tipográfica comunes:
Tomada de la música
Teffi he visto una cantidad de cursos de diseño, de figma, de composición visual en productos digitales, y JAMÁS había escuchado lo que nos estas contando sobre las escalas tipográficas, siempre elegí los tamaños de letra de 2 en 2 de una manera sumamente aleatoria jajaja xD pero jamás pensé que detrás de los tamaños hubiera todo un tema matemático de armonias. Miiil graaacias!
En figma existe un Plugin llamado Typescales que nos ayuda a definir las proporciones tipográficas
Si quieren usar Emojis y estan en Windows, solo requieren presionar la tecla windows+. con eso se abre la caja de emojis y pueden seleccionar el que gusten.
Capitulo de disney sobre la proporción áurea:
https://www.youtube.com/watch?v=rJkdjL21Tqs.
Decubri que las escala (proporcion aurea) a escoger puede variar para diferentes dispositivos. la tercera mayor se suele usar para pantallas de escritorio.
Pero en mobile estas proporciones podrian no ser lo que buscamos como en este ejemplo:
por lo que proporcion menor para dispositivos moviles: una majoor o minor second
La herramienta como esta te permite ajustar el tamaño del dispositivo y la escala, para una mejor consistencia, aunque al parecer es una funcionalidad premium
Con relación al cálculo tipográfico conozco 2 opciones que me parecen super útiles que quiero compartir
1. La primera es <https://typescale.com/> que realmente tiene ya las escalas establecidas. Lo que tendrían que hacer es escoger la escala que les sirva mejor.
2. En el canal de figma, hay un video super útil en donde Rogie explica paso a paso cómo crear la jerarquía tipográfica utilizando el valor "1.62", me parece súper útil. El video se llama: Build it in Figma: Create a Design System — Foundations (desde el minuto 7:28 - hasta el 32:40)
Este es el link para que vayan a verlo que está muy bueno <https://www.youtube.com/watch?v=EK-pHkc5EL4>
Aunque es lo mismo lo que dice la profesora, siempre es útil ver otras explicaciones para entender mejor :D
La verdad que este curso es espetacular. aqui van mis notas.
Una escala tipografica, es esencialmente un rango de tamanos de letra definidos por una proporcion.
.
Las distancias, se conocen como ratio.
.
Para definir esto, seguimos una regla matematica. Definir la base, ejemplo 12pt y multiplicarlo con 1,618 (proporcion aurea)
.
Tambien hay otro tipo de escala, que viene de la musica, aqui el ratio es 1,2000
.
Hay programas que hacen la escala por nosotros, Type-scale.
.
En figma usamos un monton de plugins, uno recomendado es Typescales.
.
Otra regla puede ser, usar solo multiplos de 4.
.
Martin Coronel - Product Designer
Linkedin
Pensé que estaba haciendo mal todo este tiempo, resulta que no jeje… Lo que hice para mi sistema fue utilizar 2 tipos de typografía en base 16, con regla par de 2 a 4px de escalado y en diferentes pesos.
Para cosas ya más avanzadas con tokens, pueden usar Tokens Studio.
Elegir la mejor escala tipográfica depende de varios factores clave, como el propósito del diseño, la audiencia, y el medio en el que se presentará el contenido.
Creo que la primera vez que oí de proporción aúrea fue cuando estudié fotografía.
Tipografía -->
Fuente --> escoger 2 tipografías
Variantes --> thin, light, regular, medium, semibold, bold, extrabold, black
Tamaño --> Limitar a 8 tamaños, 5 para textos cortos (títulos y etiquetas) y 3 para textos densos como parráfos:
\--> Fijar el tamaño base de la fuente en función a la unidad de referencia
\--> Si fijamos 8 el tamaño base de la fuente seria 16px
\--> Si fijamos 6 el tamaño base de la fuente seria 18px
\--> Con la medida base de la fuente, multiplicarlo por 0.64, 0.8, 1, 1.25, 1.563, 1.953, 2.441 y 3.052.
\--> Estas medidas se aplican para pantallas de escritorio
Recurso completo: <https://okbinteractive.studio/insights/como-crear-un-design-system-paso-a-paso>
<https://okbinteractive.studio/insights/consejos-para-escoger-la-mejor-tipograf%C3%ADa-para-tu-web>
Es decir, siempre el número base, se va a multiplicar por la proporción áurea?
La proporción áurea está presente en la naturaleza en formas como la de los caracoles, el cuerpo humano, los copos de nieve y la estructura de hojas y ramas de los árboles; por tanto, constituye uno de los fundamentos generales del Diseño. Otorga ritmo, armonía y equilibrio a las composiciones visuales.
En figma existe un Plugin llamado Typescales que nos ayuda a definir las proporciones tipográficas
La proporción áurea esta determinada por el golden ratio (1.618), esto nos brinda armonía visual.
Para los emojis en Windows simplemente tienen que hacer tecla windows + tecla puntito (.) 😈
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?