How readability can make sure people actually read your content

What’s the easiest way to increase time-on-site, decrease bounce, and make it more likely people share your content? Readability.

Readability: “The ease with which a reader can understand written text”

Great content is irrelevant if it’s a pain to read. Most people who have a website rarely consider the typography used on their website – from font family to size, line-height, color, contrast, and more.

Think of a website that’s a pleasure to read. For many, they’ll think of Medium. And that wasn’t by happenstance – it was a deliberate action towards readability.

And did you know that the big tech companies have all created their own fonts in order to make it easier for people to read large amounts of content? Google has the quirky Literata. Amazon has Bookerly. Microsoft has over half a dozen.

Why the interest? By the time you’re 40, only half the light gets to your retina as it does when you’re 20. And by the time you’re 60? It drops down to 20% (presbyopia). Nearly 9% of Americans are visually impaired.

Readability is not just important – it is critical for your online business.

My goal here is to break down the seven variables that will help make your site a pleasure to read. And at the end will be a downloadable PDF that sums it all up.

It should be noted that the seven variables I cover are setup as guidelines. I always recommend going with a professional designer who can fully appreciate the nuance behind intelligent design and user experience.

1. Font Family (aka serif vs sans-serif)

You may have heard of serif vs sans-serif, but what’s the difference?

The easiest way to explain is that serif fonts have a flourish around the edges of letters, whereas sans-serif (sans literally translates to “without”) do not.

Sans-serif vs serif
Sans-serif vs serif

People associate serif with printed word (think newspapers), and thus with a bit more trust. Sans-serif fonts are usually described as more modern, and were heavily utilized by websites when the Internet first started going.

Fonts are powerful. People have emotional responses to fonts! The New York Times found that the font Baskerville caused a 1.5% increase in people feeling safe, and Typographie noted how fonts can affect mood positively! Courier reminds people of a typewriter and Helvetica reminds people of the US Government.

Courier: what a typewriter uses
Courier: reminds a person of a typewriter

Studies of sans-serif vs serif are very interesting. In general, people actually score higher on reading speed and comprehension with sans-serif fonts, but subjectively, they prefer serif fonts (Psychophysics of Reading).

The reason sans-serif was more popular online was because monitors had low DPI (dots per inch). In order to keep the letters clean (and thus easier to read) for a serif font (due to the edges), the DPI of the screen had to be higher. It was not until the past 5-10 years when companies have vastly upped the resolution of their screens (think Apple and their high res screens) that serif fonts have made a comeback.

In fact, when Smashing Magazine looked at 50 popular websites, they found that many of them have transitioned away from sans-serif to serif fonts.

Serif is subjectively considered easier to read (and more trusted), whereas sans-serif is considered more modern.

2. Font Size

The #1 complaint when it comes to websites? Font size is too small (Nielson).

In general, the recommendation is to have a font-size of 16px, which translates into 12pt on a printed document.

The Psychographics of Reading found that everyone read better (both speed and comprehension) with larger font sizes. Further research corroborates this again and again.

A larger font is easier to read
A larger font is easier to read

Not convinced about the emotional response to a font family? Well it also exists for font sizes! MIT psychologist Kevin Larson also found this to be true.

As an added bonus, the larger font-size also means less characters per line, which makes it easier to read (more on that in a bit). MarketingLand even covered how bigger fonts helped increase conversions.

A/B test: larger font wins
A/B test: larger font wins

Go for a minimum of 16px for font-size

3. Line Height

The line height (called “leading” in typography) refers to the amount of space between two lines of text. For example, double-spacing is a line-height of 200%.

The line-height has to hit a sweet spot – if it’s too low, it’s hard to discern each line. If it’s too big, it’s harder to jump to the next line. In general, 150% is the recommended value.

Think of adequate line-height as letting your text breathe.

Go for a line-height of 150% (1.5em)

4. Characters per Line

While font-family, font-size, and line-height do get some consideration, characters per line is a very important variable that is rarely discussed.

There’s a reason why newspapers used columns – it’s easier to read.

Too long a line, and it’s harder to jump to the next line (a 2004 study from the University of Reading confirmed this). Too short, and it breaks the rhythm of reading.

The recommended characters per line is roughly 55-75 characters. Go for 65 as a simple target. You can even use something like FlowType.JS to automatically resize to fit your target characters per line.

characterperline

An easy way to do this is to use a side-menu that forces the content to be narrower in width (it’s what we do at SJO.com). You can also increase font-size to decrease the number of characters per line.

Go for roughly 55-75 characters per line

5. Contrast

Along with small text, poor contrast is the other top complaint for websites (there’s even an advocacy site decrying poor contrast).

The contrast of your text (color of text on top of background color) is important in order to make it easy for your end-user to keep reading your content.

