Learning Ukulele with Curt
Typography
LearningUkulele.comLearning Ukulele with Curt Site typography.
photo by Louis Martin
16 November 2025
NOTE (2025-26): Using AlpineJS for functionality. Have replaced or replacing Vue components with Alpine JS and Livewwire.
Site Development
  • Redis • If not running (see Redis Visits: *, below the Diceware )
  • Alpine.js • If not running (see Redis Visits: *, below the dice)
  • phpinfo • Should NOT work, run by hand.

Check the controllers of these test calls in this list before using. The might do something you don't want

Roles & Permissions

TailwindCSS

stripe

  • Stripe CheckoutUsing Laravel Spark for ALL Subscription managements (May 2021)
Site Layout & Components
<flux:text variant="strong"> Is this my espresso machine?
<flux:text variant="subtle"> Is this my espresso machine?
<flux:text defaults> We gotta burn the rain forest, dump toxic waste, pollute the air, and rip up the OZONE!
<flux:text defaults> This thing comes fully loaded. AM/FM radio, reclining bucket seats, and... power windows. You really think you can fly that thing? Did he just throw my cat out of the window?

<p> We gotta burn the rain forest, dump toxic waste, pollute the air, and rip up the OZONE!

<p> This thing comes fully loaded. AM/FM radio, reclining bucket seats, and... power windows. You really think you can fly that thing? Did he just throw my cat out of the window?

WIP: <ui.heading /> & <ui.subheading> < = > <flux:heading /> & <flux:text>.
<ui.heading /> & <ui.subheading>
Using <ui.heading size="3xl" /> & <ui.subheading>— No level creates a <div>
tailwindcss font sizes , <text-* go from xs [0.75rem (12px)] to 9xl [8rem (128px)] or any custom size.
flux:heading with size props
This Is a Heading
[flux:heading size="4xl" => text-5xl] • 'size="*"' creates a <div>
An Another Heading
[flux:heading size="3xl" => text-4xl] • 'size="*"' creates a <div>
Still Another Heading
[flux:heading size="2xl" => text-3xl] • 'size="*"' creates a <div>
Still More Headings
[flux:heading size="xl" => text-2xl] • 'size="*"' creates a <div>
Even... More Headings
[flux:heading size="lg" => text-xl] • 'size="*"' creates a <div>
Finally, The Last Heading
[DEFAULT: flux:heading size="base" => text-lg] • 'size="*"' creates a <div>
flux:heading with level props

Heading h1

[level="2" => h2] • 'level="2"' creates a <h1> tag

Heading h2

[level="2" => h2] • 'level="2"' creates a <h2> tag

Heading h3

[level="3" => h3] • 'level="3"' creates a <h3> tag

Heading h4

[level="4" => h4] • 'level="4"' creates a <h4> tag
h1...h6 tags

Heading

[h1: var(--text-5xl)]
Sub text/subheading right below h* tags. <flux:text>
They're using our own satellites against us. And the clock is ticking. So you two dig up, dig up dinosaurs? <flux:text>

They're using our own satellites against us. And the clock is ticking. So you two dig up, dig up dinosaurs? <flux:text>

Heading

[h2: var(--text-4xl)]
This thing comes fully loaded. AM/FM radio, reclining bucket seats, and... power windows. Do you have any idea how long it takes those cups to decompose.

Heading

[h3: var(--text-3xl)]
So you two dig up, dig up dinosaurs?
Trying NOT to use h5 or h6.

Heading

[h4: var(--text-4xl)]
Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should.
Heading
[h5: var(--text-xl)]
God help us, we're in the hands of engineers.
Heading
[h6: var(--text-lg)]
You know what? It is beets. I've crashed into a beet truck.
Standard Font Weights to tailwindcss v4 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;
WIP: <ui.heading /> & <ui.subheading> < = > <flux:heading /> & <flux:text>.
<ui.heading /> & <ui.subheading>
Using <ui.heading size="3xl" /> & <ui.subheading>— No level creates a <div>
tailwindcss font sizes , <text-* go from xs [0.75rem (12px)] to 9xl [8rem (128px)] or any custom size.
Heading
[size="4xl" => text-5xl] • 'size="*"' creates a <div>
Main Heading
[size="3xl" => text-4xl] • 'size="*"' creates a <div>
Section Heading
[size="2xl" => text-3xl] • 'size="*"' creates a <div>
subsection Heading
[size="xl" => text-2xl] • 'size="*"' creates a <div>
Minor Heading
[size="lg" => text-xl] • 'size="*"' creates a <div>
Heading
[DEFAULT: size="base" => text-lg] • 'size="*"' creates a <div>
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.
Main fonts Used Throughout the Site
2025h1..h6 — Using Oswald , a variable font family vs. Matthew Butterick fonts. (TODO: See if he has variable versions).
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. 2025/26 Update: This in Inter font. Not using Concourse at this time. As always check the source .css file for what are the latest fonts used in the site.

