Also is there stuff you think a text heavy page should have? I know font controls (font size, line height, font-switcher) is one of them and I got that figured out but anything else?
I’m working on making the page mobile compatible as well but I’m primarily focusing on functionality first so it’s kinda bare bones.
You might want to consider body width on large screens as well. Since laptops and desktops tend to have 16:9 or 16:10 widescreen displays, letting the text stretch across the entire screen can make it hard for some people to read it.
this resource reads as a little stuffy, but it does have some good guidelines for text on the web (especially in reference to starbreaker’s point about line length - i shoot for 60-100 characters) https://practicaltypography.com/
As far as I know, neither OpenDyslexic nor Atkinson Hyperlegible are part of any operating system’s font stack, so consider adding Comic Sans MS as well.
The other day I came across a list of readable fonts someone compiled: Inclusive fonts.
I second the suggestion to be aware of line length. It’s a problem on huge screens, but it can also be too short on small screens if the padding/margins don’t adjust or work well. I’ve seen some mobile sites that squish text lines to only a couple words long on mobile, which is hard to read.
Avoiding “justified” text is another general guideline, since it can create “rivers” of while space, especially on smaller screens.
Definitely agree with what everyone else brought up about line length. My lazy way to make text heavy pages for both mobile and desktop is setting the body width to something like 90% (which will mainly affect mobile) and then a max-width in pixel units (which will mainly affect desktops) This may not be fool-proof tho.
Also big agree with @eladnarra about justified text. Its very hard for me to read, especially when the screen or text box is narrow.
It looks like you already use enough paragraph elements to avoid making a long block of text. Heading elements are also nice for breaking up content! If you define a size for your text be sure to do it in em units (1em ~ 16px) so that it will automatically adjust if a user increases the font size in their browser. If its really long you may want to make a table of contents that links to sections ^^
I think ensuring that your site works with reader mode is critical. That way people who for whatever reason can not read your page properly can use that instead and read your page in their preferred way.
Reader mode seems to work reasonably well as long as you’ve got your text inside a <main> or <article> element and aren’t doing anything too wild with JavaScript and iframes.
Yeah that’s a good point, thanks for reminding me! When I work on the CSS I’ll need to preview it on 16:9/16:10 once in a while. That might not be an issue though since I use a laptop that’s 1920x1080 so hopefully that’ll help.
I’m fully aware.
I plan to download them and make OpenDyslexic & Atkinson Hyperlegible @font-face’s. I’ve heard mixed opinions on comic sans MS on another forum a while back, some people like it, some people find it hard to read. That’s why I’m planning to do OS fonts and font-faces.
ough I better check how I sized my fonts on those pages. IIRC I might’ve used rem instead of em so I better check that out.
I’ll try to get this working.
I still don’t understand how it works but thankfully on firefox & edge my blogpage seems to have reader mode working. So I’m going to look into that and figure out what it has that the text heavy page.
rem units are based on the root element’s font size and work as multipliers with 1rem being 1x the root element’s font size, so if you don’t provide a font size for the html or body elements rem units might not work correctly.
This sets the root font size to 16px, which is the standard browser default, and also makes the page responsive to user settings, as the user might access the browser’s preferences window and choose a larger or small font size.
