Perfect. I've often designed myself into a hole by using a scale as a system, having to make complex and labour changes deep into a project. It's great to hear your thoughts on this.
We’ve all been there, and that’s exactly what happens. Having to amend sth like this when you’re deep into a project is really painful. Better start with sth simple and then add if extremely necessary. Cheers Dan!
Interesting that you use 14px for base paragraph sizes. Any reason why when browser defaults are at 16px? 14px feels too small, especially for visually impaired people. I tend to start at 20px and use a 3:4 (perfect fourth) ratio. The typographic scale Sketch uses is based on print standards and doesn't properly equate to the digital world.
Thanks for sharing, this works beautifully! I think it’s good to add that having different scales is not a necessity for creating hierarchy. By clever use of whitespace you can create hierarchy and only use one type size.
Hey Adrian thanks for spreading knowledge as always. I have a question regarding the typographic scale using your Helvetica Neue library as an example. I remember in a past video on type sizes where you talked about striving to create a clear contrast between sizes to achieve hierarchy. So I was wondering is there a purpose to using 12px and 14px since they are so close in size? Wouldn't it be better to eliminate the 12 or 14 px size and work with 4 levels of scale instead? My only reasoning into why you're using 12px is might be because the subtitle is all caps so it appears bigger which is why you reduced it down to 12?
Your video was exactly what I was looking for and wanted to learn. Thank you so much. I have a question about smaller copy such as form field labels, tags or terms of service at the bottom of a page. What sizes do you recommend for those types of uses?
So glad to hear this was helpful! For small text, I recommend playing around with the smallest sizes in this system. You can even use bigger sizes if you want. Just don’t add smaller sizes, unless you can create a high contrast like half the size of the smaller one. But in this case that would mean 6px which is not readable.
Great pointers, thank you! These systems are very high impact and look suited for image-heavy layouts. Is it possible to get a video on creating a type system for text-heavy website designs, like for blogs and media sites? In lieu of a video, any suggested resources? Thanks again :)
You’re welcome! 🙌🏻 That’s a good one ☝🏻 You can use this system for text heavy websites, you just need to manage white space smartly. But I would probably choose a serif typeface for paragraphs, and maybe some other typeface for numbers and some titles to be able to create high contrast in less space. I’ll note the idea to do a video in the future!
Very much appreciated and incredibly helpful! Just two (possibly dumb) questions: What's the actual size of 72 px (as an example) in typography? Is it the distance between the ascender and descender of a character or something else entirely? Should I take this into consideration before I set my values in the typographic scale or is it irrelevant?
@@hellobont Thank you very much for your response! I was looking for typographic grid systems in general the other day, and before I found your super useful video, I happened to come across some examples having the x-height of the type for the body copy coincide with the height of the baseline grid. That's when it struck me. So, I thought maybe before the process of making a typographic scale, they had been making their decisions based on this factor... In any case, thanks again for the video and your response!
Right! Yeah, that’s another way to do it. I’m not a fan of that method, feels too rigid to me. But it’s definitely not wrong! Good questions btw. If you have any more questions let me know!
A very very unique and awesome tips as always, without spending a decade teaching some useless theories about type. Please give us a real world example and design it from scratch to see how you apply the typographic system. All the love ❤️
Perfecto, pienso que la sistematización es fundamental en los procesos de diseño y esto que dices está súper!! Peroooo! Me parece que es para un estilo y tipo de diseño web, sería interesante saber cómo lo harías cómo lo resuelves por ejemplo para un Saas UI design (Web app) ya sabes que tienen tablas, Dashboard, cards, etc... sería genial me explicarás cómo lo resuelves? Mobile y desktop design. Saludos gracias desde yaaaa
Buenísimo, tomo nota para futuros videos. Pero en síntesis: uso este mismo sistema tipográfico para web apps también. Para mobile, normalmente ajustó el tamaño de 72px a 48px, y el resto lo mantengo igual. Saludos!
Hola Toni! Por ahora no, pero podes activar los subtitulos auto-generados en español, lo podes seguir bien así. Si mucha gente lo ve en inglés, podríamos hacer la versión en español. Pero hicimos algunos videos en español y pocos lo miran, y es un esfuerzo bastante grande hacer en dos idiomas. Saludos!
@@hellobont ok, lo entiendo. Una lástima siendo el idioma más hablado del mundo después del chino. Pero bueno. Mucho ánimo y gracias por contestar. Un saludo.
@@hellobont Hey, no worries. I actually purchased one of your systems and opened it up in XD. Seemed to work fine. Thank you much for sharing and educating us! Lots of love and joy in creation to you all!😁
Felipe! Por ahora vamos a subir en inglés. Podes activar los subtitlos autogenerados y traducirlos al español. Lo probamos y funciona bien para seguir el hilo de lo que voy explicando :)
Perfect. I've often designed myself into a hole by using a scale as a system, having to make complex and labour changes deep into a project.
It's great to hear your thoughts on this.
We’ve all been there, and that’s exactly what happens. Having to amend sth like this when you’re deep into a project is really painful. Better start with sth simple and then add if extremely necessary. Cheers Dan!
Interesting that you use 14px for base paragraph sizes. Any reason why when browser defaults are at 16px? 14px feels too small, especially for visually impaired people. I tend to start at 20px and use a 3:4 (perfect fourth) ratio. The typographic scale Sketch uses is based on print standards and doesn't properly equate to the digital world.
You are right, I was outdated with the base size. It used to be 14px. Thanks for the feedback!
Thanks for the gems Adrian, as usual.
Can't wait for part 2.
You’re very welcome sir!
Wow! Genial, me encanta la idea de usar menos jerarquías. Muy bueno, gracias!
Un gusto!
Thanks for sharing, this works beautifully! I think it’s good to add that having different scales is not a necessity for creating hierarchy. By clever use of whitespace you can create hierarchy and only use one type size.
Absolutely Wessel! 100% agree 🙌🏻
Superb video. question: beyond 72px how much do you increment between each typography size?
Thanks, glad you like it! Above 72px I increase at the very least 2x, but sometimes 3, 4, 5, even 10x. It depends what I'm going for.
Hey Adrian thanks for spreading knowledge as always. I have a question regarding the typographic scale using your Helvetica Neue library as an example. I remember in a past video on type sizes where you talked about striving to create a clear contrast between sizes to achieve hierarchy. So I was wondering is there a purpose to using 12px and 14px since they are so close in size? Wouldn't it be better to eliminate the 12 or 14 px size and work with 4 levels of scale instead? My only reasoning into why you're using 12px is might be because the subtitle is all caps so it appears bigger which is why you reduced it down to 12?
You're exactly right! That's why I used 12px for subtitles, it's an optical adjustment. And I only use 12px with all caps ;) Very bright observation!
Really great video 👌
Thanks Adarsh!
The gumtoad links says "This product is not currently for sale.". Where can we buy ?
Ahhh yeah, you can still buy it at Creative Market. We'll probably discontinue this products soon, just a heads up!
Your video was exactly what I was looking for and wanted to learn. Thank you so much. I have a question about smaller copy such as form field labels, tags or terms of service at the bottom of a page. What sizes do you recommend for those types of uses?
So glad to hear this was helpful! For small text, I recommend playing around with the smallest sizes in this system. You can even use bigger sizes if you want. Just don’t add smaller sizes, unless you can create a high contrast like half the size of the smaller one. But in this case that would mean 6px which is not readable.
If I use 1.618 to multiply font size, Will it be ok?
Yeah, it will just bring you, the devs, and everyone who uses the system a lot of headaches xD
Great pointers, thank you! These systems are very high impact and look suited for image-heavy layouts. Is it possible to get a video on creating a type system for text-heavy website designs, like for blogs and media sites? In lieu of a video, any suggested resources? Thanks again :)
You’re welcome! 🙌🏻 That’s a good one ☝🏻 You can use this system for text heavy websites, you just need to manage white space smartly. But I would probably choose a serif typeface for paragraphs, and maybe some other typeface for numbers and some titles to be able to create high contrast in less space. I’ll note the idea to do a video in the future!
@@hellobont awesome!! Thanks again!
Very much appreciated and incredibly helpful! Just two (possibly dumb) questions: What's the actual size of 72 px (as an example) in typography? Is it the distance between the ascender and descender of a character or something else entirely? Should I take this into consideration before I set my values in the typographic scale or is it irrelevant?
Glad this helps Kostas! Regarding your question, I’m honestly not sure but think it’s what you say. But it won’t make any difference in your results 😊
@@hellobont Thank you very much for your response! I was looking for typographic grid systems in general the other day, and before I found your super useful video, I happened to come across some examples having the x-height of the type for the body copy coincide with the height of the baseline grid. That's when it struck me. So, I thought maybe before the process of making a typographic scale, they had been making their decisions based on this factor... In any case, thanks again for the video and your response!
Right! Yeah, that’s another way to do it. I’m not a fan of that method, feels too rigid to me. But it’s definitely not wrong! Good questions btw. If you have any more questions let me know!
Great !
A very very unique and awesome tips as always, without spending a decade teaching some useless theories about type. Please give us a real world example and design it from scratch to see how you apply the typographic system.
All the love ❤️
Ammar Osama sounds like a plan! Will do :)
Perfecto, pienso que la sistematización es fundamental en los procesos de diseño y esto que dices está súper!! Peroooo! Me parece que es para un estilo y tipo de diseño web, sería interesante saber cómo lo harías cómo lo resuelves por ejemplo para un Saas UI design (Web app) ya sabes que tienen tablas, Dashboard, cards, etc... sería genial me explicarás cómo lo resuelves? Mobile y desktop design. Saludos gracias desde yaaaa
Buenísimo, tomo nota para futuros videos. Pero en síntesis: uso este mismo sistema tipográfico para web apps también. Para mobile, normalmente ajustó el tamaño de 72px a 48px, y el resto lo mantengo igual. Saludos!
BONT Gracias Adrián será interesante verlo al igual con el tema de Golden Canon Grid la implementación en este mismo escenario??? Funcionaria? Saludos
do you have it for figma?
We do!
Hola Adrián.
¿Vas a hacer el vídeo en español?
Gracias.
Hola Toni! Por ahora no, pero podes activar los subtitulos auto-generados en español, lo podes seguir bien así. Si mucha gente lo ve en inglés, podríamos hacer la versión en español. Pero hicimos algunos videos en español y pocos lo miran, y es un esfuerzo bastante grande hacer en dos idiomas. Saludos!
@@hellobont ok, lo entiendo. Una lástima siendo el idioma más hablado del mundo después del chino. Pero bueno. Mucho ánimo y gracias por contestar. Un saludo.
Gracias por entender!
¡Hola Bont! Do you guys have typo systems for sale in adobe?
I hear you! Many are asking for Adobe and Figma versions. We’ll see what we can do, stay tuned! For now, only Sketch...
@@hellobont Hey, no worries. I actually purchased one of your systems and opened it up in XD. Seemed to work fine. Thank you much for sharing and educating us! Lots of love and joy in creation to you all!😁
That’s really cool! Glad to be able to share :) Thanks for sticking around and for your support 🙌🏻
where is the next video?
It would be awesome if there are Figma version.
Hey Franco! The same principles apply to any program like Figma!
Hi! My English is bad, i find it difficult to translate. But, i like this content!:)
Glad to hear that! Did you try the auto-generated subtitles?
@@hellobont Yes. But, i'm learning English. I need practice. 2in1. =)
Adrian sube este video en español por favor, saludos
Felipe! Por ahora vamos a subir en inglés. Podes activar los subtitlos autogenerados y traducirlos al español. Lo probamos y funciona bien para seguir el hilo de lo que voy explicando :)
Bueno voy a probarlo de todas formas gracias por compartir tu conocimiento 👍
I am not sure, but I don't think the serif font you are using is good.
Thanks for sharing your thoughts!