Creating a Design System - Typography Extended

[@Tschoii90]

These Plugins are so good, they should be illegal. Jesus. Great video! Thank you!

[@salisuoluwaseun5971]

Thank you actually help a lot

[@chrisowemz]

Thanks for all these plugins. I have an issue with the batch styler as it doesn't work well right now

[@steffsamtoy3310]

thank you so much!!! very helpful :D. Love your videos, keep going

[@AMDesignAndDev]

Thanks a lot!

[@abadandlady]

Great video. Just curious how you would approach adding a second font style --for example maybe H1 is inter but body font is something else. Generally most apps and sites use more than one typeface (usually 2-3). Do you use the same scale output or visually/manually modify it by seeing them in contrast to each other?

[@seppneimusser5723]

Awesome thank you so much AM Design^^

[@clotildadaniels6453]

it's the great insight always 🤗

[@sayekatchakraborty2552]

Thank you ❤️ You made my life easier 🥰

[@iCosmictube]

It would be nice to see a video of how to correctly calculate line height as a percentage, for example I still can't get out of the habit of setting line height manually based on the instructions of the design material, is there a simpler solution to find the ideal percentage ratio of line height to font size?

[@AngyBrooksPersonal]

rule of thumb: 150%, less for larger fonts like a heading, which might be 120%

[@someshghanchekar6252]

hey hi thanks for the great video. but when you use plugin and generate text style, your style shows in heading1 with regular and bold both in one,but in my style both are different why ?thanks once again.

[@iamgavcarter]

Hey AM, I just finished both your videos on typography in the context of design systems. Quick question, do you use this structured type system method for ALL text in the design system? I.e. Even text in buttons, tags, navigation... EVERYTHING?

[@AMDesignAndDev]

Depends on the project, though ideally yes you should use it for everything!

[@iamgavcarter]

@@AMDesignAndDev Thanks for the quick reply!

[@thelastjess]

How would you treat typography on mobile? Would you create a subset for that separately?

[@feelcollins4358]

yes, desktop scales are not the same as for mobile. A heading 1 in desktop for example is too large to be used on mobile version

[@saskiagittner8127]

@AMDesignAndDev What are the best sizes and leading in your opinion for mobile apps - considering acessibility and scaling type size

[@AMDesignAndDev]

Material UI has a good scaling sysrem

[@saskiagittner8127]

@@AMDesignAndDev thank you

[@rtsbagus]

Nice.

[@ghizelantrh7195]

thankyouu M

[@anhvo1068]

when i press command D, it duplicates to a different frame, not placed in order like you

[@haritkhoda]

The Text style Generator isn't working properly.

[@jessekandres9047]

why was it you chose the base size to be 14 and the scale to be the major second scale.

[@AMDesignAndDev]

I just like how it scales, the base can be 16 too. Ideally the base should be whatever the body size is. Usually its either 14, 16, or 18. And the scale would depend on how large you want your font to scale. So if you want a site with really large headings etc, you'll use a bigger scale. If you however are designing lets say for mobile, you'll use a relatively lower scale. Hope this helps.

[@jessekandres9047]

@@AMDesignAndDev awesome thank you! I was actually trying to make a UI kit that I can use as a stock backbone for my projects and went down a rabbit hole of what logic typescales are based on, and was curious how you chose your set. Thanks for responding!