Aprender como apresentar texto longo na Web, como postagens de blog, é uma habilidade de design valiosa para aprender. A boa notícia é que o CSS atual já fornece todas as ferramentas necessárias para melhorar a legibilidade de textos na Web.
Tornar um artigo legível — especialmente um que seja longo, técnico — não é muito fácil. Aprender o básico sobre como melhorar a legibilidade do texto na Web certamente trará um grande impacto positivo na experiência do leitor de seus conteúdos.
Pré-requisitos
Para este tutorial, você precisará de 2 arquivos:
index.htmlglobal.css
Crie-os em uma pasta em sua máquina ou use este modelo de projeto no CodePen.
HTML-base e conteúdo
O HTML para este projeto é bastante autoexplicativo — é um artigo com conteúdo, com vários elementos HTML — então, primeiro, pegue todo o seguinte trecho de HTML e cole em seu arquivo index.html:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 |
<!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> |
Ao abrir a página em um navegador, ela deve aparecer assim:
O CSS
Usando alguns princípios do CUBE CSS, a ideia é fazer o máximo possível para melhorar a legibilidade do texto. O objetivo é escrever CSS de baixa especificidade que faça o máximo possível do trabalho.
No arquivo global.css, coloque o seguinte:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
: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; } |
Foi definido um bloco com variáveis CSS no root com a escala tipográfica que será usada. Em seguida, alguns estilos básicos básicos gerais.
A escala tipográfica — baseada na lendária ferramenta Modularscale — é um grupo de tamanhos que aumenta em etapas de tamanhos específicos, com base em uma proporção escolhida.
Usa-se este tipo de escala no texto para criar ritmo na página. Se o texto e o espaçamento seguem uma proporção matemática, então, visualmente, ele flui bem, facilitando a leitura.
Estilo-base do HTML
Primeiramente, foco em alguns elementos HTML principais. O quanto se estiliza neste ponto em qualquer outro projeto dependerá muito do contexto geral de cada projeto.
Se não há muitos componentes complexos no site, provavelmente, não será adicionado muito estilo neste ponto, mas, como o atual contexto-exemplo é de um blog, é interessante trabalhar com esse CSS.
Adicione isso no global.css:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
a:not([class]) { color: currentColor; } :focus { outline: 2px dashed; outline-offset: 0.25rem; } main:focus { outline: none; } [href]:hover { text-decoration: none; } |
Isso afeta diretamente o estilo de links para que eles tenham a mesma cor do conteúdo da página. Felizmente, existe a palavra-chave currentColor em CSS, que é o valor computado, herdado para color.
Isso significa que se a cor de <body> for definida como color: #ff00ff, todo o conteúdo, incluindo os links, será rosa brilhante.
Estilos de hover foram adicionados para elementos que têm um atributo href. Isso significa que, se por algum motivo houvesse um <a> sem href, ele não seria afetado por esses estilos.
Claro, em teoria, não deveria haver esse tipo de elemento, mas você já viu editores WYSIWYG?! Eles fazem algumas… Coisas imprevisíveis. Quase sempre é melhor ser pragmático e com visão de futuro com essas coisas.
Continuando, acrescente no arquivo CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
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); } |
Foi usada a system font stack para manter as coisas simples. Também, peso 900 para os títulos. Com isso em mente, tem-se tanto h1, quanto h2, configurados para usá-la. Também, uma altura de linha bastante estreita para os títulos — com uma redução na escala de tamanho para títulos de h1 a h3.
Mais coisas para o arquivo CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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); } |
A maioria das regras é auto explicativa — evidentemente, adapte ao projeto em que você se encontra.
A única coisa mais curiosa é o rgba com um alfa de 0.99. O motivo é porque Chromium e WebKit renderizam os fundos de seleção como parcialmente transparentes quando se usa uma cor sólida. Este pequeno hack impede que isso aconteça.
A legibilidade de textos no artigo-exemplo já está melhor. Mas ainda há um bom espaço para melhorias e refinamentos.
O utilitário de flow
Controlar o espaço entre os elementos é uma parte importante para fazer as coisas serem bem lidas e aprimorar a legibilidade de texto.
E existe uma maneira bem legalzinha de conseguir isso:
|
1 2 3 |
.flow > * + * { margin-top: var(--flow-space, 1em); } |
O que isso faz é selecionar irmãos próximos usando o famoso seletor-coruja (lobotomised owl selector). Isso significa que apenas os elementos que precisam de espaço têm espaço.
Por padrão, o espaço do flow é 1em, que é o tamanho da fonte calculado do elemento que tem margem adicionada a ele. Isso significa que seu elemento p terá ~16px de margem e seu h2 terá ~28px de margem.
Como essa escala modular está sendo usada, muito do trabalho árduo já é feito meio que automaticamente. O utilitário de flow dá um pouco de flexibilidade para que seja possível ser mais específico, honrando a variável CSS --flow-space, se estiver definida também.
Ao olhar novamente, é possível observar que essa corujinha causou um baita impacto no resultado final!
Comprimentos de linha
As próximas linhas de CSS irão transformar qualquer site em que você trabalhar. Adicione o seguinte ao CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
p, li { max-width: 60ch; } h1 { max-width: 15ch; } h2, h3 { max-width: 25ch; } |
Limitar o comprimento das linhas tem um grande impacto na legibilidade de qualquer texto. A regra tende a ser que uma linha deve ter entre 65 a 75 caracteres. Se os comprimentos de linha forem muito longos, o conteúdo ficará realmente difícil de ler.
O segredo é a unidade ch, que é a largura do caractere 0 da sua fonte no tamanho renderizado. 60 deles em um longo parágrafo é bom, mas se você tem um título grande e volumoso, geralmente, é interessante que seja menor que isso.
Estilizando o post
Agora, a criação de um Bloco (CUBE CSS) que estiliza os elementos HTML que se encontram especificamente em artigos de formato longo.
Adicione o seguinte ao CSS:
|
1 2 3 4 5 6 7 8 9 10 11 |
.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; } |
A primeira coisa que pode chamar a atenção é a definição da regra --flow-space. É prática comum para muitos devs trabalhar com espaço entre os elementos em conteúdos longos. Isso ajuda a separar partes de conteúdo relacionadas cognitivamente, então, ir direto para o topo da escala tipográfica é uma boa maneira de garantir isso.
Em seguida, implementa-se um wrapper com clamp — aliás, também temos um artigo/vídeo sobre textos responsivos com clamp() –, que faz com que qualquer wrapper centralizado faz, mas, com clamp(), ajuda a manter os comprimentos de linha em um nível adequado ao contexto, independentemente do tamanho da viewport.
Adicionando mais algumas regras de espaçamento:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.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); } |
Por último, bastante espaço entre as figuras e o resto do conteúdo para permitir que o leitor se concentre no conteúdo da figura, que consiste principalmente em imagens. É sutil, mas causa um grande impacto.
Otimizando para viewports maiores
Para finalizar, adicione o seguinte CSS para otimizar para viewports maiores:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
@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); } } |
Usando uma media query, aumenta-se o tamanho da fonte para viewports maiores. Seria possível usar tipografia fluida, mas, neste caso, optou-se por ficar assim mesmo.
Para cada tamanho de fonte definido anteriormente, eleva-se 1 ou 2 níveis na escala modular.
Resultando, por fim, em algo como:
Conclusão
Você pode conferir um demo online do resultado final do melhoramento da legibilidade de textos usando as técnicas abordadas no artigo — e/ou baixar os códigos para estudos.
Como citado no início, é importantíssimo aprender o básico sobre como melhorar a legibilidade do texto na Web para trazer um impacto positivo na experiência dos leitores de seus conteúdos.
Dentre as muitas — quase infinitas! — possibilidades de fazer esse aprimoramento da legibilidade, neste artigo foi mostrado como aplicar diversas técnicas CSS e conceitos de UX para que, a partir de agora, a leitura e legibilidade sejam aprimoradas em seus projetos Web.