HTML meta-prose for styling CSS

• Published: 2024-02-04 15:54

Welcome to this chunk of HTML meta-prose. It exists for the mere purpose of styling and testing elements in a sensible form and setting. Using content I actually dare to read. Instead of lorem ipsum. And HTML elements that are easily overlooked.

Because I prioritize legibility and accessibility over ‘pretty’. And strongly support this as a UX-dude. Then again, this wouldn’t exist if I didn’t like pretty. I 💖 beautiful typography. A well executed baseline grid makes my heart skip a beat.

Have this 2^nd level heading

Re—baseline grids and typographic vertical rhythm: is above heading aligned in a way that makes it obvious where it belongs to? Or does it lazily sit dead-center this and the prior paragraph? And what does a longer paragraph look like? Does it get blurry after a while because the line-height wasn’t set with longer paragraphs in mind? Do font-weight, color and contrast encourage reading? How much does the font rendering deviate between operating systems? How does the font embedding interfere with this? Last, but not least: Does this paragraph span across the entire screen? 😵‍💫

And am I asking too many questions?

A 3^rd level heading might be useful

Imho, h3’s should still be weighted and positioned in a way making them clearly differentiable from a bold line of text. To prevent readers from guessing. Anyway, I guess I dispensed enough thoughts about this. Let’s get evil with nested lists in the context of vertical rhythm & legibility!

1. I like using nested lists to
   1. Explore and structure causality whilst writing
   2. Identify and disentangle dependencies and meta-knots
   3. Convey the result of that exploration in the same structured manner
      1. Using the very list I produced along the way
         1. Smells like a triple win to me!
   4. Highlight some points about the
      1. Challenge of maintaining legibility in nested lists (let’s keep writing so we can check if the next list entry can easily be differentiated from this one)
         1. AND retentively sticking to a baseline grid
      2. Design-quality of CSS frameworks, website builders, themes…
         1. Because they often don’t tweak nested lists at all
      3. Subpar w3c typography defaults
         1. That all browsers build upon
            1. Causing an absurd waste of human, financial and fossile resources:
               1. Designers spend a lot of time designing and maintaining frameworks
                  1. Which get hosted somewhere
                  2. Developers need to invest a lot of time:
                     1. Researching and learning how to use bespoke frameworks
               2. Users drain their batteries by reading text
      4. About the importance of treating typographic details like line-height of individual elements with the respect they deserve
2. Arrive at unexpected conclusions? 🤷

Here’s a paragraph for testing.

What if this h3 was meaningful? And...

...how much time and energy could sensible w3c browser standards conserve? Well, I exceeded my train of thought for now :) I get it: writing sensible, yet general purpose dummy content is stupid. And understand the appeal of using eg ChatGPT for this. At the same time, I appreciate using hand-made things.