Headings and Body [h1]
Headings and Body [h1]
My dad once told me, laugh and the world laughs with you, Cry, and I'll give you something to cry about you little bastard! I gave it a cold? I gave it a virus. A computer virus. Jaguar shark! So tell me - does it really exist? God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs.
Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists. Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists.
2025 — h1..h6 — Using Oswald variable font family.
2024 &> — h1..h6 — Used Hermes Maia font family from Matthew Butterick
Body <p> Font Comparisons.
Body text is using the default sizes and leading set for the site. Concourse would need different defaults.
This is a blockquote. Styles in [blockquote.css]. TODO: See if it is being used, other than right here in this page.
Open-Sans (wikiwand) · — for LearningUkulele.com, Open Sans is an open source humanist sans-serif typeface that was designed by Steve Matteson under commission from Google. It was released in 2011 and is based on his earlier design called Droid Sans, which was specifically created for Android mobile devices but with slight modifications to its width.
Concourse by MB Type — Concourse has a smaller x height. Open-Sans is better suited for the web. And, System76 uses it on their site. And, open-source. If used for LearningUkulele.com size needs to be text-lg and leading-snug. Concourse, is a nicer font. Will tweak the default to use it for the site sometime in the future.
Headings and Body
[h1 font-script] • Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists. So you two dig up, dig up dinosaurs? Just my luck, no ice.
Oswald (font-display & font-heading)
Concourse (font-concourse)
Sans (font-sans)
Serif (font-serif)
Slab (font-slab)
Script (font-script)
Heading 1
God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs. Eventually, you do plan to have dinosaurs on your dinosaur tour, right?
Heading 2
Do you have any idea how long it takes those cups to decompose.
Heading 3
My dad once told me, laugh and the world laughs with you, Cry, and I'll give you something to cry about you little bastard!
Heading 4
So tell me — does it really exist? Hey, you know how I'm, like, always trying to save the planet? Here's my chance.
Standard Font Weights to tailwindcss v3 classes
- .font-thin font-weight: 200;
- .font-extralight font-weight: 100;
- .font-light font-weight: 300;
- .font-normal font-weight: 400;
- .font-medium font-weight: 500;
- .font-semibold font-weight: 600;
- .font-bold font-weight: 700;
- .font-extrabold font-weight: 800;
- .font-black font-weight: 900;
[.font-sans] [ em, strong, bold, em] • Eventually, you (strong) -do plan to have (em)- dinosaurs on (b)-your dinosaur tour, right? Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists. You really think you can fly that thing? My dad once told me, laugh and the world laughs with you, Cry, and I'll give you something to cry about you little bastard!
[.font-serif] • God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs. Must go faster... go, go, go, go, go! Just my luck, no ice. Jaguar shark! So tell me - does it really exist? So you two dig up, dig up dinosaurs?
[.font-script] • The script font need to be a large site when used in relationship to the other fonts. Would be better for headlines.
[.font-mono] • I was part of something special. Hey, you know how I'm, like, always trying to save the planet? Here's my chance. Just my luck, no ice. You're a very talented young man, with your own clever thoughts and ideas. Do you need a manager? This thing comes fully loaded. AM/FM radio, reclining bucket seats, and... power windows.
Body, Font Styles & Weights
Body Default, .font-sans • Available font styles / weights (black) depending on the loaded font family. Not all font families contain all possible weights.

