Seventh-Day Adventist Church

International Website Framework

Menu

Typography

Typography is an important aspect to any website.

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: 600 24px/24px 'Montserrat';
  margin: 0 0 15px;
  color: #f9b000;
  letter-spacing: 1px;
}

This is an h3 headline

h3 {
  margin: 0 0 45px;
  font: 400 22px/28px 'Merriweather';
  letter-spacing: -1px;
  color: #438390;
}

This is an h4 headline

h4 {
  margin: 0 0 4px;
  font: 400 16px/25px 'Montserrat';
  color: #373635;
  text-transform: uppercase;
}
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;
}

Hero Headings

This the typography for the Hero section of the site.

Example:

<div id="sub-hero">
  <div class="container">
    <h2>INFORMATION</h2>
    <h1>Structure</h1>
  </div>
</div> <!-- End #hero -->

The CSS looks like this:

#sub-hero h1 {
  position: absolute;
  display: block;
  width: 100%;
  height: 126px;
  left: 8.5157895%;
  bottom: -15px;
  font: 400 126px/126px 'Abril Fatface';
  color: #aadbe5;
  z-index: 999;
}

#sub-hero h2 {
  position: absolute;
  bottom: 100px;
  left: 8.5157895%;
  color: #fff;
  font: 600 20px/20px 'Montserrat';
}

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%;
}