Responsive Type Scale
One of the features aimed at increasing the responsiveness of applications using PMACS Frontend is a responsive type scale. As the width of the viewport shrinks, the base fontsize shrinks. This means that at smaller viewports the font size will likewise be smaller; and at larger viewports the font size will be larger.
Specifically, starting at the Bootstrap "xs" viewport, your application's base font size will be 14px and the base font size of the gem-supplied page chrome will be 12px. Then, at the Bootstrap "lg" viewport, the application base font size will jump to 16px and the page chrome will be 14px. Finally, at the Bootstrap "xl" viewport, the application base font size will be 18px and the page chrome base font size will be 16px. In short, every two viewports the base font size increases by 2 pixels, and the page chrome always has a base font size that is 2 pixels smaller than your application content.
Below is a table with the relvant values.
| Viewport size | Root font (1rem) | Content font | Page-chrome font |
|---|---|---|---|
| xs | 12px | 14px | 12px |
| sm | -- | -- | -- |
| md | -- | -- | -- |
| lg | 14px | 16px | 14px |
| xl | 16px | 18px | 16px |