{"id":367370,"date":"2022-08-10T07:30:01","date_gmt":"2022-08-10T14:30:01","guid":{"rendered":"https:\/\/css-tricks.com\/?p=367370"},"modified":"2022-08-10T07:30:05","modified_gmt":"2022-08-10T14:30:05","slug":"designing-for-long-form-articles","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/designing-for-long-form-articles\/","title":{"rendered":"Designing for Long-Form Articles"},"content":{"rendered":"\n
Designing a beautiful \u201carticle\u201d is wrought with tons of considerations. Unlike, say, a homepage, a long-form article is less about designing an interface than it is designing text in a way that creates a relaxed and comfortable reading experience.<\/p>\n\n\n\n
That\u2019s because articles deal with long-form content which, in turn, tends to be valued by a \u201dtime on page\u201d interaction with users. We want someone to read a complete narrative. There\u2019s a natural space between the time someone lands on an article and reads all the words. And hopefully, that space is immersive enough to not only hold a user\u2019s, but provoke thoughts, ideas, and, possibly, actions. At least that\u2019s what I\u2019m hoping as I have your attention and you make your way through the very article you\u2019re reading.<\/p>\n\n\n\n
There\u2019s a balance. On one hand, we hear that \u201cno one reads the Internet.\u201d<\/a> On the other, a long-form article demands careful attention. Considering the current value of content marketing and the growing impatience in users, captivating readers for as long as possible should be a key concern. Let\u2019s take a look at some best practices and examples of incredible article pages to get a better idea of what makes a visually appealing reading experience for long-form articles (without sacrificing user experience), and how we can replicate the effects.<\/p>\n\n\n\n\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 If 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 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 The example above also features Here\u2019s a full example:<\/p>\n\n\n\n But before you reach for the 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 Personally, 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 Using It sure would be nice if we could use the CodePen 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 Screen readers allow users to skip to the main content as long as it wraps it within a It would look something like this:<\/p>\n\n\n\n There 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 Quick wins<\/h3>\n\n\n
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>ch<\/code> unit in CSS to get predictable results.<\/li>1.2<\/code> and 1.5<\/code> seems to be a pretty typical range for long-form content.<\/li><\/ul>\n\n\n\nDesign for extra breathing room<\/h3>\n\n\n
<\/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 than none<\/code> (underline<\/code> in this case), too.<\/p>\n\n\n\ntext-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\na {\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\ntext-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
<\/figure>\n\n\n\n::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\n::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\ninitial-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\nSkip to main content<\/h3>\n\n\n
<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
<\/figure>\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\n