Kinsey

# Typography

The usual technique for making your website look good on mobile devices is to reduce text sizes and margins between elements as the screen becomes smaller. This requires setting different breakpoints and defining how each element should look at particular screen widths.

However, it’s impossible to account for the literally infinite number of different screens. Kinsey 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!

# Size Presets

The typographic sizing values used throughout the template are defined as CSS variables in 📄 css/main.css under the :root selector.

:root {
  ...
  /* XXL */
  --xxl-max-font-size: 126;
  --xxl-min-font-size: 54;
  --xxl-line-height: 1.0;
  --xxl-letter-spacing: -4;
  /* XL Heading */
  --xl-max-font-size: 102;
  --xl-min-font-size: 46;
  --xl-line-height: 1.18;
  --xl-letter-spacing: -2;
  /* h1 Heading */
  --h1-max-font-size: 80;
  --h1-min-font-size: 40;
  --h1-line-height: 1.20;
  --h1-letter-spacing: -1;
  /* h2 Heading */
  --h2-max-font-size: 52;
  --h2-min-font-size: 30;
  --h2-line-height: 1.28;
  --h2-letter-spacing: 0;
  /* h3 Heading */
  --h3-max-font-size: 32;
  --h3-min-font-size: 24;
  --h3-line-height: 1.5;
  --h3-letter-spacing: 0;
  /* h4 Heading */
  --h4-max-font-size: 20;
  --h4-min-font-size: 18;
  --h4-line-height: 1.8;
  --h4-letter-spacing: 0;
  /* h5 Heading */
  --h5-max-font-size: 18;
  --h5-min-font-size: 16;
  --h5-line-height: 1.8;
  --h5-letter-spacing: 0;
  /* h6 Heading */
  --h6-max-font-size: 16;
  --h6-min-font-size: 14;
  --h6-line-height: 1.8;
  --h6-letter-spacing: 0;
  /* Subheading */
  --subheading-max-font-size: 13;
  --subheading-min-font-size: 10;
  --subheading-line-height: 1.0;
  --subheading-letter-spacing: 2;
  /* Paragraph */
  --paragraph-max-font-size: 16;
  --paragraph-min-font-size: 16;
  --paragraph-line-height: 1.8;
  --paragraph-letter-spacing: 0;
  /* Blockquote */
  --blockquote-max-font-size: 24;
  --blockquote-min-font-size: 16;
  --blockquote-letter-spacing: 0;
  /* Dropcap */
  --dropcap-max-font-size: 90;
  --dropcap-min-font-size: 60;
  ...
}

# From 320px (iPhone SE screen resolution)

The minimum value with the *-min-font-size suffix defines the actual font size for the smallest screen sizes down to 320px.

# To 1920px (Full HD resolution)

The maximum value with the *-max-font-size suffix defines the actual font size for the largest screen sizes up to 1920px.

# Helper Classes

Use one of the following classes to style a text element:

.xxl /* XXL heading */
.xl /* XL heading */
.h1 /* h1 heading */
.h2
.h3
.h4
.h5
.h6
.strong
.em
.paragraph /* paragraph */
.has-drop-cap /* paragraph with drop cap */
.small /* small text */
.subheading /* subheading */

You can use the classes above in conjunction with any HTML tags. This provides great flexibility when writing SEO-friendly markup:

<!-- h1 heading with h1 style -->
<h1>My Heading</h1>

<!-- Still h1 heading but with h3 style -->
<h1 class="h3">My Heading</h1>

<!-- h2 heading but with XL style -->
<h2 class="xl">My Heading</h2>

<!-- Regular <span> element but with h4 style -->
<span class="h4">My Content</span>

<!-- Regular <div> element but with paragraph and drop cap style -->
<div class="paragraph has-drop-cap">My Content</div>

← Spacing →