For example, you have

  • Website Logo text
  • Home page punchline text (the top most line visitors see describing what the website offers)
  • Details on the punchline
  • Page title text where title can be 'contact us', or 'user profile' and so on
  • Paragraph text
  • Then you have text in buttons (for form submissions)
  • Then form labels, then form input fields
  • You also have navigation bar with login, sign up, etc.
  • Then you have some muted text for information purposes
  • the list goes on and on...

The question is that how do you size (60px or 34px or 18 px or 16px ...) all the above text so that you don't have to set font-size differently every single time! Basically, what should be the relative sizing of the above as it compares to each other so that users have the best user-experience and can clearly see what is important on the webpage, what should be read in detail, etc.

  • 1
    This question appears to be partly about UX and partly about technical implementations in website design. This site deals only with general UX questions, so please limit your question to that focus. You would be better off asking the implementation question on our sister site, stackoverflow.com. – Grubermensch Oct 10 '14 at 5:51
  • Just to be clear, while questions about how you implement font sizes would be in scope on stackoverflow, the question in its current form would not be acceptable there either. If you did some research, tried it yourself, and then still had a specific question about font sizes, that would be appropriate. – user31143 Oct 10 '14 at 6:11
  • Sorry @Grubermensch for the confusion. The question was in fact about what the relative sizes should be of the text at various places (h1, p, form, labels, buttons, etc.). How to assign those values I know and I was not looking for a shortcut for that. The reason I said 'every single time' was because I was sizing <p> on different pages differently instead of having a consistent value of <p> across all the webpages on the site. And hence the question on what should the fixed font-size value of <p>, & label, & input-text, & buttons, and so on. I.e., are there any guidelines on that – dev-vb Oct 10 '14 at 15:30

The amount of effort you put into something is the equal value you will get out of it. IE: If you want mathematics to do the work for you instead of having to go through each environment and do it yourself by hand, you will get the equal quality from that mathematics. A similar example is kerning (the space between characters in a font). You can use the default metric kerning or you can kern every individual character by hand. The first is faster but inevitably will [most probably] look less good than doing it by hand.

With that being said, my own guideline is to use the golden ratio with a base of 3. In web design I utilize a baseline of 13 or 21 and font sizes which are divisible by 3. IE: 9, 12, 18, 21, 24, etc. This always produces a nice set of spacing and size relativity.

Unfortunately if you are looking for a way for CSS to handle this for you without you inputting the numbers there isn't a very good suggestion out there. That being said, my own personal suggestion would be to utilize SASS so you can globally change these numbers on a whim when you need to in one place, so it will retroactively change globally when you recompile the CSS.

If that is too in depth of a solution, you should separate the font CSS from the style CSS and utilize that to quickly change the font sizes. My suggestion would be to use @media with current global screen sizes to tell the font size when to change and how large it should be. This is because if you do it via percentages so it resizes and becomes smaller with the table, no one will be able to read it and eventually your web page is useless because it's too hard to use.

To take SOME of the work out of the above, you can utilize Bootstrap which does a lot of these things for you. However; you have to utilize their classes in your code, so you'll have to make sure your HTML is using their classes to work properly.

TLDR; There's no way to put in less time and get a quality solution like you are wanting. You have to put in the work to be certain your application is easy to use and that the user experience is a quality one.

  • Thanks @Kai for the detailed answer. Yes, I was looking for something like 'golden ratio' that you mentioned in your answer to size text in h1, p, forms, labels, etc. I have no problem assigning different font-sizes to all these elements (h1, p, etc.). I just didn't know what should be the values (1.5em or 1em or 0.9em, etc.) relative to each other. I will look at the golden ratio and see how that looks. Because currently I was just assigning a value, refreshing the page, see how it looks and then change it. It was taking too much time. – dev-vb Oct 10 '14 at 15:26
  • No problem @dev-vb :) I hope it was helpful. If you're looking for something even faster you can try the Fibonacci Sequence as well. The Fibonacci Sequence is based upon the Golden Ratio but is already a set of numbers. Now the only thing you will have to decide is if you want to set that sequence as EM or what the EM actually renders in pixels (if that makes sense). I don't have any research to say which of those two is better so as you said before, probably trying both and seeing which visually looks better is the way to go there. Best of luck! – AzKai Nov 4 '14 at 13:39

Not the answer you're looking for? Browse other questions tagged or ask your own question.