[lumo] Responsive typography

[jouni]

Consider adding an opt-in feature which makes the font size hierarchy responsive – meaning that on large viewport sizes the size difference between the body text size and the largest heading size is more dramatic than on small viewport sizes.

For inspiration:

• https://stevenloria.com/responsive-typography/
• https://jonathan-harrell.com/unlocking-benefits-css-variables/
• https://codepen.io/gunnarbittersmann/pen/RgVoKN

At the same time, some components could benefit from customized responsive type sizing. For example, <vaadin-tabs> could have an optional theme variant which scales down the font size on small viewport sizes to accommodate more tabs in the viewport. On iOS, for example, the tab bar font size is really small, and some secondary texts are also rather small.

We could potentially introduce some more semantics to the font sizes with something like the type scale from Material design.

[jouni]

See Apple’s “size classes” for inspiration as well: https://developer.apple.com/videos/play/wwdc2017/812/ https://makeapppie.com/2016/09/05/an-introduction-to-size-classes-for-xcode-8/

[TatuLund]

If you want to have bigger font in mobile, you can set the font sizes in media query, example

@media (max-width: 800px), (max-height: 600px) {
  html {
    --lumo-font-size: 1rem;
    --lumo-font-size-xxxl: 3rem;
    --lumo-font-size-xxl: 2.25rem;
    --lumo-font-size-xl: 1.75rem;
    --lumo-font-size-l: 1.375rem;
    --lumo-font-size-m: 1.125rem;
    --lumo-font-size-s: 1rem;
    --lumo-font-size-xs: 0.875rem;
    --lumo-font-size-xxs: 0.8125rem;    
  }
}