Textblock for responsive typography

Textblock for responsive typography
Average rating: 0
(0 votes)

Thanks! You’ve rated this material!

It’s very useful to know how to create typography in  UI/ UX design systems. But we are sure that’s not enough for you. And here we are. With our new material about textblock for responsive typography. Read, think and use!

What is Textblock?  It is a JavaScript tool for adjusting size, leading, and grades to create continuously responsive typography. It works over your current CSS as a progressive enhancement. The script calculates your setting based on the minimum and maximum values for font size, line height, variable grades, and container width:

  • minimum/maximum font size
  • minimum/maximum line height
  • minimum/maximum container width
  • minimum/maximum grades

You can use such parameters as:

  • target (required  ): The element that should be resized ".your‑class""#some-id p"
  • minWidth: default 320
  • maxWidth: default 960
  • minWidth_FontSize: default 1.0
  • maxWidth_FontSize: default 1.8
  • minWidth_LineHeight: default 1.33 (unitless values only)
  • maxWidth_LineHeight: default 1.25 (unitless values only)
  • minWidth_VariableGrade: A variable font weight for the small size, for example 450
  • maxWidth_VariableGrade: A variable font weight for the large size, i.e. 400
  • container: The container width to measure. Defaults to "parent" and can alternately be set to "self".
  • fontSize_Units: default em

If you’re using variable fonts, the minWidth_VariableGrade / maxWidth_VariableGrade parameters provide a way to simulate grades (micro-variations in weight to set smaller sizes slightly bolder).

Please free to find more here.

Read our blog for finding more about an effective way of creating typography in design systems that can be helpful for your next project. Or… Hire Syndicode designers who will take care of your next masterpiece UI and UX, and deliver responsive typography out-of-the-box for you.

p.s. Evaluate our level by checking Syndicode’s Dribbble page!

Rate this article, if you like it

Thanks! You’ve rated this material!

Got a project? Let's discuss it!

*By submitting this form you agree with our Privacy Policy.

Mailing & Legal Address

Syndicode Inc. 340 S Lemon Ave #3299, Walnut CA, 91789, USA

Visiting & Headquarters address
Kyiv Sofiivska 1/2a, 01001, Kyiv, Ukraine
Dnipro Hlinky 2, of. 1003, 49000, Dnipro, Ukraine
Email info@syndicode.com
Phone (+1) 9035021111