Kuan

January 4, 2023

Flutter: Text theme from other design language

I always know there are header 1 to header 6 and body text. Also, aware of the existence of subtitle, caption, paragraph, etc. Never understand what is their purpose, vaguely can guess they are different in size. Maybe few of them are naturally bold? I cannot be certain.

Recently, my freelancing project's customer asked me to incorporate their font style guidelines into the web application I am building. Most of the style guides are in language I understood. There are a few outliers:

1. There are 2 Header 1. Each has their own size. I cannot guess the reason, I just translate them into H1 and H2.
2. Each font has a ##/## pair of number. Later I learned it is <font size>/<font height>. Good to know.
3. There are two type of fonts. One font for all the headers. Another for all the paragraphs.
4. Header 5 & 6 is smaller than Paragraph 1 & 2.
5. There are no subtitles, caption, button, labels, display, etc.

These, obviously, do not translate well into Material's text guideline. I can apply all the headers. But then I need to start guessing at subtitles1&2, body 1&2, and so on. 

So, i whimed them. Continuing the subtitles as Paragraph 1. Then ignore all the rest!

The final visual did not break. It is messy. Most of the text are not too large. Some too bold, or too heavy. The two type of fonts intertwined between labels, links, paragraph, button text, etc.

What's going on? Stay tuned for next... 

About Kuan

Web developer building with Flutter, Svelte and JavaScript. Recently fell in love with functional programming.

Malaysian. Proud Sabahan. Ex game developer but still like playing games.

New found hobby is outdoor camping with my love.