Skip to main content

Font Hierarchy - The Basics of Text Size


We aren’t all graphic designers. We are marketers who need to get a job done. Even if you’re a designer and not a marketer or all of the above, it wouldn’t matter.


Because whoever you are, you need to think like your audience and give them a web page that any human and machine can navigate. Getting this job done starts with a principle called Font Hierarchy.


All text on a landing page should have three levels of text size.



  1. Big text at the top for the heading (H1), consider 48px

  2. Medium sized text for subtitles and section headings (H2-H6), consider 36px.

  3. Regular and readable text for paragraphs ( p ) 12-16px.


The text used should also follow the style guide settings of H1, H2, p, etc. So that web browsers, search engines, devices, and your future self can easily display the text in any condition when needed.


Here is a landing page using 3 levels of font hierarchy to demonstrate what this principle looks like, and a preview within the Unbounce builder.


http://unbouncepages.com/kyle-carline-font-hierarchy/


Happy page building! 📄 😀

Nice, Kyle. Thanks! I do follow these guidelines, but I have never actually ‘labeled’ titles/text with H tags. Does that affect SEO for the page? Where can I label headlines in Unbounce? I don’t see anything about H1, etc. in the font group.

Heading and paragraph tags do effect SEO. When search engines crawl a page for content or when specific sections are shared, browsers look to display headings and paragraphs as snippets to preview the page. For a short-term use landing page it might have very little impact, but I still consider it an important habit to have when building pages.


Check out this section on my example page and you’ll see a gif on where this feature is in the Unbounce builder.

http://unbouncepages.com/kyle-carline-font-hierarchy/#lp-pom-block-80

Oops, I missed that the first time around. Thanks, Kyle! Good stuff.

Great post @Kyle.C !


Honestly this is something that we never do, but we’ll soon start to correct the old LP and take a good habit starting from now.

Thanks @julien_level 😀


If you see any benefits in your data after making the changes, you should share. I would be curious to know.

I’ll try when it’s live 🙂

Reply


Terms & ConditionsCookie settings