Tyfy’s core module defines three SASS variables. These variables determine the size of the framework’s grid and text. The variable values can have a significant impact on your typographic design.
The core module is the first module listed in the tyfy.scss file. Core variables are required by the functions module and are used to calculate default values for variables in the settings module.
Tyfy variable names begin with the prefix $ty to avoid name collision with other projects.
Variables
- $tygrid-unit
0.875rem !default;- Grid unit size in rem units. I recommend this value be half the desired line height. Smaller values will result in a more compact design. Larger values will create a design with more breathing room.
- $tyfont-size-scalar
1.2 !default;- Scalar value that defines the proportion between font sizes on the modular scale. Larger values will create a scale with more typographic contrast.
- $tyfont-size-base
1rem !default;- Font size in rem units applied to the
<body>tag. Font sizes on the modular scale are calculated as a function of the base font size and the scalar: step font size = base font size × scalar(step). In this function step is an integer indicating the number of steps up (positive) or down (negative) the scale from the base size.