1

Do you think it's important that the <h1>, <h2>, <h3> font family and size don't change in whole design?

For example, I need to change the <h3> tags in the design sometimes.Do you think it's right? Or I can design without thinking about the headers?

1
  • What's important is that the headers fulfil the same function. That they convey the same kind of information to the user. If you have one big block of information with a header, and a small block of information in the margin or something, also with a header, the blocks can have different colors, fonts etc, depending on what looks good to you, as long as the headers to both blocks are both recognisable as headers.
    – Mr Lister
    Commented Aug 7, 2017 at 11:54

2 Answers 2

5

Markup should be semantic - Design should not be even a vague consideration at the markup level

You need to understand the separation of visual design and semantic markup. The mere fact that you are considering "changing the h3 tags sometimes" indicates to me that you may not understand this concept.

When coding, forget all notions of what a heading will look like. Thanks to the magical powers of CSS an h1 can be tiny and black, and h5 large and red. It's absolutely irrelevant. The only relevant thing is that the headings describe the content in a semantic way.

Thus ideally each page would have only ONE h1, and as many h2's as it has subheadings, and as many h3's as it has sub-sub headings and so forth.

Code that way, and only afterwards think about how you want those things to look.

While it remains likely that h1's will be "bigger/bolder" than h2's, and h2's bigger and bolder than h3's that may not always be the case, but it would then be the CSS you are using to change that and NOT the tags themselves.

So the answer to the question specifically is:

No it's not important at all. You can have small h1's, large h3's and change that and every other heading on every other page. Although if you do code it semantically it is bound - especially on text heavier pages - to follow a pattern, and styling that pattern of title hierarchies consitently, would have course yield neater design.

Further reading concerning semantic markup:

-3

h1 more bigger size, h2 is medium size, and h3 is the smallest size for their title, you can also design it separately if you want specifically for h3, for example the code you type this: h3{ font-size: 2.5rem; font-family: 'Great Vibes', 'Lato', sans-serif; background-color:#C12D79; }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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