Section Headers
Last updated
Was this helpful?
Last updated
Was this helpful?
Section headers help divide up your content and organize it so readers can quickly understand what your content is about and decide which areas (if any) they want to dig more into. Most people do this using different-sized header fonts, but you can make these dividers even more noticeable by stylizing them, creating almost a mini cover image for different sections of the piece.
You can also adjust background color in the component CSS.
Select the code snippet with the same number of columns as in the layout grid of your post.
You can also adjust shapes and colors in the snippet CSS.
Make sure to use a larger font for section headings, even if you’re also using other design elements to help them stand out. Readers are used to the visual hierarchy of content being denoted by larger fonts for headers.
Play with incorporating other visual distinctions—like a different font or background color, a different typeface or bolder font style, underlining, or even icons, illustration, or imagery to help users more quickly identify different sections of the content.
Make sure your headings provide a succinct description of what the following section of content is about.
Consider including a short summary of key points in the section as part of your heading design to further support readers who are scanning your work.
Don’t make your headings too big compared to the text around them—otherwise they may distract too much or look like advertisements that the user will skip over.
Don’t have different layouts and text justification for each of your headings—giving your readers a predictable layout will make it easier for them to scan. Create a design for your section headings and then use the same snipped throughout the piece to keep things consistent.
Select the code component with the same number of columns as in the layout grid of your post. Replace style id `stk-theme_00000` with yours before adding it to your Style Manager. For more info, please go to the page.
Replace style id `stk-theme_00000` with yours before adding it to your Style Manager. For more info, please go to the page.
According to Nielsen Norman Group, to see what’s relevant to them, and one common scanning style—called —involves quickly scanning the page for the most important information. Well-designed and written headings help break up the text and highlight the most valuable information, making it easier for scanners to understand what your content is about and decide which sections they want to read more deeply, thereby improving content engagement and comprehension.
Setka
Nielsen Norman Group