Headings and Body

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 Inter(font-concourse)

Sans (font-sans)

Serif (font-serif)

Slab (font-slab)

Script (font-script)

[.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.

Leading

[text-base leading-none] • Leading changed in tailwindcss v4 — Added the leading-none, leading-tight, leading-snug, leading-normal, leading-relaxed, and leading-loose utilities back in the leading.css to give an element a relative line-height based on its current font-size.

[text-sm leading-none] • Life finds a way. 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! You know what? It is beets. I've crashed into a beet truck. Hey, take a look at the earthlings. Goodbye!

[text-sm leading-none] • So you two dig up, dig up dinosaurs? Yes, Yes, without the oops! Jaguar shark! So tell me - does it really exist? You really think you can fly that thing? You're a very talented young man, with your own clever thoughts and ideas. Do you need a manager?

[text-sm leading-none]• Did he just throw my cat out of the window? Checkmate... Hey, you know how I'm, like, always trying to save the planet? Here's my chance. Checkmate... 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!

[text-sm leading-tight] • Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should. You're a very talented young man, with your own clever thoughts and ideas. Do you need a manager? God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs.

[text-sm leading-snug] • Must go faster... go, go, go, go, go! God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs. You're a very talented young man, with your own clever thoughts and ideas. Do you need a manager? Eventually, you do plan to have dinosaurs on your dinosaur tour, right? leading-none

[text-sm leading-normal] • You really think you can fly that thing? They're using our own satellites against us. And the clock is ticking. Eventually, you do plan to have dinosaurs on your dinosaur tour, right? 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! leading-tight

[text-sm leading-relaxed] • Just my luck, no ice. They're using our own satellites against us. And the clock is ticking. Did he just throw my cat out of the window? You're a very talented young man, with your own clever thoughts and ideas. Do you need a manager? Hey, you know how I'm, like, always trying to save the planet? Here's my chance. leading-snug

[text-sm leading-loose] • Do you have any idea how long it takes those cups to decompose. Hey, take a look at the earthlings. Goodbye! This thing comes fully loaded. AM/FM radio, reclining bucket seats, and... power windows. They're using our own satellites against us. And the clock is ticking. leading-normal

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 $$$ • NOT using on the site any mote. Have used or are using, in some of the Curt Sheller Publications books.
  • 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.
Lists
tailwindcss list class and LearningUkulele.com <ui.list> component.
The lists <li> part is handled in the 'list.css' file.
<ui.list> with defaults [ 'type' => 'disc', 'text' => 'sm', 'position' => 'outside', 'leading' => 'normal',]
The Flintstones
  • Fred Flintstone is the lovable, bumbling protagonist. With his signature orange tunic and blue tie, Fred spends his days working at the quarry and getting into wacky adventures with his best friend Barney Rubble.
  • Wilma Anna Flintstone is the beautiful and loving wife of Fred Flintstone.
  • Bernard Matthew Barney Rubble is the loyal and lovable best friend of Fred Flintstone, with a heart as big as his signature laugh. Despite being smaller in stature than his pal, Barney's quick wit and unwavering support make him an essential part of Bedrock's most famous duo.
  • Elizabeth Jean Betty is the charming, sassy, and loyal best friend of Wilma Flintstone. With her signature blue dress and short black hair, Betty often provides comedic relief to the show's antics while also being a supportive wife to Barney Rubble.
  • Pebbles Flintstone is the adorable and spunky daughter of Fred and Wilma.
  • Dino is a lovable and loyal pet dinosaur belonging to the Flintstone family.
  • Bamm-Bamm Rubble is a prehistoric toddler with superhuman strength that can easily lift heavy objects.
<ui.list> with defaults and overriding leading with leading="relaxed"
The Jetsons
  • George Jetson is the well-meaning but often bumbling head of the Jetson family. [text="base"]
  • Jane Jetsonis the stylish and intelligent matriarch of the family who manages their futuristic household with ease.
  • Judy Jetson is the teenage daughter who embodies the quintessential traits of a futuristic adolescent girl—fashionable, tech-savvy, and social.
  • Elroy Jetson is the youngest member of the family, known for his curiosity and intelligence far beyond his years. [text="sm"]
  • Rosie the Robot Maid is the Jetson family's loyal housekeeper who excels at managing household chores with efficiency and wit.
  • Astro is the lovable Great Dane-like dog who serves as both pet and companion to all members of the household but shares a particularly close bond with Elroy.
  • Mr. Spacely is George Jetson's boss and the owner of Spacely Space Sprockets, where he runs a tight ship with little tolerance for mistakes. [text="xs"]
  • Mr. Cogswell is the scheming owner of Cogswell Cogs and a fierce rival to Mr. Spacely’s business endeavors. Known for his cutthroat tactics, he frequently attempts to undermine Spacely Space Sprockets through underhanded means.
<ui.list> with defaults [ 'type' => 'disc', 'text' => 'sm', 'position' => 'outside', 'leading' => 'normal',]
  • Mr. Slate (known in earlier episodes as J.J. Granite or Mr. Rockhead) is Fred's boss at the Bedrock Quarrel and Gravel Company (later known as Slate Rock and Gravel Company) and a fictional character of the original series, The Flintstones and the rest of the franchise. [type="decimal"]
  • The Great Gazoo or simply Gazoo, is a fictional character from the animated series The Flintstones. He first appeared on the show on October 29, 1965. The Great Gazoo was voiced by actor Harvey Korman.
<ui.list> with defaults and overriding leading with leading="relaxed"
  • Loyal Order of Water Buffaloes (or simply the Water Buffaloes) is a very exclusive and men-only fraternal organization operating within Bedrock with a long and dedicated history in the Flintstones franchise. It serves as Fred and Barney's main club and hangout. [type="none"]
🚀 🚧 End of LearningUkulele.com Site Content 🚧 🌍
NOTE: PICS ARE FROM VARIOUS SOURCES. FAIR USE NOTICE:: This site contains images of which have not been pre-authorized. This material is made available for the purpose of analysis, teaching, comment and critique. The 'fair use' of such material is provided for under U.S. Copyright Law. In accordance with U.S. Code Title 17, Section 107, material on this site (along with credit and attributions to original sources) is viewable for educational and intellectual purposes - (frwebgate.access.gpo.gov). If you are interested in using any copyrighted material from this site for any reason that goes beyond 'fair use,' you must first obtain permission from the copyright owner.
art by Curt Sheller
On the web since 1992 and a Mac since 1987 (Mac II) • Serving up Ukulele content since 2003 ( 22 years ago )Lets Kanikapila!!! • And, since Sept 2020, happily on Pop!_OS Linux & COSMIC-DE and a System76 Thelio . Half the cost of the iMac and a real treat to use. I use it for ALL development work. Only wish the Affinity Suite of apps by serif where available on Linux (and I do know you can run them in Wine with a few hacks).
v20251117-0915.v4•L12.41.1 (PHP-8.2.23)
This sit has ben profesionaly red. awl tpyos aree free and no aditonal chrge • I'm blaming it on “jazz” fingers. “Aoccdrnig to rscheearch at Cmabrigde Uinervtisy, it deosn't mttaer in waht oredr the ltteers in a wrod are, the olny iprmoatnt tihng is taht the frist and lsat ltteer be at the rghit pclae. The rset can be a toatl mses and you can sitll raed it wouthit a porbelm. Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef, but the wrod as a wlohe.
Site developed, hand-coded, and maintained by Curt Sheller, Curt Sheller Publications , Pottstown, PA 19464 USA, North America, Northern Hemisphere, Earth, Solar System / Orion Arm of the Milky Way Galaxy, Virgo Supercluster, Laniakea Supercluster, Observable Universe ... and hosted on DigitalOcean , eCommerce using stripe , managed using Laravel Forge , and analytics (which we DO NOT share) by Plausible . See the LearningUkulele.com Site Credits page for credit to all the hardware, software, tools, and goodies we use to build this amazing site. A proverbial digital blob of music information.
Made with by Curt Sheller for LearningUkulele.com–Learning Ukulele with Curt and the ukulele community • © 1992 - 2026 Curt Sheller
Show your support!
Support LearningUkulele.com–Learning Ukulele with Curt development via a monthly membership or a one-time Forever membership! Learn more
Sign-Up Today …