Similar colors will just give your users a headache – opt for dark text on a light background (and don’t forget how many people have their mobile devices at a lower light).

Contrast

On that note, do not go for pure black (#000000) on white. That contrast can be a bit too harsh – use a slightly soft grey (think #111111) on the white background (or black on a slightly grey background).

Do not go with the opposite – white text on black. It’s simply too tiring to read on a monitor. And if you really want to dig into it, here’s a great post by Tom Osborne on color contrast.

Go for very dark text on light background.

6. Headlines

Headlines are the first thing a user reads, and they help segue the user into the text they are about to read.

A common technique to make headlines stand out even more is to use a different font from the text. Even simpler, if you are using a serif font for the body of your text, go with a sans-serif font for the headline.

Another general rule is to have the headline 2.5x to the size of your text (for those keeping score, it’s equivalent to two lines of text + the line-height between them)

Do not go for all capitals – they are harder to read.

Remember – the headlines are meant to have gravity – your eyes naturally gravitate towards them. Don’t have them in an awkward location or away from the text – once a user reads the headline, have them segue into the content beneath the headline.

Go for a different font for the headlines, and have the headline be 2.5x the size of your text.

7. Don’t forget Phones & Tablets

Responsive web design
Responsive web design

Don’t forget – your content has to be readable on a variety of devices – mobile phone, tablet, and desktop.

While the above recommendations are for the desktop, they can be adopted for mobile phones and tablets:

  • Ensure the font is readable (mobile phones and tablets tend to have a higher DPI than monitors)
  • Decrease characters per line to roughly 35-50 characters
  • Increase line height to 1.75-2x (easier to read due to the scrolling nature).

If you want to get advanced, look into fluid typography with viewport units.

And make sure you load up and view your website on both a phone and a tablet.

Go for a responsive design that makes your content easy to consume on mobile.

Other Notes of Interest

Most people perceive underlined text to be a link. Don’t underline non-links.

All caps are not easy to read, but an interesting technique is to use a drop cap for your content.

Legendary advertiser David Ogivly said “The drop capital increases readership of your body copy by 13%” and Maria Veloso stated that implementing a drop cap on one website contributed to a 251% increase in sales.

Drop cap to ease reading
Drop cap to ease reading

Adobe’s dropcap.js makes it easy to add to your site. Or you can do it via CSS too.

Have the first paragraph’s text size be even bigger. This makes it even easier for the person to segue from the headline to the copy.

Smashing Magazine - easy to segue into the content
Smashing Magazine – easy to segue into the content

Smashing Magazine brilliantly not only has the first paragraph text bigger, but they stick the ad right at the top. This forces the column to a bit narrower at the beginning… which decreases the characters per line (in an organic manner), and it makes it easier for someone to start reading!

Microsoft Research found that our attention span has gone from 12 seconds in 2000 to 8s in 2015. The lesson here – always make it easy for someone to read your content!

Best Practices for Content

Before wrapping up, I do also want to focus on best practices for content.

The reality is, no matter how amazing your content is and how on-point your readability is, people will scan. Only 25% of your traffic will read everything. The average person will just spend enough time on your website to read 20% of your content, and people can’t stay focused past the 50% mark. The more you write, the more people just stop reading.

Slate: percent of content viewed
Slate: percent of content viewed

Does this mean you should write shorter content?

No way. Moz found that in-depth content gets more links. And here’s a summary by Buzzsumo on how longer content generates the most traffic.

So what are some general rules to follow when writing headlines?

  • Have good subheadings (<h2> and <h3>) in your content. Making them eye-catching helps the user segue into your content
  • Make your content scannable
  • Use bold and italics (but never underlines)
  • Use lists (like this!)
  • Use <blockquotes> to highlight
  • Keep to shorter paragraphs – it makes the user feel like they are reading it faster
  • Do not use jargon – that limits your potential audience greatly
  • Be concise – you’re not writing a novel
  • Use images – people retain more information visually. To maximize shares, use animated or hand-drawn images.
  • Quotes can also be useful – people love sharing quotes
  • Make it easy to share – if it was interesting and a pleasure to read, they’ll want to share it

My buddy Kris has a nice article summing up over a dozen ways you can make your content easy to scan (and this guy was getting hundreds of thousands of visitors to his sites, so he gets it).

Wrap up

One can say that webdesign is 95% typography. And a great designer will know how typography plays into the overall experience.

When it comes to low-hanging fruit to improve your website, readability is at the top of that list.

Many companies have learned the benefits of improving readability – increased time-on-site, decreased bounce rates, and more shares. All with no downside.

Enter your email in below to get a one-page summary on best practices for readability and content (easy to share with your team or just focus yourself) and a list of HTML elements to consider for readability when designing.

BONUS: It’s not ready, but in the next few weeks I’ll be releasing a simple readability tool to help you improve your own site’s readability – letting you test out the 7 variables I’ve covered. Make sure you enter your email below to be notified when it comes out.

xosotin chelseathông tin chuyển nhượngcâu lạc bộ bóng đá arsenalbóng đá atalantabundesligacầu thủ haalandUEFAevertonxosofutebol ao vivofutemaxmulticanaisonbethttps://bsport.fithttps://onbet88.ooohttps://i9bet.bizhttps://hi88.ooohttps://okvip.athttps://f8bet.athttps://fb88.cashhttps://vn88.cashhttps://shbet.atbóng đá world cupbóng đá inter milantin juventusbenzemala ligaclb leicester cityMUman citymessi lionelsalahnapolineymarpsgronaldoserie atottenhamvalenciaAS ROMALeverkusenac milanmbappenapolinewcastleaston villaliverpoolfa cupreal madridpremier leagueAjaxbao bong da247EPLbarcelonabournemouthaff cupasean footballbên lề sân cỏbáo bóng đá mớibóng đá cúp thế giớitin bóng đá ViệtUEFAbáo bóng đá việt namHuyền thoại bóng đágiải ngoại hạng anhSeagametap chi bong da the gioitin bong da lutrận đấu hôm nayviệt nam bóng đátin nong bong daBóng đá nữthể thao 7m24h bóng đábóng đá hôm naythe thao ngoai hang anhtin nhanh bóng đáphòng thay đồ bóng đábóng đá phủikèo nhà cái onbetbóng đá lu 2thông tin phòng thay đồthe thao vuaapp đánh lô đềdudoanxosoxổ số giải đặc biệthôm nay xổ sốkèo đẹp hôm nayketquaxosokq xskqxsmnsoi cầu ba miềnsoi cau thong kesxkt hôm naythế giới xổ sốxổ số 24hxo.soxoso3mienxo so ba mienxoso dac bietxosodientoanxổ số dự đoánvé số chiều xổxoso ket quaxosokienthietxoso kq hôm nayxoso ktxổ số megaxổ số mới nhất hôm nayxoso truc tiepxoso ViệtSX3MIENxs dự đoánxs mien bac hom nayxs miên namxsmientrungxsmn thu 7con số may mắn hôm nayKQXS 3 miền Bắc Trung Nam Nhanhdự đoán xổ số 3 miềndò vé sốdu doan xo so hom nayket qua xo xoket qua xo so.vntrúng thưởng xo sokq xoso trực tiếpket qua xskqxs 247số miền nams0x0 mienbacxosobamien hôm naysố đẹp hôm naysố đẹp trực tuyếnnuôi số đẹpxo so hom quaxoso ketquaxstruc tiep hom nayxổ số kiến thiết trực tiếpxổ số kq hôm nayso xo kq trực tuyenkết quả xổ số miền bắc trực tiếpxo so miền namxổ số miền nam trực tiếptrực tiếp xổ số hôm nayket wa xsKQ XOSOxoso onlinexo so truc tiep hom nayxsttso mien bac trong ngàyKQXS3Msố so mien bacdu doan xo so onlinedu doan cau loxổ số kenokqxs vnKQXOSOKQXS hôm naytrực tiếp kết quả xổ số ba miềncap lo dep nhat hom naysoi cầu chuẩn hôm nayso ket qua xo soXem kết quả xổ số nhanh nhấtSX3MIENXSMB chủ nhậtKQXSMNkết quả mở giải trực tuyếnGiờ vàng chốt số OnlineĐánh Đề Con Gìdò số miền namdò vé số hôm nayso mo so debach thủ lô đẹp nhất hôm naycầu đề hôm naykết quả xổ số kiến thiết toàn quốccau dep 88xsmb rong bach kimket qua xs 2023dự đoán xổ số hàng ngàyBạch thủ đề miền BắcSoi Cầu MB thần tàisoi cau vip 247soi cầu tốtsoi cầu miễn phísoi cau mb vipxsmb hom nayxs vietlottxsmn hôm naycầu lô đẹpthống kê lô kép xổ số miền Bắcquay thử xsmnxổ số thần tàiQuay thử XSMTxổ số chiều nayxo so mien nam hom nayweb đánh lô đề trực tuyến uy tínKQXS hôm nayxsmb ngày hôm nayXSMT chủ nhậtxổ số Power 6/55KQXS A trúng roycao thủ chốt sốbảng xổ số đặc biệtsoi cầu 247 vipsoi cầu wap 666Soi cầu miễn phí 888 VIPSoi Cau Chuan MBđộc thủ desố miền bắcthần tài cho sốKết quả xổ số thần tàiXem trực tiếp xổ sốXIN SỐ THẦN TÀI THỔ ĐỊACầu lô số đẹplô đẹp vip 24hsoi cầu miễn phí 888xổ số kiến thiết chiều nayXSMN thứ 7 hàng tuầnKết quả Xổ số Hồ Chí Minhnhà cái xổ số Việt NamXổ Số Đại PhátXổ số mới nhất Hôm Nayso xo mb hom nayxxmb88quay thu mbXo so Minh ChinhXS Minh Ngọc trực tiếp hôm nayXSMN 88XSTDxs than taixổ số UY TIN NHẤTxs vietlott 88SOI CẦU SIÊU CHUẨNSoiCauVietlô đẹp hôm nay vipket qua so xo hom naykqxsmb 30 ngàydự đoán xổ số 3 miềnSoi cầu 3 càng chuẩn xácbạch thủ lônuoi lo chuanbắt lô chuẩn theo ngàykq xo-solô 3 càngnuôi lô đề siêu vipcầu Lô Xiên XSMBđề về bao nhiêuSoi cầu x3xổ số kiến thiết ngày hôm nayquay thử xsmttruc tiep kết quả sxmntrực tiếp miền bắckết quả xổ số chấm vnbảng xs đặc biệt năm 2023soi cau xsmbxổ số hà nội hôm naysxmtxsmt hôm nayxs truc tiep mbketqua xo so onlinekqxs onlinexo số hôm nayXS3MTin xs hôm nayxsmn thu2XSMN hom nayxổ số miền bắc trực tiếp hôm naySO XOxsmbsxmn hôm nay188betlink188 xo sosoi cầu vip 88lô tô việtsoi lô việtXS247xs ba miềnchốt lô đẹp nhất hôm naychốt số xsmbCHƠI LÔ TÔsoi cau mn hom naychốt lô chuẩndu doan sxmtdự đoán xổ số onlinerồng bạch kim chốt 3 càng miễn phí hôm naythống kê lô gan miền bắcdàn đề lôCầu Kèo Đặc Biệtchốt cầu may mắnkết quả xổ số miền bắc hômSoi cầu vàng 777thẻ bài onlinedu doan mn 888soi cầu miền nam vipsoi cầu mt vipdàn de hôm nay7 cao thủ chốt sốsoi cau mien phi 7777 cao thủ chốt số nức tiếng3 càng miền bắcrồng bạch kim 777dàn de bất bạion newsddxsmn188betw88w88789bettf88sin88suvipsunwintf88five8812betsv88vn88Top 10 nhà cái uy tínsky88iwinlucky88nhacaisin88oxbetm88vn88w88789betiwinf8betrio66rio66lucky88oxbetvn88188bet789betMay-88five88one88sin88bk88xbetoxbetMU88188BETSV88RIO66ONBET88188betM88M88SV88Jun-68Jun-88one88iwinv9betw388OXBETw388w388onbetonbetonbetonbet88onbet88onbet88onbet88onbetonbetonbetonbetqh88mu88Nhà cái uy tínpog79vp777vp777vipbetvipbetuk88uk88typhu88typhu88tk88tk88sm66sm66me88me888live8live8livesm66me88win798livesm66me88win79pog79pog79vp777vp777uk88uk88tk88tk88luck8luck8kingbet86kingbet86k188k188hr99hr99123b8xbetvnvipbetsv66zbettaisunwin-vntyphu88vn138vwinvwinvi68ee881xbetrio66zbetvn138i9betvipfi88clubcf68onbet88ee88typhu88onbetonbetkhuyenmai12bet-moblie12betmoblietaimienphi247vi68clupcf68clupvipbeti9betqh88onb123onbefsoi cầunổ hũbắn cáđá gàđá gàgame bàicasinosoi cầuxóc đĩagame bàigiải mã giấc mơbầu cuaslot gamecasinonổ hủdàn đềBắn cácasinodàn đềnổ hũtài xỉuslot gamecasinobắn cáđá gàgame bàithể thaogame bàisoi cầukqsssoi cầucờ tướngbắn cágame bàixóc đĩaAG百家乐AG百家乐AG真人AG真人爱游戏华体会华体会im体育kok体育开云体育开云体育开云体育乐鱼体育乐鱼体育欧宝体育ob体育亚博体育亚博体育亚博体育亚博体育亚博体育亚博体育开云体育开云体育棋牌棋牌沙巴体育买球平台新葡京娱乐开云体育mu88qh88

Want to make sure people read your content?

Pop in your email address and I’ll send you an easy-to-follow checklist on what to do.

Powered by ConvertKit

Comments

One response to “How readability can make sure people actually read your content”

  1. […] How Readability Can Make Sure People Actually Read Your Content – Sol Orwell […]

Leave a Reply

Your email address will not be published. Required fields are marked *