
## Thanks, I hate it

In the first days of building [Craftwork](https://craftwork.com), I made the decision to use Tailwind CSS for our projects. This choice was driven by tailwind's adaptability, and its popularity among developers.

Here's the thing though: Tailwind and I don't really get along. I've spent years learning to create design systems with traditional CSS. More recently I found myself building products using full-blown UI libraries like Material UI and Chakra, because they make it _super_ fast to build a rich, functional, and accessible UI.

By contrast, Tailwind is somewhere in the middle of these two. On some level it bypasses the nuanced understanding and control that come with writing raw CSS. It's also not _fully_ functional out of the box like Material UI or Chakra - and yet... for so many reasons, it's _really_ good.

For us, Tailwind provides some huge benefits:

- **Speed**: Tailwind's utility-first approach allows us to quickly implement designs without having to write custom CSS. This is especially useful when we're iterating on designs and need to make changes quickly.
- **Universality**: At Craftwork, our stack includes Ruby on Rails, Next.js, and React-Native. Tailwind's flexibility allows us to use the same styling system across all these platforms, which is a huge win for us.
- **Talent**: Craftwork isn't just me, and it never will be. Tailwind's popularity across the industry has made it almost trivial to find developers who are familiar with it. This is a huge win for us as we grow our team.
- **UI Libraries**: Due to its popularity, there _are_ many UI libraries built around Tailwind, including: [TailwindUI](https://tailwindui.com), [ShadCN UI](https://ui.shadcn.com/), and [Aceternity UI](https://ui.aceternity.com/components). Costs to license each of these libraries vary (some are even free!), and they're essentially copy-pasteable components that you can use to build your products. Very cool.

## What this means for us in practice

Tailwind's adaptability is really what shines; from day one, it has enabled us to onboard new teammates, and build interfaces more rapidly. Its consistent utility across our entire stack means that regardless of the project, new team members can quickly read, understand, and contribute to our codebase. The decision to use Tailwind, therefore, wasn't just about adhering to current trends or sidestepping the complexities of CSS; it was a strategic move to ensure our team can hit the ground running, maintaining agility and coherence across our diverse projects.

This underscores a more important principle in tech selection: aligning tool choices with team dynamics and project requirements is a skill. It's a delicate balancing act -- weighing the benefits of technological efficiency and team scalability against the richness of personal expertise and the depth of traditional craftsmanship. It's a reminder that our growth as developers is not just about keeping up with the latest tools but also about valuing and honing our foundational skills.

Put another way, for everything we build, we have to balance velocity and quality. Tailwind is a tool that gives us wins in both columns.

## What I'd like to see change

All that being said, I do still have a wishlist for Tailwind:

1. **Better tooling**: Tailwind's approach to utility-first CSS is great for performance, but it also means we have to configure Tailwind to compile per-project, so that it only includes the styles we use. When this (infrequently) breaks, it can be difficult to detect, and debugging it isn't always straightforward.
2. **Better IDE support**: Tailwind provides a consistent language for styling our apps - there are plugins for VS Code's Intellisense that make it easier to write Tailwind classes, but it doesn't _always_ work. This can make it difficult to remember the exact class names for certain styles, and can slow down our development process.
3. **Prettier Prettier rules**: Adding tailwind classes to html means that we often have long lists of class names added to our html. This causes individual lines of code to be very long - despite what many engineers will tell you, this is [demonstrably worse for UX](https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/) than having class names listed on separate lines. There's [lots of discussion about building a prettier rule](https://github.com/tailwindlabs/tailwindcss/discussions?discussions_q=multiple+lines) for this, but as far as I've seen, there's not a great solution yet.

<Image
  publicId="newsletters/i-hate-tailwind-css-heres-why-i-use-it/horizontal-scan"
  alt="Screenshot of tailwind css code resulting in lots of long lines of code, causing horizontal scanning issues"
  caption="Like it or not, a horizontal list of classes is more taxing than a vertical list would be."
/>

So in the end, do I hate Tailwind? No, of course not. I've come to appreciate it for what it is: a pragmatic choice that has helped us build better products, faster. And that's something I can get behind.

**I'd love to hear from you**. What are your thoughts on Tailwind? Do you have any tips for using it more effectively? Is there a UI Library you love that I missed? Maybe you have a wishlist of your own? Let me know by replying to this email.

---

## What I'm thinking about this week: Watching experts work

### 🎶 A musical savant showcasing mastry

There's something extremely satisfying about watching someone who's really good at their job do their thing. I've been sharing this video of musical composer [Jacob Collier using Logic masterfully](https://www.youtube.com/watch?v=tVHyuhsAles) to compose a song in real time. There's such a beautiful confluence of skill, creativity, and deep understanding in this video.

The best creative tools make superusers shine, and I think that's something we should all strive for in our work.

### 🔌 Plug kinda nerdy, but he chill

I was pretty deep in the YouTube rabbit hole when I came across [@AllThingsOnePlace](https://www.youtube.com/watch?v=-JkUcrlDtZ0). This is an electrical engineer whose videos are all about analyzing and reviewing power supplies and other electrical components. I promise it is _way_ more interesting than it sounds. I had no idea that you could measure the _quality_ of power coming from a USB charger!

---

## More from me

### 🎙️ [Every business is an API business](https://apisyouwonthate.com/podcast/allan-knabe-apiable-api-portal/)

In my recent podcast interview with Allan Knabe from Apiable for APIs You Won't Hate, we dicussed how Apiable is building an API Portal service that helps API teams to create, secure, market, and monetize API products. Catch it on the [APIs You Won't Hate feed here](https://apisyouwonthate.com/podcast/allan-knabe-apiable-api-portal/)), or wherever you listen to your podcasts.

### 🎥 [I've been more active on YouTube](https://youtube.com/@mikebifulco?sub_confirmation=1)

Over the past month or so, I've gotten back into live coding on YouTube on the weekends. I've also got plans to start publishing more dev tutorials and startup content. If you're interested in that kind of thing, [subscribe to my channel](https://youtube.com/@mikebifulco?sub_confirmation=1) to stay up to date.

---

Hey, one more thing: make sure you [register to vote](https://vote.org). It's important. Like, deeply, existentially important.


I hate Tailwind CSS. Here's why I use it.

What I'm thinking about this week: Watching experts work

🎙️ [Every business is an API business](https://apisyouwonthate.com/podcast/allan-knabe-apiable-api-portal/)

🎥 [I've been more active on YouTube](https://youtube.com/@mikebifulco?sub_confirmation=1)


## A Quick Win with text-wrap: balance

Here's a ludicrously simple tip to make your website more readable: use the `text-wrap: balance` CSS property. It's one line of CSS, but it makes a noticeable difference in how text appears, especially for headings.

### Why Use text-wrap: balance?

When text breaks across multiple lines, it often creates uneven line lengths, which can feel awkward to read. The `text-wrap: balance` property ensures that text lines are balanced, creating a more visually pleasing and readable layout.

Take a look at these two versions of a heading:

**Before:**


### What is text-wrap: balance?

`text-wrap: balance` is a CSS property designed to improve the visual balance of text that spans multiple lines. By default, when a block of text wraps onto a new line, the lengths of those lines can vary significantly, creating uneven and sometimes awkward breaks.

With `text-wrap: balance`, the browser automatically adjusts the wrapping of text so that the lines are as close to equal length as possible. This makes the text easier to read, and looks great - particularly for headings, short paragraphs, and blockquotes.

### Key Points:
- **Purpose**: Ensures evenly distributed line lengths in multi-line text.
- **Use Case**: Best suited for headings, short paragraphs, or any text that benefits from visual balance.
- **Compatibility**: Works on most modern browsers and gracefully falls back to default text wrapping behavior where unsupported.

By enhancing the balance of text, this property helps to create a polished and professional design with minimal effort.

## See text-wrap: balance in action

Here's a quick side by side example of a heading before and after using `text-wrap: balance`:

<heading className="text-3xl font-bold text-purple-700">This is a heading that doesn't have the rule applied; text will break onto a new line unevenly</heading>

<br />

And by contrast -

<br />

<heading className="text-balance text-3xl font-bold text-purple-700">This is a heading that will feel nicely balanced if it spills onto a new line</heading>



(Note: you may need to resize your browser window to see the difference)




## How to use it: CSS

One little line of CSS does the trick:

```css
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}
```

## How to use it: Tailwind

Recent releases of Tailwind have built-in support for `text-wrap: balance`. You can start using it with the `text-wrap-balance` class.

```
<h1 class="text-wrap-balance">
  This is a heading taht will feel nicely balanced if it spills onto a new line
</h1>
```

### Browser Support
According to Can I Use, `text-wrap: balance` is supported by approximately 90% of browsers. While there are exceptions (e.g., IE11, Opera Mini, and some niche mobile browsers), the fallback is harmless: the text will wrap as it normally would without the property.

### Why It Matters
Legibility and readability are critical for user experience. There's even a psychological principle—the [Aesthetic Usability Effect](https://mikebifulco.com/newsletter/aesthetic-usability-effect) - that suggests people perceive more attractive designs as easier to use. Balancing your text lines is a subtle but effective way to make your site look polished and professional.


## Try It Today
Improving the look and feel of your site doesn't have to involve a complete overhaul. Small changes like text-wrap: balance can make a big difference. Add it to your site, and give your visitors a better reading experience—one balanced line at a time.



<details>
  <summary className="text-lg font-bold inline ml-4 cursor-pointer text-pink-600">
      Video Transcript
  </summary>

  [00:00:00] **Mike Bifulco:** Hey, what's up friends. This is Mike from tiny improvements. I have a ludicrously simple tip for you.

  [00:00:03] That's going to make your sites look better with one line of CSS. And I cannot believe how easy this is, which is why I'm making a video about it.


  Side by side Demo: Single post

  [00:00:10] **Mike Bifulco:** What we're looking at here is my website. I've made a change. That is exactly one line of CSS between this and the version you're about to see.

  [00:00:16] And I think the change is tremendous. Take a look at this.

  [00:00:21] Again, version one. Version two.

  [00:00:23] Version one. Version two. Version one. How to set up self healing, URLs, and next JS for better. SEO. Version two, how to set up self healing, URLs, and next JS for better SEO. I think that's a little more readable. Don't you?

  [00:00:38] Maybe he doesn't pronounce enough here. Let's look at a more detailed example.


  Side by Side example: Lots of posts

  [00:00:41] **Mike Bifulco:** this is my newsletter page, where I list off many newsletters that I've written in the past.


  Subscribe to 💌 Tiny Improvements

  [00:00:45] **Mike Bifulco:** If you're watching this and you don't subscribe already I would love it if you did. I write a weekly newsletter called tiny improvements with product tips for startup founders, product builders, and indie hackers, based on my experience, building startups in the past and currently building my startup Craftwork, which is a Y [00:01:00] Combinator backed startup.


  Looking at the change

  [00:01:00] **Mike Bifulco:** now let's take a look at this change here.

  [00:01:02] It's much more pronounced when you see it multiple times.

  [00:01:04] So, what we're looking at is CSS change that brings balance to text when it breaks across lines. And that is almost exactly what the change is. It is CSS, text balance.

  [00:01:14] If I pull this up on the Chrome for developers site, you can see from my pal, Adam Argyle, a super straight forward tutorial on what this thing looks like.

  [00:01:24] And the change is pretty easy to see when it's animated like this. Although it's a little hard to describe what's happening is the balanced version is trying to make the text break into lines that are roughly evenly sized.

  [00:01:33] So it has a lot more visual balance. It's a little easier to parse because your eyes and jumping from one line to the next isn't quite as far of a distance on the balanced version versus the unbalanced version. It also works with Arabic text, right to left left to right. It doesn't matter.

  [00:01:46] There are some limitations here.

  [00:01:48] This balance rule works on up to six lines, which means that if you apply it to everything, it won't work for long paragraphs, for example. But the nature of this rule really applies to headings. This is more or less the way that this should be applied [00:02:00] and I'll show you how I did it on my site.

  [00:02:01] Next.


  Implementation details in Next.js with Tailwind

  [00:02:01] **Mike Bifulco:** This is what you have to do to make this thing happen on your site, where you're implementing headings. You need to add a text balance rule to it. This has done with tailwind. So it's applying the text wrap, colon balance CSS property to my headings. And this component happens to apply to all the headings on my site. So it was super easy to do, but if you had to do it somewhere else, it would look something like this. Const balanced, heading. Equals. Return H one style equals there you go.

  [00:02:31] Tax rate balance. This would do it. If you need to do it, one-off for some reason, but you could also apply this to block quotes. Like the Google article explained. So const balanced block quote equals tax wrap balance, or in tailwind land, you could do. Class name equals text balance, not work just as well.

  [00:02:51] Matter of fact, let's go do this for the block quote on my site too.

  [00:02:53] I have this. Lovely block quote, component that I use to render block quotes on my site. And I think it's a reasonable thing [00:03:00] to add text balance here as well. So we're going to do that and that will improve the aesthetics of my site. That's super nice. It's very subtle. People may never notice that this happens, but it should make it so that when your title's going to a second line, the look that much nicer, pretty cool, right? I thought so.


  ## Can I use it yet though?

  [00:03:13] **Mike Bifulco:** Last thing I know what you're thinking. Is this something that I can actually use yet? Well, the good news is pretty much, yes. According to can I use this is used by almost 90% of browsers on the internet, which is fantastic. My apologies to people who use IE 11 opera mini UC browser for Android QQ, browser, Baidu browser, or Caio S browser.

  [00:03:32] You're going to have to wait a little bit longer to see nice titles on my site, but in the meanwhile, the fallbacks. All back scenario for this is that your text will rep as it used to, if you're using this rule. So I consider this relatively safe to use.

  [00:03:44] It's also already supported by tailwind, which is fantastic.

  [00:03:47] I think you should go add this to your site and give it a shot. Legibility and readability are really important for user experience. And there's this thing called the aesthetic usability effect that the better looking your site is the better looking your product is.

  [00:03:58] The more people will [00:04:00] inherently like it. It's a scientifically proven thing that, the better looking something is the more people put value in it.

  [00:04:05] So why not? I don't want line change like this.

  [00:04:07] That gets you some real wins for free.

  [00:04:09] All right.

  [00:04:09] That's a quick tip. I hope it's helpful for you until next time.

  [00:04:12] My name is Mike Bifulco. This is a tiny improvements. Give them hell out there.

  [00:04:15] ​



</details>


CSS Tips - text-wrap:balance will make your sites feel better


The [Orton Effect](https://www.capturelandscapes.com/orton-effect-explained/) is a photography technique that involves taking two pictures of the same scene, one with a long exposure and one with a shorter exposure, and then combining them. The result is an image that has both the sharpness of the long exposure and the detail of the shorter exposure. While it's not an exact replica, we can simulate a phoo filter for the Orton Effect using CSS and React.

## Emulating the Orton Effect in CSS

To emulate the Orton Effect in CSS, we need to layer 2 copies of the same image on top of one other. To accomplish that, we'll nest them under a single parent - in this case, the [`figure` element](https://developer.mozilla.org/en-US/docs/web/html/element/figure). Note that for the second image, we set [`aria-hidden=true`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden), and intentinally set `alt` to an empty string, so that Screen Readers and other visual assistive tools skip them. won't encounter the repeated image element. You can read more about that and other accessibility features of HTML on [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden).

```html
<figure class="orton-effect">
  <img
    src="https://source.unsplash.com/tRDGs9utMUo/1600x900"
    alt="A man in the crosswalk on a city street"
  />
  <img
    src="https://source.unsplash.com/tRDGs9utMUo/1600x900"
    aria-hidden="true"
    alt=""
  />
</figure>
```

Next, we'll use a CSS rule to apply some styles to the _first_ of the two images (in HTML-speak, that's the one on top).

```css
figure.orton-effect img:first-of-type {
  position: absolute;
  mix-blend-mode: lighten;
  filter: blur(50px);
  opacity: 50%;
}
```

We're setting `position: absolute;` to layer this image on top of its sibling within the `<figure>` element. The remaining 3 lines of CSS set the top image to use the `lighten` blend mode, apply a gaussian blur using `filter`, and make the top image partly translucent by way of the `opacity` CSS property.

This creates a hazy, glassy effect:

### Before:

<img
  src="https://res.cloudinary.com/mikebifulco-com/image/upload/v1662995195/posts/orton-effect-css-react/crosswalk.jpg"
  alt="A man in the crosswalk on a city street"
/>

### After:

<OrtonEffectImage
  src={
    'https://res.cloudinary.com/mikebifulco-com/image/upload/v1662995195/posts/orton-effect-css-react/crosswalk.jpg'
  }
  alt="A man in the crosswalk on a city street"
  blurRadius={50}
  opacity={50}
/>

It's subtle - but it is there, adding just a slight haze over the light parts of the photo, like a morning fog settling in over a dreamscape.

## The Orton Effect in React

To apply this to an adjustable React Component, we'll use CSS-in-JS to make blur and opacity dynamic. There's many ways to get this done, of course, so you may prefer a different approach. This is what a simple react component for this layout might look like:

```jsx
const OrtonEffectImage = ({ alt, blurRadius, opacity, src }) => {
  return (
    <figure>
      <img
        src={src}
        alt={alt}
        style={{
          mixBlendMode: 'lighten',
          filter: `blur(${blurRadius}px)`,
          opacity: `${opacity}%`,
          position: 'absolute',
        }}
      />
      <img src={src} ariaHidden alt="" />
    </figure>
  );
};
```

This gives us a reusable component that just needs a few parameters passed in - for example:

```jsx
<OrtonEffectImage
  src={
    'https://res.cloudinary.com/mikebifulco-com/image/upload/v1662995539/posts/orton-effect-css-react/snowy.jpg'
  }
  alt="A snowy landscape"
  blurRadius={30}
  opacity={70}
/>
```

Note that a few things have changed here - we're no longer using a named CSS class (`.orton-image`) to select and modify images via CSS. The CSS is now specified on the `img` tag itself, and because it is passed in via `style` prop, it is a JavaScript Object -- so keywords have gone from skewer-case to camelCase, and there's commas where we once had semicolons. Additionally, we're using ES6 String templates to interpolate style rules from the opacity and blur radiuses passed in.

There's some improvement to be done from here - you should do some error checking to make sure that opacity stays between 0 and 100%, and that the blur radius is a positive integer. It's also a good idea to provide some sensible fallback values for those options, in case they're not provided. I'll leave that up to you to implement.

## The Orton Effect in Action

Below you will see the Orton Effect applied to a handful of other images from Unsplash.

I've taken the above example a little further, and made blur and opacity adjustable, so that you can see how each parameter changes the image effect.

I've found that an opacity of somewhere between 25 and 50% and tends to create a nice, subtle effect. The "right" blur radius is a bit more dependent on the specific image.

<OrtonEffectImage
  src={
    'https://res.cloudinary.com/mikebifulco-com/image/upload/v1662995539/posts/orton-effect-css-react/snowy.jpg'
  }
  alt="A snowy landscape"
  blurRadius={30}
  opacity={70}
  showControls
/>

<OrtonEffectImage
  src={
    'https://res.cloudinary.com/mikebifulco-com/image/upload/v1662995644/posts/orton-effect-css-react/cafe.jpg'
  }
  alt="A scene at a local cafe"
  blurRadius={30}
  opacity={70}
  showControls
/>

<OrtonEffectImage
  src={
    'https://res.cloudinary.com/mikebifulco-com/image/upload/v1662995728/posts/orton-effect-css-react/pond.jpg'
  }
  alt="A pond with sunlight filtering through autumn leaves overhead"
  blurRadius={30}
  opacity={70}
  showControls
/>

## Summary

The Orton effect is a photography technique that involves taking two images - one in focus and one out of focus - and overlaying them to create a third image with a dreamy, ethereal quality.

It turns out that this effect can also be simulated using CSS and React! All you need is a bit of code to overlay two images and some CSS to blur one of the images.

If you're looking to add a touch of magic to your photos, then recreating the Orton effect with CSS and React is a great way to do it.

If you found this post useful, I'd love it if you'd consider subscribing to [my newsletter, Tiny Improvements](https://mikebifulco.com/newsletter) - I share articles and resources that catch my attention, as well as my perspective on tech news, designing products, and living a fulfilling life.


The Orton Effect - dreamy photo effect in CSS and React


import CenteredTextDemo from '../../components/demos/CenteredTextDemo';

<Aside type="note">

This is an experimental post, meant to demonstrate to you the topic we're discussing. I'd love to hear what you think about it. [Drop me a line](https://twitter.com/irreverentmike) if you find this compelling - I'm hoping to create more like it!

</Aside>

<CenteredTextDemo>

This is -- without exception -- my biggest design-related pet peeve. You've probably come across it yourself from time to time, and if you're lucky, it's not something you noticed. Centering text on a web site, email, or flyer is an easy way to make it appear like a designer's spin has been put on a document. It's an easy change to make in most editors, and in many cases it's probably done without a second thought.

I'll cut to the chase: _center-aligning text is really bad_ in most cases. From a young age, we're trained to read text by starting at the beginning of the line and moving our eyes across the page to the end of the line. From there, it's a relatively low-effort thing to move your eyes back to the beginning of the next line. That all changes when text is centered, since the start of each line is aligned inconsistently. It takes more effort to find the beginning of the next line, to make sure you've only moved down _one_ line, and to continue reading.

## Three great reasons you shouldn't center-align text:

1. A ragged leading-edge makes it harder to move your eyes to the next line of text
2. People with dyslexia may find centered text challenging to read.
3. Lists (like this one) become disorienting to read, and harder to scan

The British Dyslexia Association provides a <a href="https://www.bdadyslexia.org.uk/advice/employers/creating-a-dyslexia-friendly-workplace/dyslexia-friendly-style-guide" target="_blank">dyslexia-friendly style guide</a>, which calls out a simple rule for text:

<Aside type="note">Left align text, without justification.</Aside>

As a designer, this is _such_ an easy win. As a developer, it's often as easy as:

```css
/* change this */
.some-style-rule {
  text-align: center;
}

/* ...to this! */
.some-style-rule {
  text-align: initial;
}
```

## When you _can_ use centered-text

Generally speaking, if you're certain that your text will fit on _one line,_ it may be okay to center it. This generally applies to page titles, captions on pictures, and things of that nature. Even then, generally speaking my guidance is to avoid it. Like many other things in design, if there's not a good reason _to_ do it... you're better without.

## Summary

If you're working on a design that relies on centered text, consider other options. If you come across a big blob of centered text in your workplace, or out in the world somewhere, please feel free to use this post as a demo.

</CenteredTextDemo>


Don't center align paragraph text

Three great reasons you shouldn't center-align text:


I often joke that to learn about design is to doom yourself to be lightly annoyed by everything. After some repetition, you'll start to internalize some of the basic rules of industrial design, or print design, or fashion design, or mechanical design, or whatever it is that gets you excited. You'll start to find design quirks in the world which were once hidden to you. After all, every single thing in the built environment has been put there by someone who took their time to bring it to life. The downside, of course, is that you'll also start to see designs that downright suck. I find that it's helpful to think of it as finding opportunity for improvement.

Today's opportunity for improvement is brought to you by [Wikipedia](https://en.wikipedia.org/wiki/Ralph_Waldo_Emerson), which had me going cross-eyed as I read through an article in the early hours of this morning.

<Image
  publicId="posts/all-about-ch/wikipedia-4k"
  alt="Screenshot of a wikipedia article on a wide monitor. Text spans fully from left to right, taking up the full width of available space."
  caption="A fullscreen desktop view of wikipedia on my 4k monitor."
/>

## What is a ch, and why you should c(h)are

It's simple, actually - ch is a CSS unit which represents the width of a character! If you're using a proportional font (where not all characters are the same width), 1ch is the width of the 0 character in the typeface you're using. This is particularly helpful for usability as it relates to reading long passages of text.

## Line length and reading usability - err, readability

Limiting the line width for text in long passages is a great tool for making things more readable. [Studies have shown](https://baymard.com/blog/line-length-readability) that for optimal reading, text should be limited to somewhere around 60 characters per line. Think about it - this is why paperback books are generally smaller than an A4 page. This is why people love reading on their kindle. This is why Barnes and Noble sells Nooks like hotca — well, it's why the Nook is shaped like it is, at least.

In practice, what does this look like? Let's take that same wikipedia article and limit its paragraphs to 60 characters:

```css
p {
  max-width: 60ch;
}
```


Here's what it looks like:

<Image 
  publicId="posts/all-about-ch/wikipedia-ch-applied"
  alt="The same wikipedia article with a limit set on p max-width for ch yields a page that is much easier to consume visually, and is more readable."
  caption="Column width adjusted using the CSS ch unit."
/>

Okay, so that's not a fully-baked design update, but with a few tweaks we can make it a little nicer by bumping up the font size, and adjusting the layout of the right-hand column (side note: wikipedia uses float: right on that column, surprisingly!)

<Image 
  publicId="posts/all-about-ch/wikipedia-ch-adjusted"
  alt="With a few additional layout tweaks, the page can be reflowed around the ch-limited paragraphs, making the entire article more coherent and easier to read."
  caption="Font size bumped up, and right-hand column adjusted to snap in place next to it.  Much easier to read!"
/>

That's not bad at all! One of the nice things about using a character **count** for setting the width of that section is that it scales nicely for folks who use the browser's zoom functionality. You can also put your text passages inside of pixel-size-limited divs to make them work in responsive layouts at smaller sizes:

```html
<style>
  @media screen and (min-width: 800px) {
    .blogpost {
      max-width: 400px;
    }
  }
  .blogpost p {
    max-width: 60ch;
  }
</style>

<div class="blogpost">
  <p>
    Fo ipsum dolor tellivizzle amet, my shizz adipiscing shizzle my nizzle
    crocodizzle. Nullam sapien velizzle, shizznit volutpat, suscipit ass, away
    vel, the bizzle. Dizzle fo shizzle tortizzle. Sizzle erizzle. Fusce izzle
    dolizzle dapibus fizzle tempus dope. Maurizzle pellentesque hizzle et
    turpis. Shiznit check out this fo shizzle. Pellentesque eleifend rhoncizzle
    shiznit. In hac habitasse platea dictumst. Donec dapibizzle. Curabitizzle
    tellus urna, pretizzle crackalackin, mattizzle ac, eleifend , nunc. Nizzle
    suscipizzle. Integizzle rizzle you son of a bizzle sizzle mofo.
  </p>
  <p>
    Dizzle ut dolizzle. Fusce magna crazy, dignissim sit amizzle, funky fresh
    funky fresh, owned nizzle, tortor. Maecenas a nisi. Tellivizzle ghetto neque
    izzle get down get down. Shut the shizzle up stuff. Cras aliquet tristique
    turpizzle. Suspendisse gizzle ultricizzle dope. Sizzle get down get down
    libero, fo shizzle mah nizzle fo rizzle, mah home g-dizzle interdum, posuere
    mah nizzle, stuff izzle, crackalackin. Da bomb mofo tellizzle. Boom
    shackalack aliquizzle gangster sizzle amet dolor. For sure dapibizzle sheezy
    id mah nizzle. Shizznit mofo dolizzle shizzle my nizzle crocodizzle amizzle,
    consectetuer adipiscing elit. Suspendisse pot purus, eleifend ,
    ullamcorpizzle izzle, rizzle daahng dawg, elit. Nizzle porta rutrum nunc.
  </p>
</div>
```

I dropped this stuff in a [codepen](https://codepen.io/mbifulco/pen/rgxryB) if you'd like to play around with it. You'll see a green background when the media query activates.

_Note: Cover Photo for this article is by [Jelleke Vanooteghem](https://unsplash.com/photos/2OCh8tuNsBo?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/). Thank you for your work!_

CSS talk: you should really know about the ch unit

Line length and reading usability - err, readability

#css: 5 posts tagged

I hate Tailwind CSS. Here's why I use it.