Fluid Typography & Margins

Cassio has a cool feature for tailoring text sizes across different screens. The usual technique of making your website look good on mobiles is to reduce text sizes and margins between elements as screen becomes smaller. This requires you to set different breakpoints and define how each element should look on the particular screen width.

But it’s impossible to take into consideration literally infinite number of different screen sizes. There a Fluid Typography technique comes in. It allows you to define a minimum and a maximum value (for example, font-size) and then it will smoothly shrink and grow depending on the screen size. Automatically. Without writing a single breakpoint rule!

Customizing variables

Open file HTML/css/main.css and check the very beginning of the file. You will see a list of variables:

:root {
  --font-primary: 'Roboto', sans-serif;
  --font-secondary: 'Playfair Display', serif;
  --color-accent-primary-1: #c69f73; /* change color schemes from here */
  --color-accent-primary-2: #ebe6dd;
  --color-accent-primary-3: #c9bcae;
  --color-accent-primary-4: #837567;
  --color-accent-secondary-1: #628ab2;
  --color-accent-secondary-2: #3c556e;
  --color-accent-secondary-3: #283847;
  --color-accent-secondary-4: #162330;
  --distance-max-xsmall: 60; /* minimum value for small padding/margin helper class */
  --distance-max-small: 100; /* maximum value for small padding/margin helper class */
  --distance-max-normal: 200;
  --distance-max-large: 300;
  --distance-max-xlarge: 400;
  --distance-min-xsmall: 40;
  --distance-min-small: 40;
  --distance-min-normal: 60;
  --distance-min-large: 100;
  --distance-min-xlarge: 160;
  --xxl-max-font-size: 167;
  --xxl-min-font-size: 58;
  --xxl-line-height: 1;
  --xl-max-font-size: 107;
  --xl-min-font-size: 58;
  --xl-line-height: 1;
  --h1-max-font-size: 65; /* maximum font-size for Heading 1 */
  --h1-min-font-size: 34; /* minimum font-size for Heading 1 */
  --h1-line-height: 1.28; /* line height for Heading 1 */
  --h2-max-font-size: 52;
  --h2-min-font-size: 30;
  --h2-line-height: 1.38;
  --h3-max-font-size: 42;
  --h3-min-font-size: 26;
  --h3-line-height: 1.57;
  --h4-max-font-size: 33;
  --h4-min-font-size: 22;
  --h4-line-height: 1.61;
  --h5-max-font-size: 20;
  --h5-min-font-size: 18;
  --h5-line-height: 1.7;
  --h6-max-font-size: 18;
  --h6-min-font-size: 16;
  --h6-line-height: 1.81;
  --subheading-max-font-size: 13;
  --subheading-min-font-size: 11;
  --subheading-line-height: 1.75;
  --blockquote-max-font-size: 20;
  --blockquote-min-font-size: 16;
  --blockquote-line-height: 1.7;
  --paragraph-max-font-size: 16;
  --paragraph-min-font-size: 16;
  --paragraph-line-height: 1.75;
}

Those values used in calc() formulas which calculate the right value for the particular viewport width vw. You can safely customize them and instantly preview a result. Without writing a single additional line of any HTM. Without diving deep into the CSS of a particular section.