CODEWITHSUNDEEP
htmlcss
Reece
Reece

Reputation: 2701

Font sizes on different pages

Ok so I'm not sure if questions like this are allowed on here so if not please tell me and I will remove it. My question is about whether font sizes should be the same on all pages.

Here's my situation. I have several headings spread across multiple pages on a website which I am creating. They all use the same styles but as they all have different character lengths when the screen gets smaller some of the headings start breaking at points which just make the website look rubbish. To make a couple of these heading look good I have had to use a font size of 16px, which isn't ideal as the the body text is 16px but still it looks better than what it did look like.

So what would you usually do in this situation? Would you keep all the headings the same size to keep in theme with the other pages? or is it ok to have some smaller than others? will the user even notice?

Upvotes: 0

Views: 768

Answers (3)

AKNair
AKNair

Reputation: 1587

As Albert mentioned in previous response, you should totally keep the headlines in the same size.

As a part of best practises "always use ems to set font sizes". You can update/ modify the size of body text with respect to your header font size.

For example: keep header size as 2em and make body text size as 1em or 1.2em as per your design requirements.

For further readings on this you can refer: W3S guidelines for font sizes

Upvotes: 1

Eddy Vuillaume
Eddy Vuillaume

Reputation: 64

You can use media queries to redefine your size like this :

    @media screen and (max-width: 640px) {
  .yourClass {
   font-size:14px;
  }
}

Upvotes: 0

Quentin Albert
Quentin Albert

Reputation: 590

You should totally keep the headlines in the same size. There is no reason to scale it down. Sometimes there are longer headlines that's a genuine use case there is no reason to scale down the font-size.

Upvotes: 0

Related Questions