Dystopia - Fixed Type-Scale Generator

Welcome to a new era of web design, where control meets clarity. Our unique approach lets you specify the exact font size for every screen size, ensuring your design looks perfect on any device. Forget about guessing with viewport units; with our method, you have the exact font size at every step.

This isn't just responsive design —
it's responsive design with precision.

How does it work?

Specify Your Font Sizes: Begin by choosing your desired minimum and maximum font sizes. These are the smallest and largest sizes you want your text to scale between.
Define Screen Resolutions: Next, input the minimum and maximum screen resolutions for your design. This helps tailor the typography to fit perfectly on any device, from the smallest phones to the largest desktop screens.
Generate and Use: Our calculator then produces a series of media queries at 32px intervals, each setting the --dyst-font-size CSS custom property (variable) to a specific font size within your defined range. This variable can be directly used in your CSS or within a calc() function to adjust sizes dynamically, like so: calc(var(--dyst-font-size) * 1.5). This gives you the flexibility to apply and adjust the calculated font sizes across your project effortlessly.

Why use px instead of rem?

Simplicity in Design: Pixels offer a straightforward, no-nonsense unit of measurement that's easy to read and understand at a glance. This clarity is invaluable, especially when you're knee-deep in complex design and development tasks.
Designer-Friendly: Ask any designer, and they'll tell you that pixels are the lingua franca of design tools like Figma. By sticking to pixels, we bridge the gap between design and development, ensuring that what you see in your design mockups translates directly to your screen, with no surprises or conversions needed.
Avoiding the Mental Gymnastics: Ever stared at a CSS rule like clamp(0.9375rem, 0.9158rem + 0.1087vi, 1rem) and found yourself scratching your head trying to visualize the actual size? You're not alone. By using pixels, we eliminate the need for complex mental conversions, making it easier to predict and understand how elements will appear on your page.
A Nod to Nostalgia: There’s something beautifully nostalgic about pixels. They remind us of a simpler time in web design, where every pixel counted, and designers and developers worked closely to pixel-perfect their creations. Our tool brings a bit of that simplicity and precision back, albeit with a tongue-in-cheek twist.

Experience the difference when you know exactly how your site will look, from the smallest phone to the largest display.

Generated CSS

@media (width < 352px) {
  :root {
    --dyst-font-size: 14px;
  }
}

@media (352px <= width < 384px) {
  :root {
    --dyst-font-size: 14px;
  }
}

@media (384px <= width < 416px) {
  :root {
    --dyst-font-size: 15px;
  }
}

@media (416px <= width < 448px) {
  :root {
    --dyst-font-size: 15px;
  }
}

@media (448px <= width < 480px) {
  :root {
    --dyst-font-size: 15px;
  }
}

@media (480px <= width < 512px) {
  :root {
    --dyst-font-size: 15px;
  }
}

@media (512px <= width < 544px) {
  :root {
    --dyst-font-size: 15px;
  }
}

@media (544px <= width < 576px) {
  :root {
    --dyst-font-size: 16px;
  }
}

@media (576px <= width < 608px) {
  :root {
    --dyst-font-size: 16px;
  }
}

@media (608px <= width < 640px) {
  :root {
    --dyst-font-size: 16px;
  }
}

@media (640px <= width < 672px) {
  :root {
    --dyst-font-size: 16px;
  }
}

@media (672px <= width < 704px) {
  :root {
    --dyst-font-size: 17px;
  }
}

@media (704px <= width < 736px) {
  :root {
    --dyst-font-size: 17px;
  }
}

@media (736px <= width < 768px) {
  :root {
    --dyst-font-size: 17px;
  }
}

@media (768px <= width < 800px) {
  :root {
    --dyst-font-size: 17px;
  }
}

@media (800px <= width < 832px) {
  :root {
    --dyst-font-size: 18px;
  }
}

@media (832px <= width < 864px) {
  :root {
    --dyst-font-size: 18px;
  }
}

@media (864px <= width < 896px) {
  :root {
    --dyst-font-size: 18px;
  }
}

@media (896px <= width < 928px) {
  :root {
    --dyst-font-size: 18px;
  }
}

@media (928px <= width < 960px) {
  :root {
    --dyst-font-size: 18px;
  }
}

@media (960px <= width < 992px) {
  :root {
    --dyst-font-size: 19px;
  }
}

@media (992px <= width < 1024px) {
  :root {
    --dyst-font-size: 19px;
  }
}

@media (1024px <= width < 1056px) {
  :root {
    --dyst-font-size: 19px;
  }
}

@media (1056px <= width < 1088px) {
  :root {
    --dyst-font-size: 19px;
  }
}

@media (1088px <= width < 1120px) {
  :root {
    --dyst-font-size: 20px;
  }
}

@media (1120px <= width < 1152px) {
  :root {
    --dyst-font-size: 20px;
  }
}

@media (1152px <= width < 1184px) {
  :root {
    --dyst-font-size: 20px;
  }
}

@media (1184px <= width < 1216px) {
  :root {
    --dyst-font-size: 20px;
  }
}

@media (1216px <= width < 1248px) {
  :root {
    --dyst-font-size: 21px;
  }
}

@media (1248px <= width < 1280px) {
  :root {
    --dyst-font-size: 21px;
  }
}

@media (1280px <= width < 1312px) {
  :root {
    --dyst-font-size: 21px;
  }
}

@media (1312px <= width < 1344px) {
  :root {
    --dyst-font-size: 21px;
  }
}

@media (1344px <= width < 1376px) {
  :root {
    --dyst-font-size: 21px;
  }
}

@media (1376px <= width < 1408px) {
  :root {
    --dyst-font-size: 22px;
  }
}

@media (1408px <= width) {
  :root {
    --dyst-font-size: 22px;
  }
}

This isn't just responsive design —it's responsive design with precision.

Fixed Type-Scale Generator

Generated CSS

This isn't just responsive design —
it's responsive design with precision.