I am working on a mobile app UI design in Adobe XD. Before starting the design I would like to setup a font style guide. What I have achieved so far is in the attached image. I am using a typeface named Gilroy. I wonder what is the best way to setup a font style guide for your design, using any font other than those fonts used in the ios/android design guidelines. I would like to know the step by step process for creating a font style guide when you start your UI design.

enter image description here

  • Looks like you have made a pretty good job of it already. I'm not entirely sure what you are asking when you say the "best way". Best is subjective. Whatever works for you is "best" for you. – Billy Kerr May 14 '20 at 11:26
  • I have made this using random values which I thought will look good in the design. But I was thinking what method do other professionals out there use inorder to achieve the right values. I would like to know whether there is any proper method to follow, inorder to create a right size guide. – Ajith May 14 '20 at 11:41
  • Maybe some other things you can add are guides for line spacing/leading, and perhaps whether lines of text should be justified, centred, left aligned, whether paragraphs should be indented or block, etc. The possibilities are endless. Maybe also consider reducing the number of size options, not so many heading or body text sizes. Keep it simple. – Billy Kerr May 14 '20 at 11:45
  • Agree that. But Is there any proper technique to find optimal font sizes ? – Ajith May 14 '20 at 11:51
  • 2
    Not really - you are free to choose the sizes you want. It would very much depend on the font chosen, the layout, desired look, etc. There are just too many variables. – Billy Kerr May 14 '20 at 12:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.