No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Cómo calcular escalas tipográficas matemáticamente

8/26
Recursos

Aportes 19

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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

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

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: ![](https://static.platzi.com/media/user_upload/image-18cd0c46-5d9a-45fe-b86c-ba3826585b8e.jpg)por lo que proporcion menor para dispositivos moviles: una majoor o minor second ![](https://static.platzi.com/media/user_upload/image-c007cd99-5c95-41ba-9d9f-742a600368b7.jpg)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 ![](https://static.platzi.com/media/user_upload/image-7b1d351c-d181-425a-8eb4-5a4678c99880.jpg)
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

En figma existe un Plugin llamado Typescales que nos ayuda a definir las proporciones tipográficas

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.

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 (.) 😈