CSS Snippet: ::first-letter

Textual design?

Text in design patterns doesn't seem to come up much on the web. I mean, sure it's talked about but it doesn't seem as exciting to talk about as perhaps CSS Grid or Flexbox etc. To me, this is a shame because we read text all the time, so it makes sense to try new ways of displaying text.

I was struck by some of Jen Simmons' talks on css and subsequently I went on a journey of discovery in css. And...I found out A LOT, but today I'm only going to quickly talk about styling first-letter. It's a good feature to try out since it has major support in browsers (about 97% at the time of writing this article).

First Letter Styling

Let's start with a basic sentence with no styling. (as seen below)

So how can we safely spice this up? Well, I suggest that we use ::first-letter (see below)

::first-letter 

The great thing with first letter is that we can easily change the element's first-letter's color and size (for example) without worring about browser compatibility since it is supported by 97% of browsers (about the same as browser support for flexbox). And as you can see below. The effect can drastically change the plain design into something much more eye-catching.

p::first-letter {
        color: tomato;
        font-size: 3rem;
      }

Whilst that might not seem life changing, it is something I think we should be experimenting with more often. I know I will be.

Okay, that's it from me today. I know it was super short, but I just wanted to share the knowledge about first-letter styling. The rest is up to you!