Cassio

# Fluid Typography & Spacing

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

But it’s impossible to take into consideration literally an infinite number of different screens. Cassio has a cool feature for smoothly tailoring text sizes depending on viewport width. It's called Fluid Typography (opens new window). It allows you to define a minimum and a maximum value for a property (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 the 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;
}

These values are used in calc() formulas which calculate the right value for the particular viewport width (vw). You can safely customize them and instantly preview the result without writing a single additional line of HTML code or diving deep into the CSS of a particular section.

← Morphing Letters →