Responsive Type Scale

Developer
Brent Jackson
Size
2,693 Kb
Views
42,504
  1. Responsive Type Scale Previews
  2. Responsive Type Scale HTML Codes
  3. Responsive Type Scale CSS Codes

How do I make an responsive type scale?

What is a responsive type scale? How do you make a responsive type scale? This script and codes were developed by Brent Jackson on 15 September 2022, Thursday.

Responsive Type Scale Previews
IQ Test

Responsive Type Scale - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Type Scale</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <meta name="viewport" content="width=device-width, initial-scale=1">
<div class="merriweather leading pad pad-medium pad-large dark-gray"> <link href="https://fonts.googleapis.com/css?family=Merriweather:400,700" rel="stylesheet" type="text/css"> <h1 class="h1 h1-medium h1-large regular mb1">Mathematical</h1> <h2 class="h2 h2-medium h2-large">Responsive Type Scale</h2> <h3 class="h3 h3-medium h3-large mb1">Great at any size</h3> <p class="p p-medium p-large mb1">Lower contrast at small screen widths. Higher contrast at larger widths.</p> <p class="mb2"><small class="small">Use the <span class="bold">.small</span> class for unimportant stuff.</small></p> <h1 class="h2 h2-medium h2-large mb1">I’m Sick of Your Tiny, Tiny Type</h1> <p class="p p-medium p-large measure mb1">Your tiny type is hard to read – no, not hard to read, impossible to read. I carry my phone with me everywhere, but I always seem to forget my magnifying glass. I tap the Safari Reader button, but that’s not a solution to the problem. That’s a band-aid for your bad typesetting.</p> <p class="p p-medium p-large measure mb1">Sometimes I’m on my computer, and Reader doesn’t work on your web app. I hit CMD + two or three times so that my dyslexic brain can make sense of the musty 14px Helvetica your servers regurgitated all over my screen. Then the layout falls apart. Words start smashing together. Ads bleed into my emails. And I find myself scrolling up, down, left, right, left, right – what in the hell is this? The Konami code? I don’t need 30 extra lives. I want to read your content.</p> <p class="p p-medium p-large measure mb1">And I know I’m not the only one who hates your tiny type. How many times have I heard users complain about fonts being too small? More times than I’ve heard them complain about fonts being too large – wait, I’ve never heard a user complain about that. Your users aren’t asking for a faster horse – they’re struggling to read your content. Surely that isn’t what you’re going for, and surely that isn’t a good experience.</p>
</div>
</body>
</html>

Responsive Type Scale - Script Codes CSS Codes

.merriweather { font-family: "Merriweather", serif;
}
.leading { line-height: 1.75;
}
.measure { max-width: 40em;
}
.pad { padding: 1rem;
}
h1, h2, h3, h4, h5, h6, p, ul, ol { margin-top: 0; margin-bottom: 0;
}
h1, .h1 { font-size: 2rem;
}
h2, .h2 { font-size: 1.5rem;
}
h3, h4, h5, h6, .h3 { font-size: 1.25rem;
}
p, .p { font-size: 1.125rem;
}
small, .small { font-size: 1rem;
}
@media (min-width: 512px) { .h1-medium { font-size: 4rem; } .h2-medium { font-size: 2rem; } .h3-medium { font-size: 1.5rem; } .p-medium { font-size: 1.25rem; } .pad-medium { padding: 2rem; }
}
@media (min-width: 1024px) { .h1-large { font-size: 6rem; } .h2-large { font-size: 3rem; } .h3-large { font-size: 2rem; } .p-large { font-size: 1.5rem; } .pad-large { padding: 6rem; }
}
.bold { font-weight: 700;
}
.regular { font-weight: 400;
}
.caps { text-transform: uppercase; letter-spacing: .2em;
}
.mb1 { margin-bottom: 1rem;
}
.mb2 { margin-bottom: 2rem;
}
.dark-gray { color: #444;
}
Responsive Type Scale - Script Codes
Responsive Type Scale - Script Codes
Home Page Home
Developer Brent Jackson
Username jxnblk
Uploaded September 15, 2022
Rating 4
Size 2,693 Kb
Views 42,504
Do you need developer help for Responsive Type Scale?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Brent Jackson (jxnblk) Script Codes
Name
React 0.14 Template
Bootstrap Thumbnail Radio Group
Eat me
Basscss Column Offset
Absolute Grid
Fitter Happier Text
A Pen by Brent Jackson
Flex Object Grid with Fallback
Comparison of Roboto Draft vs Roboto
BASS
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!