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
Construcción de Sistemas de Diseño con Figma
Conceptos Básicos de Figma para Sistemas de Diseño
Creación de un Sistema de Diseño: Pasos y Estrategias
Diseño Neobrutalista: Construcción de un Sistema de Diseño
Taller de Creación de Nombres para Design Systems
Documentación de Fundamentos en Sistemas de Diseño
Guía de Estilos con Figma
Conceptos y beneficios de los design tokens en diseño y desarrollo
Escalas Tipográficas y Proporción Áurea en Figma
Creación de Escalas Tipográficas en Figma
Teoría y Práctica del Color en Diseño de Interfaces
Creación y gestión de paletas de colores en Figma
Espaciado y Elevación en Diseño de Interfaces
Espaciado y Elevación en Figma: Guía Práctica y Aplicaciones
Uso de Íconos e Ilustraciones en Diseño de Aplicaciones
Documentación de Sistemas de Diseño en Figma
Librería de componentes
Atomic Design: Construcción de Componentes en Design Systems
Arquitectura y Auditoría de Componentes en Atomic Design
Creación de Botones con Variantes en Componentes UI
Creación de Componentes de Cart en Diseño UI
Creación de Headers Responsivos en Figma
Creación de Variantes de Componentes en Diseño de Interfaces
Publicación de Librerías y Componentes en Figma
Uso de Figma para Crear Interfaces con Design Systems
Implementación y medición
Vender y medir un sistema de diseño internamente en la empresa
Experiencia Creando un Design System en una Startup
Desarrollo de Sistemas de Diseño con JavaScript y CSS
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Escalas Tipográficas y Proporción Áurea en Figma
8/26Recursos
¿Qué son las escalas tipográficas y cómo afectan nuestro diseño?
Las escalas tipográficas son fundamentales para lograr armonía visual en el diseño. Al definir las proporciones entre diferentes tamaños de letra, creamos un estilo visual coherente que se percibe como naturalmente equilibrado. Una escala es, básicamente, una proporción que dicta qué tan grande o pequeña debe ser una tipografía en relación con otra.
¿Cómo se definen las escalas tipográficas?
Para desarrollar una escala, comenzamos por establecer una base, generalmente el tamaño de una tipografía estándar (como 12 puntos). A partir de ahí, multiplicamos por un radio determinado para definir los tamaños subsecuentes. Un radio comúnmente usado es 1.618, llamado también la proporción áurea, famosa por conferir equilibrio y belleza en diseño.
Por ejemplo, si la base es de 12 puntos, multiplicamos por 1.618 para obtener el siguiente tamaño: 19.416 puntos. Este proceso se repite para establecer una serie de tamaños armoniosos.
¿Qué otras escalas se pueden utilizar?
No solo la proporción áurea es útil; también podemos emplear otras series matemáticas como la serie de Fibonacci o el número de Lucas. Estas alternativas se basan en secuencias reconocidas en la naturaleza por su capacidad de generar un entorno armónico y visualmente atractivo. Además, hay conexiones con la música, donde las notas y sus intervalos definen escalas basadas en relaciones de frecuencia.
Herramientas para facilitar el uso de escalas tipográficas
¿Cómo utilizar TypeScale?
TypeScale es una herramienta online que ayuda a automatizar el cálculo de escalas tipográficas. Se introduce una base, como 16 píxeles, y selecciona una escala, ya sea la proporción áurea u otra. Luego, TypeScale genera automáticamente los tamaños correspondientes para cada elemento de texto, ahorrándonos el cálculo manual.
¿Qué ofrece Figma para escalas tipográficas?
Figma cuenta con plugins específicos como Typescales que replican la funcionalidad de herramientas como TypeScale. Facilitan la generación de escalas ajustadas a las necesidades del diseño, permitiendo elegir la base y la escala para luego generar las diferentes medidas tipográficas necesarias. Además, Figma permite integrar estas medidas en proyectos de diseño de manera fluida, creando un sistema de diseño coherente.
¿Cómo iniciar un proyecto en Figma?
Creación de un nuevo team
Al comenzar con Figma, se puede crear un "team" para organizar proyectos y componentes de diseño. Este puede etiquetarse con un nombre relevante y, al gusto personal, complementarse con emojis para una experiencia de usuario más divertida.
Configuración de un nuevo archivo
Una vez que el team está configurado, se comienza un nuevo archivo para desarrollar los fundamentos de tipografía en un diseño. Se renombra la primera página de trabajo a un título como "Foundations" y se comienza a implementar las escalas tipográficas deseadas en un frame grande.
Esto incluye:
- Definir font-sizes para distintos elementos (H1, H2, párrafos).
- Integrar escalas basadas en múltiplos de cuatro, una práctica común en diseño para asegurar consistencia. Por ejemplo, usar tamaños de 40, 32, 18, 16, 14 y 12 píxeles para diferentes niveles de encabezados y texto, adaptando el sistema a las necesidades específicas del proyecto.
Estas herramientas y técnicas permiten crear un diseño visualmente cohesivo y consonante con los principios naturales y matemáticos de armonía.
Aportes 23
Preguntas 4
Ordenar por:
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!
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
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>
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
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.
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.
Con su correo electronico y si tienes la version paga de Platzi puedes acceder a un perfil profesional de Figma.
Aca puedes ver mas info de esto: <https://platzi.com/blog/figma-for-education-platzi/>
Algo que agregaria al momento de definir las tipografias es tambien modificar el height y el letter spacing, no es lo mismo dejar un titulo H1 a un parrafo con los mismos valores de height y de espaciado entre letras.
Usualmente las uso de la siguiente manera:
Letter spacing:
H1 -2.0%
H2 -1.5%
H3 -1.0%
Body 0
P 0
Buttom 2.0%
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?