Improve the readability of the content on your website

Categories

Learning how to make long-form content, like blog posts, read well is a valuable and transferable design skill to learn. In this tutorial, we’re looking at how CSS gives us all the tools we need to achieve this, as a compliment to semantic HTML.


Making an article—especially a long, technical article—readable isn’t very easy. This is especially the case if you’re not a designer. Learning how to get the basics right will have a huge impact on reader’s experience of your content.

In this tutorial, I’m going to use this existing blog post as the context and step-by-step, I’ll show you how I approach making content look great. Together, we’ll take a plain HTML article and turn it into something that’s a joy to read.

See what we’re making

Getting started permalink

For this tutorial, you’re only going to need two files—some HTML and CSS:

  • index.html
  • global.css

Go ahead and create those in a folder on your machine, or use this CodePen project template.

Base HTML and content permalink

The HTML for this project is pretty self explanatory—it’s an article of content, featuring various HTML elements—so first up, grab the whole of the following snippet of HTML and paste it in your index.html file. It’s a really long HTML snippet, so go ahead and expand it first.

Expand HTML
Code language
HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Improving readability demo</title>
    <link
      rel="canonical"
      href="https://piccalil.li/blog/tips-and-notes-about-freelancing"
    />
    <link rel="stylesheet" href="https://unpkg.com/modern-css-reset/dist/reset.min.css" />
    <link rel="stylesheet" href="global.css" />
  </head>
  <body>
    <article class="[ post ] [ flow ]">
      <h1>Tips and notes about freelancing</h1>
      <time datetime="2020-07-31" class="text-500 gap-right-300 color-secondary"
        ><em>31st July, 2020</em></time
      >
      <p>
        It’s rolling onto 2 years since I went back independent and fully freelance, but
        over the 11+ years I’ve been working in design and the web, I’ve probably done
        around half of that as a freelancer in some capacity.
      </p>
      <p>
        Lots of people are experiencing either redundancies or work issues at the moment
        and although, at the time of writing, we are in a global pandemic: now is a great
        time to go freelance.
      </p>
      <p>
        In this article, I’m going to share with you some tips that have helped me make a
        success out of this freelancing stuff. I hope by the end that you will feel more
        confident about going freelance. I must point out that the advice is mainly
        centered around working with clients, rather than say, doing contract development
        work, but hopefully you’ll get some benefit if that’s you. Let’s dig in.
      </p>
      <h2 id="heading-freedom">Freedom</h2>
      <p>
        The “F” in Freelance stands for “Freedom”. It doesn’t really, but freedom is
        exactly what you get when you go freelance. This freedom for me has enabled two
        key things: ownership of my time and flexibility to diversify what I do.
      </p>
      <p>
        I went back to freelancing in September 2018 after being made redundant from an
        agency. For at least 12 months after that, I worked in a similar role, as a
        freelancer: working only with clients and contracting for other agencies, along
        with a brief stint of guest-lecturing at the local University. Although the work
        was mostly the same—I even inherited a client from my old job—I worked a lot less
        per week. This is because I didn’t work a “normal” 9-5, but instead worked 10-4
        (roughly). Those hours certainly add up.
      </p>
      <p>
        Because the work was quite steady, I didn’t need to do much admin and business
        development stuff, either. This is a very valid way of going about freelance and I
        think it could appeal to someone who is comfortable working almost like they have
        a day job. The reason you work a lot less time like this as a freelancer is
        simple: no company bullshit. You are the boss of your own time and I promise you:
        you will make so much more of the time you do spend working.
      </p>
      <p>
        Back to flexibility again, because being freelance gives you <em>lots</em> of
        that. Although I started working like the above, I knew I wasn’t going to be happy
        doing just client work alone. I’ve done agency stuff for so many years now that
        frankly, even the best client work doesn’t give me much satisfaction. I decided at
        the end of last year that now was the time to build an education business instead
        and that’s where <a href="//piccalil.li">Piccalilli</a>, the site you are on was
        born.
      </p>
      <p>
        The reason I mention this in a section about flexibility is because I’m very much
        transitioning into this new world. I still work for clients, but a lot less so, so
        I can build Piccalilli up. Granted, I’ve worked a hell of a lot more this year
        than last year, but the hope is by next year, I can work
        <strong>even less</strong> than a typical 10-4 day, thanks to the work I’m doing
        now.
      </p>
      <p>
        This transition model works well too because client work pays the bills and it
        takes the pressure off getting lots of revenue from a business. I’m very lucky
        that Piccalilli is doing much better than anticipated, so I’m speeding up that
        transition. Because I have the flexibility as a freelancer, that is possible too.
        The key is that flexibility completely empowers you to work how
        <strong>you want to work</strong>.
      </p>
      <h2 id="heading-get-comfortable-with-money">Get comfortable with money</h2>
      <p>
        There’s two parts to focus on here: being comfortable talking about money and
        being comfortable with your personal finances.
      </p>
      <p>
        I’ll start with talking about money. You <strong>have</strong> to be comfortable
        talking about money with clients. In fact, when a new enquiry lands in my inbox,
        <strong>the first thing I do is ask them what their budget is</strong>.
      </p>
      <p>
        So much time is wasted by being coy about money. A client needs to have a budget
        to hire you and let me tell you, if they refuse to tell you what that budget is,
        <strong>that’s a massive red flag</strong>. That refusal could be down to mistrust
        on their end, though—they might think you’ll use that budget to send them an
        over-inflated quote. I’d tackle that by saying something like this:
      </p>
      <blockquote>
        <p>
          “In order to work out what we can achieve on this project, we really need an
          idea of budget. It could just be a ballpark, like £5-10k. Creating an estimate
          for you without this knowledge of our limitations would be a futile exercise
          because I have no idea what the limits of this engagement are.”
        </p>
      </blockquote>
      <p>
        The second part on this section is your own finances.
        <strong
          >You need to know exactly how much money you need to survive every month</strong
        >. I have a spreadsheet that tells me how much money to take out of my business
        with a combination of fixed and variable costs. This helps me firstly not get
        stung by the tax office and secondly, informs me of how much I need to earn to
        survive each month.
      </p>
      <p>
        An easy strategy to start with is try to earn your
        <strong>current full-time salary</strong>—especially if you are a sole trader
        (we’ll get to that). It’s a solid toe-dip approach into freelance.
      </p>
      <p>
        Moving on from that approach: try to <strong>double your salary</strong>. This is
        because building up a buffer will make life a <em>lot</em> easier on a number of
        fronts. Firstly, it’s “get fucked” money. What I mean by that is if a client turns
        out to be a nightmare, you can tell them to get fucked, knowing that you have a
        buffer to support you. This is useful for if your client turns out to be doing
        very unethical worth, like
        <a
          href="https://www.vox.com/recode/2019/7/30/20728147/tech-company-ice-contracts-foia-microsoft-palantir-concur-dell"
          >working with ICE</a
        >, for example. That empowerment is everything.
      </p>
      <p>
        This leads nicely in to calculating how much you charge for your work. The first
        point on this is <strong>never work for free</strong>. If a client demands free
        spec work, bin them off and focus on other new clients instead.
      </p>
      <p>
        I personally charge in 2 week sprints, usually, unless a project is very short,
        where I will charge a flat rate. For contracting work—say for an agency—only then
        will I charge a day rate. Sprints and day rate work normally requires a
        <strong>minimum commitment</strong> from them. Flat rate requires at least 50%
        up-front, which we’ll get more into later.
      </p>
      <p>
        My day rate is <strong>much higher</strong> than my sprint rate. This is because
        day rate work tends to come with more risk, so I account for that by charging more
        money. It also reduces my ability to schedule efficiently, because this sort of
        work can drag on much longer than anticipated, so again, the client is going to
        pay for that disruption.
      </p>
      <p>
        In terms of how much to charge: this comes down to knowing how much you need. Get
        your monthly outgoings spreadsheet, take the total and <strong>triple it</strong>.
        “Why the hell?!?”, they scream. We triple it because there’s a darn good chance
        you will experience <strong>very quiet spells</strong>, so charging a lot more for
        your work when you have it builds up your buffer to get you through these times.
        You get more ammo to tell awful clients to fuck off, and getting to that goal of
        doubling your full-time salary gets easier.
      </p>
      <h2 id="heading-get-good-at-organising-your-time">
        Get good at organising your time
      </h2>
      <p>
        Those who know me well, know that I organise everything to within an inch of its
        life. I do all of this organising in
        <a href="https://www.notion.so">Notion</a> and
        <a href="https://apps.apple.com/gb/app/things-3/id904237743">Things</a>. Notion is
        the main hub of planning, scheduling and client communications (yep, you read that
        right). Things is what I use to manage my tasks. I did previously do this in
        Notion and before that, in a bullet journal, but now, Notion is the main bullet
        journal and Things does its job well for me.
      </p>
      <p></p>
      <figure>
        <img
          src="https://piccalilli.imgix.net/images/blog/freelance/freelance-1.jpg?format=auto&amp;q=60&amp;w=1500"
          alt="My things app with a list of today’s tasks"
          loading="lazy"
        />
        <figcaption class="measure-medium text-400">
          <p>
            I prioritise my tasks with 🚨 P1 and 🔥 P2, with the rest being optional for
            the day.
          </p>
        </figcaption>
      </figure>
      <p></p>
      <p>
        I’m not going to tell you how to plan and organise in this post. Maybe I will go
        into more detail if there’s an appetite for it, but the main theme is however you
        want to do it, just do it. Being disorganised, when you are your own boss will
        surely be a disaster and even having a notepad with a todo list on it is better
        than nothing.
      </p>
      <p>
        I strongly recommend that you schedule what you are working on each day in
        advance. I’d still give yourself a bit of flexibility because you might not be in
        the mood to say, do some creative work once you wake up, but planning time in
        advance is really helpful not just to keep track of where your projects are, but
        also where your next availability is, which segues us nicely to the next section.
      </p>
      <p></p>
      <figure>
        <img
          src="https://piccalilli.imgix.net/images/blog/freelance/freelance-2.jpg?format=auto&amp;q=60&amp;w=1500"
          alt="My weekly schedule in Notion, broken into time blocks"
          loading="lazy"
        />
        <figcaption class="measure-medium text-400">
          <p>
            I break the morning and afternoon into 3 slots then book my time around those.
          </p>
        </figcaption>
      </figure>
      <p></p>
      <p></p>
      <figure>
        <img
          src="https://piccalilli.imgix.net/images/blog/freelance/freelance-3.jpg?format=auto&amp;q=60&amp;w=1500"
          alt="My roadmap in Notion which is like a kanban for the whole year"
          loading="lazy"
        />
        <figcaption class="measure-medium text-400">
          <p>
            Roadmapping your time like this is super helpful to get an idea of what’s
            coming up and where you can squeeze clients in.
          </p>
        </figcaption>
      </figure>
      <p></p>
      <h2 id="heading-don't-wait-to-find-work">Don’t wait to find work</h2>
      <p>
        Now that you are super organised, you’ll know on your schedule where the gaps are.
        Don’t wait to fill them: start putting feelers out for projects immediately.
      </p>
      <p>
        If I see a gap that I want to fill come up, I send out a tweet along the lines of
        this:
      </p>
      <blockquote>
        <p>
          I’ve got a bit of availability coming up, so if you need some design or
          front-end development work, give me a shout and we’ll get it booked in!
        </p>
      </blockquote>
      <p>
        I keep the timing vague because all I’m doing here is gathering a couple of leads.
        The tweets will often lead to nothing, but it does plant the idea that you have
        availability in people’s heads. If someone knows of work coming up a month later,
        they might think: “Oh, I saw Andy had availability coming up. I should recommend
        them”.
      </p>
      <p>
        Being organised with this stuff gives you flexibility for this sort of chance
        recommendation to happen. If you wait right until the last minute to land work,
        there’s a good chance that your tweet/instagram/mailshot will land nothing and you
        will go into panic mode (unless you have a large buffer). This is often when
        you’ll snatch at a project and land a nightmare client.
      </p>
      <p>
        I won’t tell you where to find work because that varies a lot, but my advice is to
        network in your industry and get to know people. Building a reputation is so
        important because people will recommend you to potential new clients if you’re a
        pleasure to work with and do a good job. I get most of my client work via a
        recommendation from someone else now.
      </p>
      <p>
        That doesn’t fix the problem of how to land that first project, though. I think
        for that, tweeting that you’re going freelance (I’ll always RT if you send me the
        tweet) and alerting people in your network will probably get you that first
        freelance job.
      </p>
      <h2 id="heading-contracts-insurance-and-deposits">
        Contracts, insurance and deposits
      </h2>
      <p>
        Contracts and insurance are so important. Insurance especially so if you’re not
        going to incorporate as a company (still get insurance if you do). I have
        insurance with <a href="https://withjack.co.uk">With Jack</a>, who are fantastic.
        Basically, if I mess up, I won’t get ruined because I have insurance. If you are
        writing code for clients, <strong>please insure yourself</strong>, because at some
        point, you probably will mess up.
      </p>
      <p>
        Contracts achieve two things in my experience. They build trust between client and
        vendor (that's you). A contract could be really simple, like
        <a href="https://stuffandnonsense.co.uk/projects/contract-killer"
          >Andy Clarke’s Contract Killer</a
        >. I would recommend getting something a bit more bulletproof for very large
        projects though. This is where I would turn to a legal professional.
      </p>
      <p>
        Lastly, <strong>get at least 50% of your project budget up-front</strong> if you
        are charging a flat rate and if not, get some form of deposit. There are only a
        <em>tiny</em> handful of clients that I won’t take a deposit off, only because I
        trust them a lot. Normally, that deposit has to be in my bank before I even lift a
        finger because if the client suddenly decides they are going to be bad payers (it
        happens a lot unfortunately), you have a good chunk of money still. Remember when
        I said charge 3X what you need? You’d be pretty thankful for that right now if it
        all goes pear shaped.
      </p>
      <h2 id="heading-incorporate-or-don't">Incorporate or don’t</h2>
      <p>
        I run my freelance business as a Limited Company. I didn’t technically need to do
        that, but the main reason I do is <em>liability</em>. It also gives me
        flexibility. Those who have purchased content on this site (thank you) will have
        probably noticed that you pay my limited company, Andy Bell Design Ltd which
        <em>trades</em> as Piccalilli.
      </p>
      <p>
        If you get good insurance (use <a href="https://withjack.co.uk">With Jack</a>,
        seriously), then running as a Sole Trader is more than fine. When I first started
        out in the industry, it’s what I did and it was fine. Just be aware that some
        corporate clients don’t like working with Sole Traders, so being a Limited Company
        can be useful for that too.
      </p>
      <p>
        Get a good accountant regardless. I can’t stress enough how a good accountant is
        your most important expense. In fact, a good accountant will most likely
        <strong>pay for themselves</strong>. It’s all well and good using fancy accounting
        tools, but when it comes down to the nitty gritty of tax returns—especially
        self-assessment—a good accountant will make that process so much easier and most
        likely cheaper. They also very often give <em>fantastic</em> business advice.
        Please, for the love of everything, don’t try to run a Limited Company without one
        <strong>especially</strong> if you are VAT registered.
      </p>
      <p>
        Make sure you get a separate bank account, too. I use
        <a href="https://monzo.com/i/business">Monzo business</a>.
      </p>
      <h2 id="heading-get-good-at-communication">Get good at communication</h2>
      <p>
        The last part of this post is a tip on communication. Get good at emailing. I know
        I run most stuff through Notion, but the same principles apply, even in there.
      </p>
      <p>
        Short, concise communication is the best way: trust me. I’ll be
        <em>extremely opinionated</em> on this because being concise (often blunt) works
        very well for me. When I write an email, it’s extremely short and to the point and
        will very likely feature bullet points. It has to be readable in less than a
        minute. This means that you should probably remove pleasantries such as the
        infamous “I hope you are well” or worse: “I hope this email reaches you
        well”—written as if the email was delivered by a donkey, via a mountain range...
      </p>
      <p>
        The reason to keep things short is that <strong>people are busy</strong>. You
        might feel like you are being polite, riddling a email with pleasantries, but
        really, you’re probably being the opposite, taking up their time. If I see a wall
        of text in my inbox, I’ll set it aside until I can be arsed reading it, which in a
        lot of cases, is never. Getting good at writing short emails is something that
        happens over time though, so get practicing now!
      </p>
      <p>
        Lastly, meetings are a time-sink. I often joke that I am a professional
        meeting-dodger because I <em>hate them</em>. Granted, some things require a
        meeting, but most stuff can be done with written communication. I actually like to
        record screen-casts, which you can
        <a
          href="https://hankchizljaw.com/wrote/screencasting-the-secret-sauce-for-less-time-wasted-in-meetings/"
          >read up on here</a
        >. Also, don’t join your client’s Slack: they aren’t paying you for 24/7 support!!
      </p>
      <h2 id="heading-wrapping-up">Wrapping up</h2>
      <p>
        It’s worth noting that this post is written by me, a CIS white guy from the UK. I
        couldn’t be more privileged if I tried, so take my advice with a pinch of salt.
      </p>
      <p>
        I do hope it has been useful, though. If you are thinking of going freelance:
        <strong>do it</strong>. I believe in you! Going freelance was
        <strong>by far</strong> the best decision I ever made. I did it at a very
        stressful time—shortly after being made redundant—but now, it would take
        <em>a hell of a lot</em> for me to even consider working for a company again.
      </p>
      <p>Take it easy and good luck if this is the start of your freelancing career 🙂</p>
    </article>
  </body>
</html>

That’s the whole blog post right there. It’s a nice long one with plenty of variety for us to get stuck into.

If you open up your page, it should look like this: good ol’ HTML!

The HTML-only version of our article

You might be thinking, “why the heck is there no margin?”. That’s because we have this CSS reset loaded in to our HTML.

Base CSS permalink

We’re going to take some principles from CUBE CSS here and concentrate on doing as much as possible, as high up as possible. The aim of the game is to write low specificity CSS that does as much of the work for us as possible.

Open up global.css and add the following to it:

Code language
CSS
:root {
  --size-300: 0.75rem;
  --size-400: 1rem;
  --size-500: 1.33rem;
  --size-600: 1.77rem;
  --size-700: 2.36rem;
  --size-800: 3.15rem;
  --size-900: 4.2rem;
}

body {
  background: #f3f3f3;
  color: #252525;
  line-height: 1.5;
  font-family: Georgia, serif;
  padding: 2rem 0;
}

We’ve defined a block of default custom properties on the root (AKA <html>) that will power our typographic scale. Then, we’ve set some core basics styles on the body.

The typographic scale—based on the legendary modular scale—is a group of sizes that increment in specifically sized steps, based on a chosen ratio. For today, we are using a perfect fourth ratio which provides rather large steps between sizes.

A perfect fourth modular scale in an online generator

The type-scale.com generator is a great tool

Why do we do this? The answer to that is to create rhythm on the page. If text and spacing follows a mathematical ratio, then visually, it flows nicely, making it easier to read.

Core HTML styling

Let’s concentrate on some core HTML elements now. How much you style at this point in any other project will very much depend on that project’s overall context. If you have a lot of complex components on your site, you’re probably not going to add much stuff at this point, but as we are working in a blog context with this project, we’re front-loading the heck out of our CSS.

Add the following to global.css:

Code language
CSS
a:not([class]) {
  color: currentColor;
}

:focus {
  outline: 2px dashed;
  outline-offset: 0.25rem;
}

main:focus {
  outline: none;
}

[href]:hover {
  text-decoration: none;
}

We’re diving straight into link styling. We want the links to be the same colour as the content on this page. Thankfully, we have the currentColor keyword in CSS which is the computed, inherited value for color. This means that if we set our body to be color: #ff00ff, all the content, including the links, would be bright pink.

We qualify elements with the :not pseudo class because if you have a link that’s supposed to look like a button that has a .button class on it, you don’t want global link styling to get in the way of the styling that .button generates, so this approach helps that.

I like to tackle interactive states high-up for consistency. I don’t like the default outline style browsers provide a lot of the time, so targeting that pseudo-class directly will apply it to all elements that can be focused. You must always provide an acceptable focus style—especially if you remove the default outline. If you don’t, you’re going to create an unnecessary accessibility issue.

For hover styles, I target elements that have a href attribute. This means that if for some reason there was an <a> with no href, it wouldn’t get those styles. Sure, there shouldn’t be these elements, but have you seen WYSIWYG editors?! They do some…unpredictable things. It’s almost always better to be pragmatic and forward-thinking with this stuff.

Let’s do headings now. Open up your CSS and add the following:

Code language
CSS
h1,
h2,
h3,
h4 {
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue,
    helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif;
  line-height: 1.3;
}

h1,
h2 {
  font-weight: 900;
}

h1 {
  font-size: var(--size-700);
}

h2 {
  font-size: var(--size-600);
}

h3 {
  font-size: var(--size-600);
}

Having some contrast between headings and body content is a low-hanging fruit way to improve readability. Our base font is Georgia, which aside from being the best font, is a serif font. We could add another serif, just like this site you’re reading on, which uses a serif display font for headings. Another thing I like to do, though, is add a chunky sans-serif for headings.

We’re using the system font stack for this to keep things simple. I also really like how the 900 weight looks—especially on Mac. With that in mind, we’ve got both our h1 and h2 set to use those. We’ve also got a pretty tight line height on headings.

Once we’ve got the basics down with our headings, we go down the size scale from h1 to h3. I personally leave it there because I don’t bother much with h4-onwards. This is mainly because I think for an article, if you’re getting that deep into headings, you probably want to simplify things a bit.

Right, let’s tackle a couple of last bits of global styling. Add the following to your CSS:

Code language
CSS
img {
  max-width: min(55rem, 100%);
}

figcaption {
  font-size: var(--size-300);

  font-style: italic;
  margin-top: 1rem;
}

blockquote {
  padding-left: var(--size-600);
  border-left: 5px solid;
  font-style: italic;
}

::selection {
  color: #fff;
  background: rgba(0, 0, 0, 0.99);
}

We’ve got a figcaption and blockquote rules here because there’s a couple of those on the page. We’ve also got our img styles set using min which picks the smallest value from 55rem and 100%. This provides a nice, clamped width at larger viewport sizes and a full width, non-overflowing size at smaller viewport sizes.

Any other HTML elements that are relevant to your project should probably go in this region of your CSS file, too. We’re not going to add them here today, because we don’t want any unnecessary CSS.

Lastly, selection styles! I like to add a high contrast selection style, personally. It’s a handy inclusion strategy because folks might find your colours hard to read, so giving them the inverse when they select it’s helpful.

For selection, we set the color to be white, then because this is a light themed site, a black background. You’re probably wondering why we’re using rgba with a 0.99 alpha. Well, this is because Chromium and WebKit render selection backgrounds as partially transparent if we use a solid colour. This little hack stops that from happening.

Our article is getting much better looking now, but we’ve got lots more to do to really refine it.

Our article looking much better with some typography and global styles

The flow utility permalink

Controlling space between elements is a big part of making things read well. I add this utility to pretty much every website I build these days.

Go ahead and add it to your CSS:

Code language
CSS
.flow > * + * {
  margin-top: var(--flow-space, 1em);
}

What this does is select direct next siblings, using a lobotomised owl selector. This means only elements that need space get space. By default, the flow space is 1em, which is the computed font size of the element that has margin added to it. That means that your p element will have ~ 16px of margin and your h2 will have ~ 28px of margin.

Because we’re sizing with this modular scale, a lot of the hard work is already done for us. The flow utility does give us a bit of flexibility to get more specific by honouring a --flow-space custom property, if it’s defined, too.

You can read in more detail about flow here. We call this pattern The Stack in Every Layout, too.

If you refresh your page now, you’ll see what a huge impact this utility has made!

Now that the flow utility has been added, there’s consistent spacing between elements

Line lengths permalink

Seriously, the next few lines of CSS will transform any site you work on. Add the following to your CSS, then I’ll break it down:

Code language
CSS
p,
li {
  max-width: 60ch;
}

h1 {
  max-width: 15ch;
}

h2,
h3 {
  max-width: 25ch;
}

Limiting line lengths has a huge impact on readability. The rule of thumb tends to be that a line should be between 65 and 75 characters long. If your line lengths are too long, it makes your content really hard to read.

I wrote about this in more detail here, but the approach I like to do is keep things at around 60 characters for paragraphs and list items then bring it down for headings. The reason for this is that we’re using the ch unit, which is the width of your font’s 0 character at the rendered size. 60 of these on a long paragraph is fine, but if you’ve got a big chunky heading, you’re going to want that to break a lot earlier.

A lot of this comes down to tweaking stuff by eye—sorry to those who like to automate things—because that’s what a lot of visual design is about and fonts vary a lot. We use some base rules and methodologies to then help us to make things look nice, visually.

The content is much narrower now with the line length rules

The post block permalink

Time to dig into the B in CUBE CSS now. We’re going to create a block that styles HTML elements that specifically find themselves in long-form articles. We could style this stuff globally, too—especially if your blog is just articles, but to keep things future-friendly, we’re going to take advantage of the namespace that block gifts us.

Add the following to your CSS:

Code language
CSS
.post {
  --flow-space: var(--size-700);

  width: 90vw;
  width: clamp(16rem, 90vw, 70rem);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

The first thing you probably notice is that we’re setting the --flow-space rule. I like lots of space between elements in long form content. It helps to separate related pieces of content, cognitively, so going straight to the top-end of the typographic scale is a good way to guarantee that.

Next, we’re implementing the same methodology as this clamp-based wrapper. This does what any centered wrapper does, but using clamp() helps to keep line-lengths at a contextually-nice level, regardless of viewport size.

Let’s add some more spacing rules. Add the following to your CSS:

Code language
CSS
.post time {
  --flow-space: var(--size-400);
  display: block;
}

.post :is(h2, h3) {
  --flow-space: var(--size-900);
}

.post :is(h2, h3) + * {
  --flow-space: var(--size-400);
}

.post figure,
.post figure + * {
  --flow-space: var(--size-900);
}

We’re setting specific rules for specific types of content here. We want the date of our post to be near the title, so we set that --flow-space back to the root size.

Next, headings get some gnarly treatment. First of all, we want a heading to be pushed away from the preceding content, so we increase the space to our largest size in the typographic scale. Then, we use a direct sibling selector to pull the content that this heading starts close to it. This helps make sections of our article look related to each other.

Last up, we want to have plenty of space between figures and the rest of the content. This allows the reader to concentrate on the figure content which is mostly images. It’s subtle, but makes a big impact.

All of the elements have much better spacing between them now

Optimising for larger viewports permalink

We’re very close to the end now. The post is looking great, but it can be better. Add the following CSS:

Code language
CSS
@media (min-width: 45em) {
  h1 {
    font-size: var(--size-900);
  }

  h2 {
    font-size: var(--size-700);
  }

  p {
    font-size: var(--size-500);
  }

  figcaption {
    font-size: var(--size-400);
  }

  blockquote p {
    font-size: var(--size-600);
    max-width: 40ch;
  }

  .post time {
    font-size: var(--size-600);
  }
}

Using a media query, we’re bumping up the font size for larger screens. We could use a fluid type setup, like this, but I actually prefer to work like this—setting size scale—personally.

For each previously defined font-size, we’re knocking it up a level or two in the modular scale.

Your article should now look like this.

The final version of our site

Wrapping up permalink

We are done. You can check out a live demo of what we’ve built here or download the source files here.

Hopefully, this tutorial has taught you some key design and CSS skills. You can do a lot with very little CSS that makes a huge impact on the overall presentation of your site.

Until next time, take it easy 👋

Hello, I’m Andy and I’ll help you build fast & visually stunning websites.

I am currently setting up a new creative agency called Set Creative Studio and we are taking on projects for 2022, so if you have a project in mind, get in touch.