How do you define typography styles in your designs?

Question

When defining a style guide, which of the following is most common when naming layout components?

1. Stating the specific H-levels to be used (i.e. H1, H2, etc.)
2. Create your own set of naming conventions (e.g. "Top-level title", "Subtitle", "Body text")?

If you use the first option, it seems you'd run into cases where those rules don't fit. For example, on one page H1 is good, but on another page, it needs to be modified to fit well in the page.

Essentially, how specific should a style guide be?

Answer 1

For SEO and accessibility reasons, it's good practice to use <h*> elements where appropriate. I usually use <h1> for the site title, <h2> for the page title, and <h3> for sections. You can play around with it though, and change the styles for each how you need (for example my <h1> and <h2> styles are often almost equivalent.

Answer 2

Designers generally keep the layout consistent with respect to spacing, heading sizes and color etc. Although, it is possible to have different style on two different pages. I would like to suggest following things while making style guideline:

1. Class name must be functional not random or not to be defined with the property inside

2. Always use H1 for page heading, H2 for section, H3 for subsection and so on. Make sure you use H1-H6 in a sequence for better SEO and Accessibility. And, there should not be more than 1 H1 per page

Now, if you want two or more styles for H1. Create size classes like: small, medium, large, extra-large and color classes could be named as primary-text, secondary-text and so on. This way you will have more control over cascading and less use of !important attribute will make file clean and light.

You may refer to Bootstrap framework's naming convention for inspiration.

Answer 3

Yes, I still use the H tags on my HTML. I understand that the H1 on the homepage can sometimes be different that on the subpages. Whenever there are some subpages that need different H1 style, I give these H1 tags a class (e.g. h1.details {...}) or make the H1 adjustment dependant on the master class (e.g. .details h1 {...})

It is important to keep one H1 tag on a page because of the SEO purposes.

E.g. The base font size is 16px H1 - 2em; H1.details - 1.5em; H2 - 1.5em; H3 - 1.125em etc..

However, this is just my approach. I hope it helps.

Answer 4

The HTML web standard does not define styling of <hx> elements unless there is a separate paper somewhere for that which I don't recall. It's been so long that I just don't remember but browser vendors pretty much have set upon an agreed CSS for those elements. Such styling is inserted with CSS, not HTML.

HTML is the structure of a page, not its style, layout or design. If the content is not the main heading for a page then it should not be a <h1>. The other elements are lower level headings for their sections and the thought behind how to structure those are not different than outlining a term paper one may have written in school.

When you get into the style of the elements, as in color, font, placement, etc., that has nothing to do with the HTML structure.