React blog content section layouts

Measure is the setting that matters most and the one people get wrong. A line of body text should hold roughly 60 to 75 characters, which at an 18px font size lands around 680px of content width. Set it with max-w-prose or a ch-based width rather than a pixel value, so it tracks your font size if you change it later. Full-width paragraphs on a 27 inch monitor are physically tiring to read, and the fix is one class.

Get the heading hierarchy right because two different systems depend on it. Exactly one h1 for the post title, then h2 for sections and h3 for subsections with no levels skipped, since screen reader users navigate by heading level and a table of contents generated from your Markdown will produce nonsense if the levels jump. Slugify each heading into an id and render an anchor link on it. That gives people a way to link to a specific section, which is the single most useful affordance on a long technical post.

A sticky table of contents needs two details to feel right. Highlight the current section with an IntersectionObserver on your headings rather than by comparing scroll offsets, and set scroll-margin-top on every heading equal to the height of your sticky header, otherwise every anchor click lands with the title hidden underneath the navbar. On mobile the sidebar has nowhere to live, so collapse it into a floating button that opens a sheet, which is what the TOC block here does. Reserve the sidebar column even while the TOC is empty so the article does not shift.

For the body styles, decide once whether you are using the typography plugin or hand-writing the rules. The plugin gets you sane defaults quickly and then fights you on anything custom, while hand-written rules mean you own every element including the ones you forget until a post uses them. Either way, test with an article that contains a wide code block, a table, a blockquote and a nested list. Set line-height around 1.65 for body copy, tighten it for headings, add overflow-x-auto on pre and never justify text on the web.