I'm a designer, working on a project to redesign an E-commerce site.

To improve readability, I would like to increase the font size as well as white space etc.

I would like to use a Type scale to do this, so the scale between H1-Body feels natural.

I'm currently using the 'Major Third' but I was wondering if anyone could shed some light on the most common used Type scale for E-commerce sites?

  • 1
    Keep in mind that questions of font size, including how to scale one heading to another and to body type, is part of the overall design chalenge. All aspects affect all other aspects. Font size can (or should) change significantly based on column width, amount of white space, element contrast (dark headlines/light background vs. light headlines/dark background. User feedback on the final overall design is more important, ultimately, than any formula or guideline. – user8356 Jan 17 '20 at 19:22
  • Thanks @user8356. We will be user testing the design, I was trying to get as close as possible first time around :) – Wuggie Feb 3 '20 at 16:26
  • @Wuggie -- That sounds good. I don't have a recommended scale for body-heading on e-commerce sites, but in general, the lowest-level heading would be the same as the body, but in bold, and then each higher level in the hierarchy would be 4- to 6-points larger -- therefore, as an example, body = 10 pt, h5 = 10pt bold, h4 = 14pt (bold), h3 = 18 pt, h2 = 22 or 24 pt., and h1 = 30 to 36 point, as a rough example. – user8356 Feb 3 '20 at 18:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.