One popular method for establishing a typography scale is to use a modular scale, based on a specific ratio. Ratios like 4:5 (a "major third"), 2:3 (a "perfect fifth"), or the "golden ratio" of 1:1.618 are commonly used. Typically, you start with a base font size, often 16px (a common default for browsers), and then apply your chosen ratio to calculate the subsequent sizes in your scale.
While the mathematical elegance of this approach is appealing, it has a deal-breaker limitation: limited size options. You could try different ratios and equations, but at that point you’re just trying to pick a scale that happens to match the sizes you already know you want.
For interface design, an alternative and more practical approach is to hand-pick the font sizes. This is the approach I took for this library.
Traditionally, web designers rely on hand-picked font sizes and a set of breakpoints to control how those sizes vary across screen sizes. Developers are often handed a collection of mockups for mobile (320px), large mobile (400px), tablet (768px), small desktop (1024px), and large desktop (1440px). Breakpoint-based type sizing is hacky and lacks a well-thought-out scaling strategy. The effort expended by designers and developers in generating so many discrete artifacts is an inefficient use of time and resources. The better we want it to work, the more stuff you need to design and develop.
Even though you have complete control to change this, I chose to apply fluid typography, with a simple process: