Utopia.fyi type scale generator, with intervals. Run in command line or use in your own code

css-type-scale.rb

#!/usr/bin/env ruby

# See https://utopia.fyi/type/calculator for the original interactive calculator, without intervals

rem = 16 # px value of 1rem
base_min_size = 18 # minimum font size at min width
base_max_size = 29 # maximum font size at min width
min_width = 320 # minimum viewport width
max_width = 3840 # maximum maximum width

ratio = 1.3333 # ratio for the scale
ratio_max_viewport = 1.3333
intervals = 3 # number of intervals in the scale to reach the next multiple of the ratio

# Pre-caclulate a couple of formula numbers that don't change
precalc_minus = -1 * min_width
precalc_size_diff = max_width - min_width

# Notes to include in the scale
scale = (-2..15).to_a

px_sizes = ""
clamp_css = ""

for i in scale
	# Set min and max px sizes for this note of the scale
	# size = base * ratio ^ (note / intervals)
	min_size = base_min_size * (ratio ** (i.to_f/intervals))
	max_size = base_max_size * (ratio_max_viewport ** (i.to_f/intervals))
	
	# puts "Note #{i}: #{min_size.round(2)} - #{max_size.round(2)}"
	px_sizes << "Note #{i}: #{min_size.round(2)} - #{max_size.round(2)}\n"
	
	slope = (max_size - min_size) / precalc_size_diff
	y_intersection = precalc_minus * slope + min_size
	
	# puts "--step-#{i}: clamp(#{(min_size / rem).round(2)}rem, #{(y_intersection / rem).round(2)}rem + #{(slope * 100).round(2)}vw, #{(max_size / rem).round(2)}rem)"
	clamp_css << "--step-#{i}: clamp(#{(min_size / rem).round(2)}rem, #{(y_intersection / rem).round(2)}rem + #{(slope * 100).round(2)}vw, #{(max_size / rem).round(2)}rem);\n"
end

puts "Scale notes:\n#{px_sizes}\n\n"

puts "CSS\n----\n\n#{clamp_css}"