Build your own Typographic Scale tool with JavaScript

The tool will have the following features:

Ability to select a font base size

Ability to choose different fonts from commonly used Google Fonts

Ability to adjust the font weight

A live preview for visualizing the typography scaling

Ability to generate and copy CSS variables.

So.. what exactly are we building?

Here’s a demo to show what we’re working towards:

<br />

Setting up the HTML Structure

Let’s start by setting up the structure in HTML.

  class="container">
      
         Generator Toolh1>
        Create a harmonious type scale for your website
      
       class="main">
         class="form-group">
           for="base-size">Base Font Size (px)
          
            type="number"
            id="base-size"
            value="16"
            min="8"
            max="32"
            step="1"
          />
        
         class="form-group">
           for="font-family">Font Family
           id="font-family">
             value="" disabled selected>Select a font
          
        
         class="form-group">
           for="font-weight">Font Weight
           id="font-weight">
             value="300">Light
             value="400" selected>Regular
             value="500">Medium
             value="600">Semi-Bold
             value="700">Bold
          
        
         class="form-group">
           for="scale-ratio">Scale Ratio
           id="scale-ratio">
             value="1.067">Minor Second (1.067)
             value="1.125 ">Major Second (1.125)
             value="1.2">Minor Third (1.2)
             value="1.25 " selected>Major Third (1.25)
             value="1.333">Perfect Fourth (1.333)
             value="1.414">Augmented Fourth (1.414)
             value="1.5">Perfect Fifth (1.5)
             value="1.618">Golden Ratio (1.618)
          
        
        
          class="css-output"
          type="text"
          id="css-output"
          style="display: none"
        />
      
       class="preview-container">
         class="top">
          Preview
           id="copy-css" class="copy-css">Copy CSS
        
         class="preview" id="preview">
      
    

From the HTML structure, you can see we have several select inputs for choosing options such as font family, font weight, and the scale ratio.

We also have a preview container to display the generated type scale in real-time and a button for copying the generated CSS variables.

Our type scale tool consists of 2 sections: the upper section containing the controls, and the bottom section which has the preview container.

Let’s add some basic styling for the body, header, and container.

body {
    font-family: "inter", sans-serif;
    background-color: #f8fafc;
    color: #1e293b;
    line-height: 1.65;
  }

  .container {
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    background-color: white;
    margin: 40px auto;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  header {
    width: 100%;
    padding: 16px;
    text-align: center;
  }

 h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 8px;
  }
  header p {
    font-size: 1rem;
  }

    

To ensure the inputs are responsive, add flex:wrap to the controls section.

.controls {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    padding: 32px;
    border-bottom: 1px solid #e5e7eb;
  }

Next, style the input and select elements.

input,
  select {
    width: 100%;
    padding: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.75rem;
    font-family: "Inter", sans-serif;
    color: #1e293b;
  }

  input:focus,
  select:focus {
    outline: none;
    border-color: #8a8a9081;
  }

Apply the following styles to the preview container to ensure it’s scrollable on small screens.

