2.3 KiB
import { BigQuote } from '../site/ui'
export const meta = { title: 'Scales / Overview / Docs / TACHYONS', subNav: 'overview', editUrl: 'https://github.com/tachyons-css/tachyons/edit/master/docs/scales.md' }
Scales
Many of Tachyons modules employ the use of scales, including width, color, font size, spacing, etc. They're often based on powers of two and are opinionated by design.
Scales are used in order to provide constraints, which in turn results in a more cohesive, consistent, and performant end result. These scales also provide a language that can be communicated between design, development, and other stakeholders on a project.
Rapid development
Through the use of scales, it become a quick task to "bump up the horizontal padding on that button" or "increase the hero's heading font size". This allows designers and developers to rapidly develop and prototype in the browser, while still having a consistent looking web page.
Cohesion and consistency via constraints
For those that are newer to web design, Tachyons help guide the user to a happy path of consistency through the use of scales. For example, a spacing scale with only seven steps based on powers of two helps to keep things aligned throughout a layout.
Weber–Fechner law
Tachyons scales are based on design theory as well. One of those is the Weber-Fechner law.
This essentially means that a scale of font sizes with similar values appears to be similar in size when compared to a scale that grows exponentially.
As humans, we have a hard time differentiating 2rem and 2.5rem, but the difference between 2rem and 4rem is quite drastic.