Improve the readability of the content on your website
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.
Getting started permalink
For this tutorial, you’re only going to need two files—some HTML and CSS:
index.htmlglobal.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&q=60&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&q=60&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&q=60&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!
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.
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.
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!
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 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.
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.
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 👋
