The Best Brine Blog CSS for Typography Design

Line Length

The most underused simple css for your css blog.

Ok, let’s talk. I’m a graphic designer, not to be a snob, but I also made it through my MFA in Graphic Design, and I can tell you that getting a terminal degree in a subject totally fucks with your brain on that subject matter. You know it inside and out, it’s why your graphic designer friends who have gone through art school in some form are great at taking criticism (actually I can tell you Architecture school was harder in that respect), but we also are trained to see things in these day to day items.

So I live my life on the web, I’m an online freelancer, we get five feet from our computers and we get a rash. More on trying to combat that this year (we all try and say “balance” blah, but most of us can’t really create that). So what makes me itch on the web? Line length issues. GOD DAMN LINE LENGTH ISSUES.

So this was originally in one of our monthly SSDG courses back from way back when - when our courses were monthly content for members. This is the key to the Brine template blog posts.

Let’s look at normal page width settings for designers (DIY-ers typically yours are 20-30% wider than ours are - so take note here ;))  

Here are some stats from:

Comparing a sampling of the maximum column widths to the widest common screen (1920px) showed me:

  • 1000px max width is 52% of the screen width, and almost all users will reach the "€œmax-width"€ breakpoint, making visible white space along the left and right of their screen.

  • 1200px max width is 62.5% of the screen width, and overall most users will reach the "€œmax-width"€ breakpoint.

  • 1400px max width is 73% of the screen width, and ~84% of overall users will never reach the "max-width"€ breakpoint.

  • 1600px max width is 83% of the screen width, and over 90% of overall users never reach the "€œmax-width"€ breakpoint.

So what does that mean? It means stick to 1050-1300ish for your content width for your site designs for size widths today. That can obviously be fudged and changed for certain types of design. BUT BLOGS, there are so many issues surrounding blog design. The main issue is that even if you keep your pixel width to normal width, you will end up with huge issues. Mainly line-length. So now let’s look at what graphic designers consider best line length for the web.

Specifics for line-length:

What does that nonsense mean? It means your eye is going to process and read a line of text that is about 50-75 (this is a wide range based on multiple sources) characters in length —> 10-12 words in length at max, and anything under five or six words or under 50 characters, starts to break the text up. It’s why textbooks are so big and wide but are multiple columns of text. It’s why chic lit and quick read mystery novels are set to smaller books with bigger type because you binge read those things and want to read them FAST. If you want your audience to digest the info fast you have to optimize your text.

So now you are mad at me, sorry. I know you still haven’t gotten to the main freaking part of this article. But I’m sorry I paid tons of money for my MFA and I will pay for it for the rest of my life (hi student loans - totally worth it) so I have to give you the technical details.

If you have a blog without a sidebar, start counting those words. Let’s also discuss this a bit further. Web design today gets away with more rule breaks for this than anything else. Because we want to keep our columns wide enough to incorporate great headers, good images, we tend to fudge it as designers here. For example, this blog is approx. 16+ words per line - too many in most books. But what we are talking about isn’t when we count sixteen words per line, we are looking at when the line length is 1000px wide, and a 16px count text you end up with 24+. For maximum legibility, get as close to the line length as possible for word count. Up your body copy font for your blog post (use the second to last option for CSS below) mixed with the restriction of the blog content width, the main CSS below, and you will find a happy medium. We can discuss font-size and x-height issues I have with body copy on blogs another time, for now, try this…

You implement this first:

  1. .BlogItem { max-width:750px; margin: 0 auto; } 

This is the little magic css class in my point of view… because it leads to SO much more.

.BlogItem h2 { color: red}

.BlogItem h3 strong {
font-size: 10px;
text-transform: uppercase; 
letter-spacing: .012em;}

.BlogItem p {font-size:17px}

.BlogItem .sqs-block-horizontalrule hr {
    opacity: .3;
    height: 2px;
    background-color: #c5b9ad;

You see where I am going? It’s the class that allows you to take blog content ALONE and make it work for you. I don’t think there is a blog where this has gone as an untouched blog in my Brine career.

Want more of these kick-ass blog edits? We have a lot more blog edits coming soon, including a mini workshop you will all want for your blogs :)