Quick wins<\/h3>\n\n\n
Let me quickly list out what I think might already be obvious to many of you, but are effective things for content legibility:<\/p>\n\n\n\n
- Increase the font size:<\/strong> We know that
16px<\/code> is the default and is perfectly fine in many designs, but a larger font size is inviting in that it implies the user is free to lean back and settle in without having to angle forward with the screen in their face to read.<\/li>- Aim for characters per line:<\/strong> Very few people I know like to work harder than they need to, and that goes for reading too. Rather than using the full viewport width, try to narrow things down and balance that with your larger font size to get fewer<\/em> characters on each line of text. Your sweet spot may vary, though many folks suggest somewhere between 45-75 characters per line to help limit how far the reader\u2019s eye has to work to go from left to right. Chris has a bookmarklet to help count characters<\/a>, but we also have the
ch<\/code> unit in CSS to get predictable results.<\/li>- Bump up the line height:<\/strong> A default line height is going to feel smashed. It\u2019s funny, but more space between lines (up to a point, of course) is less work for eyes, which seems antithetical to the characters-per-line advice where we generally want eyes to travel a shorter distance. A line height between
1.2<\/code> and1.5<\/code> seems to be a pretty typical range for long-form content.<\/li><\/ul>\n\n\n\nIf you haven\u2019t seen it before, Pierrick Calvez has a great<\/a> <\/a>\u201cfive-minute\u201d<\/a> guide to typography<\/a> that packs in a bunch of low-hanging fruit like these.<\/p>\n\n\n
Design for extra breathing room<\/h3>\n\n\n
You may be accustomed to designing \u201cabove the fold\u201d where real estate is a prime commodity. That\u2019s sort of like beach-front property in the web world because it\u2019s where we\u2019re used to packing in high-value things, like hero banners, calls to action, and anything else to help sell a thing. Above the fold can be a lot like a dense urban downtown with high traffic and high-rise buildings.<\/p>\n\n\n\n
Articles are different. They allow you to stretch out a bit. If we want to take the city development analogy a little further, articles have the acreage to lean into a \u201cless is more\u201d sort of design approach. That\u2019s what makes seemingly small design choices \u2014 like type \u2014 so important to the overall experience.<\/p>\n\n\n\n
Check out the example below. The link underlines have a little more room to breathe (specifically, they appear below the descenders). This is actually something that you can enable sitewide but looks especially nice on article pages since it increases readability. That\u2019s the sort of subtle design choice that contributes to extra breathing room.<\/p>\n\n\n\n
![\"A](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_69172BC482E4A61507CBC00C42BDC8B5C2BA73BD5B5CB79986763479C3E54010_1657124967787_1.png?resize=2880%2C1800&ssl=1\")
<\/figure>\n\n\n\ntext-underline-position: under;<\/code> is the line of CSS that makes this work. Naturally,text-decoration<\/code> must be set to something other thannone<\/code> (underline<\/code> in this case), too.<\/p>\n\n\n\nThe example above also features
text-decoration-thickness<\/code>, which alters the thickness of underlines (and other line types). You can use this CSS property to match a line\u2019s thickness to a font\u2019s size and\/or weight.<\/p>\n\n\n\nHere\u2019s a full example:<\/p>\n\n\n\n
a {\n text-decoration: underline;\n text-decoration-thickness: 2px;\n\n \/* or *\/\n text-decoration: underline 2px;\n text-underline-position: under;\n}<\/code><\/pre>\n\n\n\nBut before you reach for the
text-decoration<\/code> shorthand, \u0160ime Vidas has a few \u201cgotchas\u201d<\/a> when it comes to using it that are worth reviewing.<\/p>\n\n\nLeading into the content<\/h3>\n\n\n
Drop caps<\/dfn> are stylized letters that can be placed at the beginning of a document or document section. They were once used in Latin texts<\/a>, but today they\u2019re mostly used for decorative reasons.<\/p>\n\n\n\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_69172BC482E4A61507CBC00C42BDC8B5C2BA73BD5B5CB79986763479C3E54010_1657125520626_2.png?resize=2880%2C1800&ssl=1\")
<\/figure>\n\n\n\nPersonally, I think that drop caps hinder readability. However, they can be a nice way to \u201clead\u201d a reader into the main content, and they shouldn\u2019t introduce any serious accessibility issues as long as you\u2019re using the
::first-letter<\/code><\/a> pseudo-element. There are other (older)<\/a> methods<\/a> that involve more HTML and CSS as well as the use of ARIA attributes in order for the content to remain accessible.<\/p>\n\n\n\nUsing
::first-letter<\/code>, the CSS would look something like this:<\/p>\n\n\n\n\/* select the first letter of the first paragraph *\/\narticle > p:first-child::first-letter {\n color: #903;\n float: left;\n font-family: Georgia;\n font-size: 75px;\n line-height: 60px;\n padding-top: 4px;\n padding-right: 8px;\n padding-left: 3px;\n}<\/code><\/pre>\n\n\n\nIt sure would be nice if we could use the
initial-letter<\/code><\/a> property, but there\u2019s pretty much no support for it at the time I\u2019m writing this. If we had it, all that math for font size and line height would be calculated for us!<\/p>\n\n\n\nCodePen challenged folks to show off their drop-cap-styling skills several years ago and you can see a whole bunch of neat examples from it in this collection<\/a>.<\/p>\n\n\n
Skip to main content<\/h3>\n\n\n
Screen readers allow users to skip to the main content as long as it wraps it within a
<main><\/code> element. However, those who navigate websites by tabbing don\u2019t benefit from this. Instead, we must create a “skip to main content” anchor link. This link is customarily hidden but revealed once the user makes their first tab (i.e. show on focus).<\/p>\n\n\n\n![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_69172BC482E4A61507CBC00C42BDC8B5C2BA73BD5B5CB79986763479C3E54010_1657125343081_3.png?resize=1024%2C640&ssl=1\")
<\/figure>\n\n\n\nIt would look something like this:<\/p>\n\n\n\n
<!-- anchor -->\n<a id=\"skip-link\" href=\"#main\">Skip to main content<\/a>\n\n<!-- target -->\n<main class=\"main\">\n <!-- main content -->\n<\/main><\/code><\/pre>\n\n\n\n#skip-link {\n position: absolute; \/* remove it from the flow *\/\n transform: translateX(-100%); \/* move it off-screen so that it appears hidden but remains focusable *\/\n}\n#skip-link:focus {\n position: unset; \/* insert it back into the flow *\/\n transform: unset; \/* move it back onto the screen *\/\n}\n\n.main {\n scroll-margin: 1rem; \/* adds breathing room above the scroll target *\/\n}<\/code><\/pre>\n\n\n\nThere are other ways to go about it, of course. Here are a couple of deeper dives on creating skip links.<\/p>\n\n\n\n \t\t\n
\n\n\n - Aim for characters per line:<\/strong> Very few people I know like to work harder than they need to, and that goes for reading too. Rather than using the full viewport width, try to narrow things down and balance that with your larger font size to get fewer<\/em> characters on each line of text. Your sweet spot may vary, though many folks suggest somewhere between 45-75 characters per line to help limit how far the reader\u2019s eye has to work to go from left to right. Chris has a bookmarklet to help count characters<\/a>, but we also have the