facebook-pixel

ryan@getoptimizednow.com

Free Consultation

(859) 888-0841

Ryan Sciamanna is an entrepreneur in Greater Cincinnati. He started his 1st business in 2009 & sold it in 2018. He's been playing around on the internet ever since making passive income & providing web services to businesses.

Responsive typography is a little experiment I’ve had on my mind for the past couple of weeks.

As I did my research to play around with different CSS code snippets to control font-size, I realized I am not familiar enough with some of these ‘newer’ methods such as clamp.  Code is always evolving and improving, some old code becomes obsolete over time.  When new code is introduced the browsers begin to support it as soon as they can.

Until there is enough ‘browser support’ it is a bad idea to use these new CCS code snippets.  Browser support refers to if the browser can read that code and execute it.  If you’re using new code and someone is viewing your site on an unsupported browser, they are likely to have a poor experience.

How I Handle Typography Sizing For All Screen Sizes

I KISS it!  Yes…keep it stupid silly!  😂  We have fun while we learn at Optimized!

No…what I really do is keep is freaking simple!

Of course, there are exceptions to my rules, but in general quality web design is going to use consistent font sizes.  As you go from page to page on a website, wouldn’t it be odd if the text was always a different font size?  Even, on the same page, you need consistency although various elements can have their own unique font-size.  These unique font-sizes should typically be carried throughout your site.

My Go-To Responsive Text, Header, and List Styling in 2021

We build WordPress websites using the Divi Theme unless a Shopify store which is typically our go-to for eCommerce websites.  Divi introduced what they call ‘text presets’ towards the middle to end of 2020.  This made gaining consistent control of our text sizes much easier to manage.

I’ve found these values to work well with most fonts, obviously, your font choice could affect the values you choose to use.

Line Height

I like using 1.2 or 1.3 for the line-height for headers and text alike.  Often, on my lists, I’ll bump it up to 1.6 to possibly 2.

Header Font Size

For my h1 tags, I like to use 35px for desktop and tablets, then 30px for mobile devices, if not even a little smaller like 28px or 26px on mobile.  I think there are use cases for larger header font-size on mobile, and certainly desktop, but they should be used sparingly and to really highlight a CTA or main point.

As for the h2-h6 tags, I step down the sizing ensuring they decrease in size.  For example, h2 tags could be 30px on desktop and tablet and 26px on mobile.  If my h1 tag is using 26px on mobile, I’d make my h2 24px.

Paragraph Font Size

I’ve realized recently that most of the sites and apps I think look good on mobile use a pretty small font size.  My go-to is 16px on desktop and tablet and 14 px on mobile.

List Text Styling

I like my lists to use the same font size as my paragraph text.  I already noted often I’ll bump up the line spacing on my lists.  Another thing I do to my lists, whether ordered lists or unordered lists, is use list indent so they are offset from the left edge of the rest of the paragraph and header text.

Playing Around With Different Font-Size Code Below

As I mentioned starting off this blog post, clamp just got enough browser support to think about using it to create responsive typography.  I’m also not very familiar with min() and max() or calc(), not to mention I never thought about using vw for font-size.  I don’t typically think of vw for anything although I’ll use vh to set container sizes often.

As you can see by the code snippets below, using any of these methods besides using vw makes the code a lot more complicated.  Not that it is a bad thing, is it needed?

Please note the text below very well may not display properly on all screen sizes!

This was an experiment to introduce you to various methods of achieving responsive typography.  If the text is jacked below, it just further proves my point on how important it is to make sure that yourself or your web designer knows WTF they are doing!

All headers and text below are set to default to 1em font-size and 1.2 line-height.

The screenshot below shows you how jacked up the text was as I was playing around with all this!

Responsive text important screenshot

Responsive Typography Using 1.5 vw on Headers

This is paragraph text using .9 vw for body text sizing similar to the header is in this example.  This is another sentence so the text wraps on the screen for greater effect.

.txt-vw h3 {
  font-size: 1.5vw !important;
}

.txt-vw 9 {
  font-size: .9vw !important;
}

Responsive Typography Using calc() and VW

This is paragraph text using calc() and VW for body text sizing similar to the header is in this example.  This is another sentence so the text wraps on the screen for greater effect.

.calc-vw-h {
  font-size: calc(1em + .55vw) !important
}

.calc-vw-p {
  font-size: calc(1em + .01vw) !important
}

Responsive Typography Using Media Queries, calc(), and VW

This is paragraph text using media queries, calc(), VW for body text sizing similar to the header is in this example.  This is another sentence so the text wraps on the screen for greater effect.

.fluid-text h3 {
font-size: 3em !important;
}

.fluid-text p {
  font-size: 1em !important;
}

@media all and (min-width: 480px) {
.fluid-text h3 {
    font-size: calc(3em + 40 * ((100vw – 480px) / 500)) !important;
  }

.fluid-text p {
    font-size: calc(1em + 10 * ((100vw – 480px) / 500)) !important;
  }

}

@media all and (min-width: 980px){
  .fluid-text h3 {
    font-size: calc(1em + 10px) !important;
  }

.fluid-text p {
    font-size: calc(1em + 1px) !important;
  }

}

Responsive Typography Using min() and max()

This is paragraph text using min() and max() for body text sizing similar to the header is in this example.  This is another sentence so the text wraps on the screen for greater effect.

.min-max-txt h3 {
  min(max(40px, 4vw), 120px) !important;
}

.min-max-txt p {
  font-size: min(max(16px, 4vw), 16px) !important;
}

Responsive Typography Using clamp()

This is paragraph text using clamp() for body text sizing similar to the header is in this example.  This is another sentence so the text wraps on the screen for greater effect.

.clamp-txt h3 {
  font-size: clamp(30px, 8vw, 30px) !important;
}

.clamp-txt p {
  font-size: clamp(16px, 4vw, 16px) !important;
}