QUICKSTART Series: The books that started it all.
Body Serif, .font-serif default font-normal • Available font styles / weights depending on the loaded font family. Not all font families contain all possible weights.
Body Serif, .font-serif .font-light • Available font styles / weights depending on the loaded font family. Not all font families contain all possible weights.
Body Mono, .font-mono • Available font styles / weights depending on the loaded font family. Not all font families contain all possible weights.
Open-Sans
[.font-sans] • I was part of something special. Hey, you know how I'm, like, always trying to save the planet? Here's my chance. Just my luck, no ice. You're a very talented young man, with your own clever thoughts and ideas. Do you need a manager? This thing comes fully loaded. AM/FM radio, reclining bucket seats, and... power windows.
MBType Concourse
[.font-concourse] • I was part of something special. Hey, you know how I'm, like, always trying to save the planet? Here's my chance. Just my luck, no ice. You're a very talented young man, with your own clever thoughts and ideas. Do you need a manager? This thing comes fully loaded. AM/FM radio, reclining bucket seats, and... power windows.
Thin Headline 100
(font-thin) - AM/FM radio, reclining bucket seats, and... power windows.
- leading-snug
- Drive us out of here!
- Forget the fat lady!
- Do you need a manager?
- Eventually, you do plan to have dinosaurs on your dinosaur tour, right?
Yes, Yes, without the oops! Did he just throw my cat out of the window? I was part of something special. Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should. Yes, Yes, without the oops!
Extra Light Headline 200
(font-extra-light) - Must go faster. You know what? It is beets. I've crashed into a beet truck. Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should. This thing comes fully loaded. AM/FM radio, reclining bucket seats, and... power windows.
Light Headline 300
(font-light) - What do they got in there? King Kong? We gotta burn the rain forest, dump toxic waste, pollute the air, and rip up the OZONE! 'Cause maybe if we screw up this planet enough, they won't want it anymore! Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists.
Normal Headline 400
(font-normal) - You really think you can fly that thing? God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs. Remind me to thank John for a lovely weekend. They're using our own satellites against us. And the clock is ticking.
- AAB Form [dt]
- [dd] A song form another binary form showing an alternate sequence of two themes.
Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should. Hey, take a look at the earthlings. Goodbye! Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should.
Yes, Yes, without the oops! Did he just throw my cat out of the window? I was part of something special. Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should. Yes, Yes, without the oops!
Medium Headline 500
(font-medium) - You know what? It is beets. I've crashed into a beet truck. God help us, we're in the hands of engineers. God help us, we're in the hands of engineers. Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Jaguar shark! So tell me - does it really exist?
- leading-normal
- Etiam Ridiculus Inceptos
- Sem Magna Commodo
- Ipsum Vehicula
Jeffsum I was part of something special. Just my luck, no ice. We gotta burn the rain forest, dump toxic waste, pollute the air, and rip up the OZONE! 'Cause maybe if we screw up this planet enough, they won't want it anymore! So you two dig up, dig up dinosaurs?
Semibold Headline 600
(font-semibold) - Life finds a way. Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! You're a very talented young man, with your own clever thoughts and ideas. Do you need a manager? What do they got in there? King Kong? God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs.
- leading-none
- Cats & Dogs
- Welcome to Hollywood
- leading-snug
- Jurassic World
- The Lost World: Jurassic Park
Bold Headline 700
(font-bold) - You're obsessed with the fat lady! Drive us out of here!
- leading-none
- Jurassic World 3
- Peanuts in Space: Secrets of Apollo 10
- Independence Day
Extrabold Headline 800
(font-extrabold) - Hey, you know how I'm, like, always trying to save the planet? Here's my chance. Do you have any idea how long it takes those cups to decompose.
- leading-solid
- Shooting Elizabeth
- The Fly
Black Headline 900
(font-black) - My dad once told me, laugh and the world laughs with you, Cry, and I'll give you something to cry about you little bastard!
H1 Headline
Checkmate... Remind me to thank John for a lovely weekend. Do you have any idea how long it takes those cups to decompose. Life finds a way. Yes, Yes, without the oops!
H2 Headline
Life finds a way. Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! You're a very talented young man, with your own clever thoughts and ideas. Do you need a manager? What do they got in there? King Kong? God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs.
H3 Headline
You're a very talented young man, with your own clever thoughts and ideas. Do you need a manager? What do they got in there? King Kong? God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs.
H4 Headline
Life finds a way. Forget the fat lady! You're obsessed with the fat lady! Do you need a manager? What do they got in there? King Kong? God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs.
Trying to not use h5, h6
H5 Headline
Shouldn't really get to the H5 level.
Eventually, you do plan to have dinosaurs on your dinosaur tour, right? Is this my espresso machine? Wh-what is-h-how did you get my espresso machine?
H6 Headline
Really, really shouldn't get to the H6 level.
H2 Headline
Mainly H2..H4 for the brand's secondary color.
H3 Headline
You're a very talented young man, with your own clever thoughts and ideas. Do you need a manager? What do they got in there? King Kong? God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs.
H4 Headline
Life finds a way. Forget the fat lady! You're obsessed with the fat lady! Do you need a manager? What do they got in there? King Kong? God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs.
Leading
Use the leading-none, leading-tight, leading-snug, leading-normal, leading-relaxed, and leading-loose utilities to give an element a relative line-height based on its current font-size.
Use the leading-{size} utilities to give an element a fixed line-height, irrespective of the current font-size. These are useful when you need very precise control over an element's final size.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum. leading-none
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum. leading-tight
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum. leading-snug
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum. leading-normal
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum. leading-relaxed
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum. leading-loose
Fonts
Big fan of theses fonts and using throughout the site and for creating Curt Sheller Publications books, lesson, and the like.
Resources & Links
- MB Type, Fonts Deigned by Matthew Butterwick $$$
- Bunny Fonts • Bunny Fonts is an open-source, privacy-first web font platform designed to put privacy back into the internet. From bunny.net , next-generation CDN, Bunny Storage, and optimization service