Posted on: Thursday, July 14th, 2016
Examples of html and styles on the website
Header 2
Header 3
Header 4
Header 5
We need to use our “header” tags carefully (h1,h2,h3,h4,h5). Notice what the set of header tags do. They change the font from our brand’s Cachet Book to Cachet Bold, and in a few cases force “ALL CAPS.” The line height varies for some of the headers. It’s important to note that we are not using the h2 tags in the body copy of our post, because the Post Title is using that.
This is regular paragraph text. Also, when you put a block of text within paragraph tags, pay attention to what that is doing. It applies our Cachet Book font, which our brand uses for regular text copy. More importantly, notice what the p tags do with spacing. There is a margin added at the bottom of the paragraph, creating some extra spacing to separate it from the next paragraph.
If you were to instead use a br tag to force a line break,
there is no extra spacing between the lines.
Here is some paragraph text with some bolding. This is simple, bolded text. While the text is bolder, we haven’t switched to our Brand’s special “Benefit Statement” font, Cachet Bold.
Regular paragraph text with a link. Lorem ipsum dolor sit amet.
Benefit Statement headings are an important part of our brand messaging strategy, and they have a unique styling that our website uses in some areas. Notice the difference when you add a line break into a header:
