Type Scale Calculator

notion image
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi lacus sed viverra tellus in hac. In arcu cursus euismod quis.

Massa vitae

Lobortis elementum nibh tellus molestie nunc non blandit massa enim. Morbi tincidunt augue interdum velit euismod in pellentesque massa placerat.
Morbi leo urna molestie at. Donec ultrices tincidunt arcu non sodales. Lacinia quis vel eros donec ac odio tempor. Phasellus vestibulum lorem sed risus ultricies tristique.

Vestibulum

Habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Suscipit tellus mauris a diam maecenas sed. Odio euismod lacinia at quis risus.
Non quam lacus suspendisse faucibus interdum posuere.

CSS

h1 { font-size: 2.5em; } h2 { font-size: 1.842em; } h3 { font-size: 1.3572em; } small { font-size: .7368em; } html { font-size: 1.125em; } h1, h2, h3 { font-family: 'Playfair Display'; font-weight: normal; } html { font-family: 'Raleway'; }

HTML

<head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair%20Display&amp;family=Raleway%3Aital%2Cwght%400%2C400%3B0%2C700%3B1%2C400%3B1%2C700&amp;display=swap"> </head>
In the past, it was better to let Google host your fonts. These days, it’s better to self host. Why?
Self-host