.preview-container {
    overflow-x: auto;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    background-color: white;
    border-radius: 6px;
    padding: 0 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

From the final result, you can see we have labels in px and rem, as well as a paragraph for displaying each font level. All these elements will be contained within a div with the class scale-item.

Style the item as follows:

.scale-item {
    display: flex;
    align-items: baseline;
    margin-bottom: 24px;
  }

  .scale-item p {
    margin: 0;
  }

  .scale-label {
    width: 80px;
    font-size: 0.75rem;
    color: #64748b;
    flex-shrink: 0;
  }

Finally, the Copy CSS button will have the following styles.

.copy-css {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: #e9ecef;
    padding: 6px 12px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
}

.copy-css:hover {
 background-color: #dcdcdc;
}
.css-output {
  opacity: 0;
  }

Generating Typographic Scales with JavaScript

We’ll start by getting the input and select elements.

1	const baseSize = document.getElementById("base-size");
2	const fontFamily = document.getElementById("font-family");
3	const fontWeight = document.getElementById("font-weight");
4	const scaleRatio = document.getElementById("scale-ratio");

We’ll also get the preview container and the Copy CSS button:

1	const preview = document.getElementById("preview");
2	const copyCSS = document.getElementById("copy-css");

Create an array of the most popular fonts and set them as options in the font family select input. Add the array as shown below.

 const googleFonts = [
        "Inter",
        "Roboto",
        "Open Sans",
        "Lato",
        "Montserrat",
        "Poppins",
        "Source Sans Pro",
        "Raleway",
        "Playfair Display",
        "Merriweather",
        "Ubuntu",
        "Nunito",
        "DM Sans",
        "Work Sans",
        "Titillium Web",
        "Fira Sans",
        "Rubik",
        "Lora",
        "Barlow",
        "Hind",
        "Cabin",
        "IBM Plex Sans",
        "Quicksand",
        "Karla",
        "PT Sans",
        "Heebo",
        "Mulish",
        "Overpass",
        "Jost",
        "Manrope",
        "Spectral",
        "Space Grotesk",
        "DM Mono",
        "Courier Prime",
        "Inconsolata",
      ];

Let’s populate the font family select input with our fonts array.

  function populateFonts() {
    googleFonts.forEach((font) => {
      const option = document.createElement("option");
      option.value = font;
      option.textContent = font;
      fontFamily.appendChild(option);
    });
  }

  populateFonts();

Here we are looping through the fonts array, creating an option elements for each font and setting its value and text content to the font name. Finally the option element is added to the font family select element.

Set the first font in the array as the default on the input.

1	applyFont(googleFonts[0]);

To ensure the correct font and all its weights are loaded directly from Google Fonts, create a function called applyFont() and add the currently selected font as a stylesheet link in the page header.

function applyFont(font) {
    const existingLink = document.querySelector(
      "link[href*='fonts.googleapis.com']"
    );
    if (existingLink) {
      existingLink.remove();
    }
    const link = document.createElement("link");
    link.href = `https://fonts.googleapis.com/css2?family=${font}:wght@100;200;300;400;500;600;700;800;900&display=swap`;

    link.rel = "stylesheet";
    document.head.appendChild(link);
  }

Levels in typographic scales

In typographic scale systems, levels are used to define the different steps or sizes within the scale. Each level corresponds to a specific role in web design.

For example:

Higher levels are used for headings, for example, h1 and h2 and so on

The base level is mostly used for the body

Lower levels are mostly used for captions, foot notes, etc.

Each higher level is calculated by multiplying the base size by the scale ratio.

A scale ratio determines how each level increases relative to the base. Common scale ratios include:

1.25 (Minor Third)

1.33 (Perfect Fourth)

1.414 (Augmented Fourth)

1.5 (Perfect Fifth)

1.618 (Golden Ratio)

For example, suppose you want to use a scale ratio of 1.25 and your base font is 16px:

Level 1 will be 16px * 1.25 = 20px

Level 2 will be 20px * 1.25 = 25px and so on.

For levels below the base, we use negative level numbers (i.e. Level -1, Level -2, etc. ) .These are calculated by dividing the base size by the scale ratio.

For example, keeping your base size at 16px, if you want 2 levels below the base, it will look like this:

Level-1 = 16px / 1.25 = 12.8px

Level-2 = 12.8 /1.25 = 10.24px

The levels array

Now that we have understood how to use levels and scale ratios to generate fonts, let’s define our levels array.

const FONT_SIZES = [
    { name: "h1", level: 5 },
    { name: "h2", level: 4 },
    { name: "h3", level: 3 },
    { name: "h4", level: 2 },
    { name: "h5", level: 1 },
    { name: "body", level: 0 },
    { name: "small", level: -1 },
  ];

Create a function called calculateSize() which will calculate the font size based on the base size, the selected scale ratio, and the expected level.

Here is the formula:

1	size = baseSize * (scaleRatio ^ level)

where :

baseSize is the starting font size

scaleRatio is the multiplier scale

level represents the step in the scale

The function will look like this:

function calculateSize(baseSize, level) {
    return parseFloat(
      (baseSize * Math.pow(scaleRatio.value, level)).toFixed(2)
    );
  }

Then, create another function which will return font sizes in rems :

1	function calculateSizeInRem(baseSize, level) {
2	return (calculateSize(baseSize, level) / 16).toFixed(2) + "rem";
3	}

Now we need to update the preview section with sample text showing how each level looks.

Updating the Preview pane

For each sample text, we will do the following:

Display the font size both in px and rem

Show a sample text that uses the currently selected size, font family, and font weight.

Here is the function that does that.

function updatePreview() {
    preview.innerHTML = "";
    const base = parseFloat(baseSize.value);
    const font = fontFamily.value;

    const weight = fontWeight.value;

    FONT_SIZES.forEach(({ name, level }) => {
      const size = calculateSize(base, level);
      const remSize = calculateSizeInRem(base, level);
      const item = document.createElement("div");
      item.classList.add("scale-item");

      const pxLabel = document.createElement("div");
      const remLabel = document.createElement("div");
      remLabel.textContent = `${remSize}`;

      pxLabel.textContent = `${size}px`;
      pxLabel.classList.add("scale-label");
      remLabel.classList.add("scale-label");

      const text = document.createElement("p");

      text.style.fontSize = `${size}px`;
      text.style.fontFamily = font + ", sans-serif";
      text.style.fontWeight = weight;

      text.style.lineHeight = level >= 0 ? "1.15" : "1.65";
      text.textContent =
        "Every project has its own distinct requirements. ";

      item.appendChild(remLabel);
      item.appendChild(pxLabel);
      item.appendChild(text);

      preview.appendChild(item);
    });
  }

Let’s break down the code.

First, we clear the preview container to ensure the previous sample text is removed before a new sample is rendered.

1	preview.innerHTML = "";

Next, we get the values from the inputs.

baseSize.value – The current base font size in pixels

fontFamily.value – The selected font family from the dropdown.

fontWeight.value – The chosen font-weight

Then we loop over the FONT_SIZES array and iterate over each typography item. For each item, calculate the font size based on the selected scaleRatio and current baseSize.

1	FONT_SIZES.forEach(({ name, level }) => {
2
3	}

Then we create preview elements for each size. Each item will have :

A container for the scale item

2 labels showing the size in px and rem

A paragraph to display the sample text

Here, we applied the predefined styles to the elements.

const item = document.createElement("div");
item.classList.add("scale-item");
const pxLabel = document.createElement("div");
const remLabel = document.createElement("div");
remLabel.textContent = `${remSize}`;
pxLabel.textContent = `${size}px`;
pxLabel.classList.add("scale-label");
remLabel.classList.add("scale-label");
const text = document.createElement("p");

Here we applied the generated text sizes to the preview.

text.style.fontSize = `${size}px`;
text.style.fontFamily = font + ", sans-serif";
text.style.fontWeight = weight;
text.style.lineHeight = level >= 0 ? "1.15" : "1.65";
text.textContent = "Every project has its own distinct requirements.";

Finally, we append remLabel, pxLabel, and the preview text to each scale item container and add it to the preview section.

item.appendChild(remLabel);
item.appendChild(pxLabel);
item.appendChild(text);
preview.appendChild(item);
updatePreview();

Invoke the updatePreview() function so the changes are effected .

Whenever you change any value such as the base, scale ratio, or weight, these changes should be updated in real-time. This is done by adding event listeners to each input so that any change automatically triggers the updatePreview() function

1	baseSize.addEventListener("input", updatePreview);
2	fontFamily.addEventListener("change", updatePreview);
3	scaleRatio.addEventListener("change", updatePreview);
4	fontWeight.addEventListener("input", updatePreview);

Generate CSS Variables

The last feature is the ability to automatically generate CSS variables for the calculated font sizes. This makes it easy to copy and use them in your projects.

The final format of the CSS variables will look like this:

1	:root {
2
3	--font-size-h1: 48.83px;
4	--font-size-h2: 39.06px;
5	--font-size-h3: 31.25px;
6	--font-size-h4: 25px;
7	--font-size-h5: 20px;
8	--font-size-body: 16px;
9	--font-size-small: 12.8px;
10	}
11

To achieve this format, we will build a css string that begins with the opening of a :root block. The :root is a pseudo-class selector commonly used to define global CSS variables that can be used throughout the entire stylesheet.

Let’s build the string:

1	let css = `:root { \n\n `;

Get the current values for the base size and scale ratios from the inputs.

1	const base = parseFloat(baseSize.value) \|\| 16;
2	const SCALE_RATIO = parseFloat(scaleRatio.value);

Create a helper function called poweredBy() which will calculate the font sizes. .

1	function poweredBy(base, scale, level) {
2	return parseFloat((base * Math.pow(scale, level)).toFixed(2));
3	}

Create an object called fontSizes for holding the sizes for different levels

const fontSizes = {
  h1: poweredBy(base, SCALE_RATIO, 5),
  h2: poweredBy(base, SCALE_RATIO, 4),
  h3: poweredBy(base, SCALE_RATIO, 3),
  h4: poweredBy(base, SCALE_RATIO, 2),
  h5: poweredBy(base, SCALE_RATIO, 1),
  body: poweredBy(base, SCALE_RATIO, 0),
  small: poweredBy(base, SCALE_RATIO, -1),
};

Now, add each calculated value as a CSS variable to the css string and close the :root block.

css += `  --font-size-heading1: ${fontSizes.h1}px;\n`;
css += `  --font-size-heading2: ${fontSizes.h2}px;\n`;
css += `  --font-size-heading3: ${fontSizes.h3}px;\n`;
css += `  --font-size-heading4: ${fontSizes.h4}px;\n`;
css += `  --font-size-heading5: ${fontSizes.h5}px;\n`;
css += `  --font-size-body: ${fontSizes.body}px;\n`;
css += `  --font-size-small: ${fontSizes.small}px;\n`;
css += `}\n\n`;

Finally, add the generated CSS string to the css output element to ensure it’s available for easy copying to the clipboard.

1	document.getElementById("css-output").textContent = css;
2

Copy Generated CSS

Copying text to a clipboard on a web page is done using the navigator.clipboard.writeText() method which will look like this:

function copyToClipboard() {
    const cssText = generateCSS();
    navigator.clipboard.writeText(cssText).then(() => {
      alert("CSS copied to clipboard!");
    });
  }

We also need to ensure the copyCSS() function is attached to the click event of the copy CSS button. Additionally, it’s important to ensure the default CSS values are generated after the DOM is fully loaded.

1	copyCSS.addEventListener("click", copyToClipboard);
2	document.addEventListener("DOMContentLoaded", generateCSS);

Here is the final demo:

<br />

Conclusion

That’s a wrap for the typograhic scale generator! You can build on this by customizing it further–for example, instead of using a paragraph for the preview, you can add a card or have a hero section that changes based on the generated typescale values.

Source link

What's Hot

Driving Qualified Leads With LinkedIn Content: A Proven Formula

Google Ads copywriting with AI: Getting the prompt right

A Practical Guide To Building With Clarity (Part 2) — Smashing Magazine

Build your own Typographic Scale tool with JavaScript

Preview

A Practical Guide To Building With Clarity (Part 2) — Smashing Magazine

Fresh Resources for Web Designers and Developers (September 2025)

Shades Of October (2025 Wallpapers Edition) — Smashing Magazine

Principles And Implementation (Part 1) — Smashing Magazine

Driving Qualified Leads With LinkedIn Content: A Proven Formula

Google Ads copywriting with AI: Getting the prompt right

A Practical Guide To Building With Clarity (Part 2) — Smashing Magazine

Meta unveils Business AI and new generative tools

Our Picks

Driving Qualified Leads With LinkedIn Content: A Proven Formula

Google Ads copywriting with AI: Getting the prompt right

Subscribe to Updates

What's Hot

Build your own Typographic Scale tool with JavaScript

So.. what exactly are we building?

Setting up the HTML Structure

Preview

Generating Typographic Scales with JavaScript

Levels in typographic scales

The levels array

Updating the Preview pane

Generate CSS Variables

Copy Generated CSS

Conclusion

Related Posts