Escalas tipográficas con proporción áurea
Contenido del curso
Mariana Gómez
Héctor Iván Sáenz Estrada
Gabriela Urbano
Jose David Albarran Velasquez
Cristian Contreras
Julver Ticona Vargas
Estefany Aguilar
Profesor
Alexander Flores Rayme
Ariel Hernán Contini
Desarrollador FrontEnd
ju4ni
Catherine Guevara
Eduard Ferley Gil Carvajal
Jose David Albarran Velasquez
Martin Coronel
Daniel Peralta
Aarón González
Melany Ventura
Platzi Team
Nayfer Carolina
Jorge Andrey Pedreros Camargo
Jorge Andrey Pedreros Camargo
Héctor Alonso Padilla Ramírez
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!
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
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
Este es el link para que vayan a verlo que está muy bueno
Entiendo que el 12 se escoge pretendiendo la base del tamaño de fuente que vamos a empezar a usar, es decir, de 12px para arriba. ¿Pero de dónde sale ese 19.419?
Aquí hay un pequeñísimo error, en realidad debería ser 19.416 que sale de multiplicar 12 x 1.618
Sale de multiplicar 12 por la proporción aurea que es 1,618
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:
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.
Pero al principio de donde saco el 19.419? No lo entiendo bien
El número 12 representa la base tipográfica inicial que se utiliza como punto de partida. Por otro lado, el número 1,618 es conocido como la proporción áurea, también llamada número de oro, que ha sido ampliamente estudiada y utilizada en diferentes campos, incluyendo el diseño y la tipografía.
Para determinar el tamaño tipográfico siguiente, se aplica esta fórmula matemática. Si se desea que el texto sea más grande, se realiza una multiplicación, y si se desea que sea más pequeño, se realiza una división.
Por ejemplo, supongamos que tienes un título con un tamaño tipográfico inicial de 36px y deseas calcular el tamaño de otros elementos en tu proyecto. Utilizando la proporción áurea, puedes multiplicar 36 por 1,618 para obtener un valor aproximado de 58,248. Por lo tanto, el siguiente tamaño tipográfico sugerido sería de alrededor de 58,248px.
Además de la proporción áurea (1,618), existen otros valores que también se han utilizado para determinar los tamaños tipográficos en relación con una base inicial. Algunos ejemplos son la segunda menor (1,067), la quinta perfecta (1,500) o la cuarta perfecta (1,333). Estos valores ofrecen diferentes escalas y proporciones, y pueden ser utilizados según las preferencias y necesidades del diseño en particular.
Es importante tener en cuenta que estos valores son aproximados y pueden redondearse según las necesidades y convenciones de diseño específicas. Además, la proporción áurea y los otros valores mencionados (segunda menor, quinta perfecta, cuarta perfecta) ofrecen diferentes escalas y proporciones, lo que te permite ajustar los tamaños tipográficos según tus preferencias y requisitos de diseño.
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 .
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.
Es la primera vez que escucho sobre la proporción aurea, muchas gracias por compartirlo
Hola, ¿Cuál es mejor usar Typescale o el plugging de Figma? o deberiamos usar ambos?
Tengo una duda, y sí, solo tengo la base inicial (12) puntos, y no tengo más valores, cómo se con cuál debo realizar la regla de 3?
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%
