Seventh-Day Adventist Church

International Website Framework

Menu

Typography

Typography is an important aspect to any website. Below are the defaults for each HTML H* element along with a few other typographic options.

Headlines

This is an h1 headline

h1 {
  font: 700 32px/40px 'Montserrat';
  color: #f9b000;
  letter-spacing: -1px;
  margin: 0 0 22px;
  text-transform: uppercase;
}

This is an h2 headline

h2 {
  font: 400 24px/35px 'Merriweather';
  margin: 0 0 30px;
  color: #373635;
}

This is an h3 headline

h3 {
  margin: 0 0 30px;
  font: 600 16px/23px 'Montserrat';
  letter-spacing: -1px;
  color: #f9b000;
  text-transform: uppercase;
}

This is an h3 with an underline headline

h3.divider {
  margin: 0 0 40px;
  padding: 0 0 20px;
  font: 600 16px/23px 'Montserrat';
  letter-spacing: -1px;
  color: #f9b000;
  border-bottom: 4px solid #f9b000;
  text-transform: uppercase;
}

This is an h4 headline

h4 {
  margin: 0 0 20px;
  font: 400 16px/25px 'Merriweather';
  color: #373635;
}
This is an h5 headline
h5 {
  margin: 0 0 15px;
  font-size: 14px;
  color: #9d9d9d;
}
This is an h6 headline
h6 {
  margin: 0 0 10px;
  font-size: 12px;
  color: #9d9d9d;
}

Body Copy

This is a paragraph of body copy. Curabitur volutpat enim sed tellus auctor ornare. Praesent consectetur, turpis eu pellentesque consectetur, libero sapien mollis lorem, eu consectetur metus arcu in sem. Mauris at dui blandit, consequat nibh pulvinar.

This is a second paragraph. Note the bottom margin between the two.

body {
  font: 400 14px/21px 'Merriweather', sans-serif; *font-size:small;
  color: #7c786f;
}
p { margin: 0 0 30px; }

Links and Buttons

This paragraph contains a standard link. This rule applies to all links that are inside a #content element.

#content a {
  color: #438390;
  text-decoration: none;
}
This is a button

<a href="#" class="btn">This is a button</a>
.btn {
  text-decoration: none;
  font: 600 11px/11px 'Montserrat';
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: -1px;
  color: #f9b000 !important;
  border: 2px solid #f9b000;
}

.btn:hover {
  color: #df9e00 !important;
  border-color: #df9e00;
}
This is button with an arrow

<a href="#" class="btn btn-go">This is a button with an arrow</a>
.btn-go {
  padding-right: 36px;
  background: url(../img/btn-go-bg.png) no-repeat 95% 45%;
}