Kontakt

Christina Riedl

Telefon: 07223 967-326

Telefax: 07223 967-7326

E-Mail: christina.riedl@schoeck.de

Nadine Seifried

Telefon: 07223 967-128

Telefax: 07223 967-7128

E-Mail: nadine.seifried@schoeck.de

Zeichen und Schriften Headlines

Die unterschiedlichen Headlines dienen zur Strukturierung einzelner Seitenabschnitte und Texte.

Verwendung

H1 wird immer als erste Headline auf einer Seite verwendet und links ausgerichtet. Besonderheit: Die H1 umfasst zusätzlich die Subheadline 1 (nur notwendig, sofern auch die Subheadline relevante Keywords enthält). Die Höhe der Subheadline entspricht 75% der Höhe der Headline.

Web-Headlineverhältnis

H2 dient als Titel der einzelnen Elemente oder als Überschrift für weitere Seiteninhalte und wird mittig ausgerichtet.

H3 und H4 dienen zur semantischen Strukturierung innerhalb eines Textabschnittes. H3 zur Strukturierung von Texten beim Produkt-Einstieg. H4 als weiter untergeordnete Zwischenüberschrift, zur Strukturierung aller weiteren Texte.

Zur optischen Trennung verschiedener Inhalte auf einer Seite können Abschnittsüberschriften als größere H2-Variante verwendet werden.

Hinweis

Keine Verlinkungen in der Überschrift; stattdessen weiterführende Links unter Textabschnitt ergänzen.

Überschriften nicht fett oder kursiv.

Die semantische Überschriften-Hierarchie sollte eingehalten werden. Dabei kann das Layout und die Semantik der Headlines auch unabhängig voneinander sein.

Vorschau

HTML

                
                  <div class="ci_refresh">

  <div class="header_wrapper">
    <div class="h2 chapter-headline">Abschnittsüberschrift</div>
  </div>

  <div class="header_wrapper">
    <h1>Headline 1<span class="subheader">Subheadline 1</span></h1>
  </div>

  <div class="header_wrapper">
    <h2>Headline 2</h2>
    <h3 class="subheader">Subheadline 3</h3>
  </div>

  <div class="header_wrapper">
    <h3>Headline 3</h3>
    <h4 class="subheader">Subheadline 4</h4>
  </div>

  <div class="header_wrapper">
    <h4>Headline 4</h4>
    <h5 class="subheader">Subheadline 5</h5>
  </div>

  <div class="header_wrapper">
    <h5>Headline 5</h5>
    <h6 class="subheader">Subheadline 6</h6>
  </div>

  <div class="header_wrapper">
    <h6>Headline 6</h6>
    <h6 class="subheader">Subheadline 6</h6>
  </div>

</div>

CSS

              .header_wrapper {
  margin-bottom: 30px;
}
@media screen and (max-width: 767px) {
  .header_wrapper {
    margin-bottom: 22px;
  }
}

/* headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #0069b4;
  font-family: 'CorpidCd_TT8', Arial;
  font-weight: normal;
  font-style: normal;
  margin-top: 0;
  margin-bottom: 0;
}
h1.subheader,
h1 .subheader,
h2.subheader,
h2 .subheader,
h3.subheader,
h3 .subheader,
h4.subheader,
h4 .subheader,
h5.subheader,
h5 .subheader,
h6.subheader,
h6 .subheader {
  display: block;
  color: #f9b200;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: inherit;
  font-family: inherit;
}

h1,
.h1 {
  font-size: 28px;
  font-size: 1.75rem;
  line-height: 33px;
  line-height: 2.0625rem;
}
@media screen and (max-width: 767px) {
  h1,
  .h1 {
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 29px;
    line-height: 1.8125rem;
  }
}
@media screen and (max-width: 400px) {
  h1,
  .h1 {
    font-size: 23px;
    font-size: 1.4375rem;
    line-height: 28px;
    line-height: 1.75rem;
  }
}
@media screen and (max-width: 350px) {
  h1,
  .h1 {
    font-size: 22px;
    font-size: 1.375rem;
    line-height: 27px;
    line-height: 1.6875rem;
  }
}
.ci_refresh h1.subheader,
.ci_refresh h1 .subheader, .ci_refresh
.h1.subheader,
.ci_refresh
.h1 .subheader {
  font-size: 21px;
  font-size: 1.3125rem;
  line-height: 24.75px;
  line-height: 1.54688rem;
}
@media screen and (max-width: 767px) {
  .ci_refresh h1.subheader,
  .ci_refresh h1 .subheader, .ci_refresh
  .h1.subheader,
  .ci_refresh
  .h1 .subheader {
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 21.75px;
    line-height: 1.35938rem;
  }
}
@media screen and (max-width: 400px) {
  .ci_refresh h1.subheader,
  .ci_refresh h1 .subheader, .ci_refresh
  .h1.subheader,
  .ci_refresh
  .h1 .subheader {
    font-size: 17.25px;
    font-size: 1.07813rem;
    line-height: 21px;
    line-height: 1.3125rem;
  }
}
@media screen and (max-width: 350px) {
  .ci_refresh h1.subheader,
  .ci_refresh h1 .subheader, .ci_refresh
  .h1.subheader,
  .ci_refresh
  .h1 .subheader {
    font-size: 16.5px;
    font-size: 1.03125rem;
    line-height: 20.25px;
    line-height: 1.26563rem;
  }
}

h2,
.h2 {
  font-size: 25px;
  font-size: 1.5625rem;
  line-height: 29px;
  line-height: 1.8125rem;
}
@media screen and (max-width: 767px) {
  h2,
  .h2 {
    font-size: 23px;
    font-size: 1.4375rem;
    line-height: 28px;
    line-height: 1.75rem;
  }
}
@media screen and (max-width: 400px) {
  h2,
  .h2 {
    font-size: 22px;
    font-size: 1.375rem;
    line-height: 27px;
    line-height: 1.6875rem;
  }
}
@media screen and (max-width: 350px) {
  h2,
  .h2 {
    font-size: 21px;
    font-size: 1.3125rem;
    line-height: 26px;
    line-height: 1.625rem;
  }
}
h2.enlarged,
.h2.enlarged {
  font-size: 31px;
  font-size: 1.9375rem;
  line-height: 36px;
  line-height: 2.25rem;
  margin-bottom: 50px;
}
@media screen and (max-width: 767px) {
  h2.enlarged,
  .h2.enlarged {
    margin-bottom: 25px;
  }
}
@media print {
  h2.enlarged,
  .h2.enlarged {
    margin-bottom: 20px;
  }
}
.ci_refresh h2.subheader,
.ci_refresh h2 .subheader, .ci_refresh
.h2.subheader,
.ci_refresh
.h2 .subheader {
  font-size: 18.75px;
  font-size: 1.17188rem;
  line-height: 21.75px;
  line-height: 1.35938rem;
}
@media screen and (max-width: 767px) {
  .ci_refresh h2.subheader,
  .ci_refresh h2 .subheader, .ci_refresh
  .h2.subheader,
  .ci_refresh
  .h2 .subheader {
    font-size: 17.25px;
    font-size: 1.07813rem;
    line-height: 21px;
    line-height: 1.3125rem;
  }
}
@media screen and (max-width: 400px) {
  .ci_refresh h2.subheader,
  .ci_refresh h2 .subheader, .ci_refresh
  .h2.subheader,
  .ci_refresh
  .h2 .subheader {
    font-size: 16.5px;
    font-size: 1.03125rem;
    line-height: 20.25px;
    line-height: 1.26563rem;
  }
}
@media screen and (max-width: 350px) {
  .ci_refresh h2.subheader,
  .ci_refresh h2 .subheader, .ci_refresh
  .h2.subheader,
  .ci_refresh
  .h2 .subheader {
    font-size: 15.75px;
    font-size: 0.98438rem;
    line-height: 19.5px;
    line-height: 1.21875rem;
  }
}

h3,
.h3 {
  font-size: 23px;
  font-size: 1.4375rem;
  line-height: 28px;
  line-height: 1.75rem;
}
@media screen and (max-width: 767px) {
  h3,
  .h3 {
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 25px;
    line-height: 1.5625rem;
  }
}
@media screen and (max-width: 400px) {
  h3,
  .h3 {
    font-size: 19px;
    font-size: 1.1875rem;
    line-height: 22px;
    line-height: 1.375rem;
  }
}
@media screen and (max-width: 350px) {
  h3,
  .h3 {
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 21px;
    line-height: 1.3125rem;
  }
}
.ci_refresh h3.subheader,
.ci_refresh h3 .subheader, .ci_refresh
.h3.subheader,
.ci_refresh
.h3 .subheader {
  /* base fontsite from h2! */
  font-size: 18.75px;
  font-size: 1.17188rem;
  line-height: 21.75px;
  line-height: 1.35938rem;
}
@media screen and (max-width: 767px) {
  .ci_refresh h3.subheader,
  .ci_refresh h3 .subheader, .ci_refresh
  .h3.subheader,
  .ci_refresh
  .h3 .subheader {
    font-size: 17.25px;
    font-size: 1.07813rem;
    line-height: 21px;
    line-height: 1.3125rem;
  }
}
@media screen and (max-width: 400px) {
  .ci_refresh h3.subheader,
  .ci_refresh h3 .subheader, .ci_refresh
  .h3.subheader,
  .ci_refresh
  .h3 .subheader {
    font-size: 16.5px;
    font-size: 1.03125rem;
    line-height: 20.25px;
    line-height: 1.26563rem;
  }
}
@media screen and (max-width: 350px) {
  .ci_refresh h3.subheader,
  .ci_refresh h3 .subheader, .ci_refresh
  .h3.subheader,
  .ci_refresh
  .h3 .subheader {
    font-size: 15.75px;
    font-size: 0.98438rem;
    line-height: 19.5px;
    line-height: 1.21875rem;
  }
}

h4,
.h4 {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 25px;
  line-height: 1.5625rem;
}
@media screen and (max-width: 767px) {
  h4,
  .h4 {
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 22px;
    line-height: 1.375rem;
  }
}
@media screen and (max-width: 400px) {
  h4,
  .h4 {
    font-size: 17px;
    font-size: 1.0625rem;
    line-height: 21px;
    line-height: 1.3125rem;
  }
}
@media screen and (max-width: 350px) {
  h4,
  .h4 {
    font-size: 16px;
    font-size: 1rem;
    line-height: 20px;
    line-height: 1.25rem;
  }
}
.ci_refresh h4.subheader,
.ci_refresh h4 .subheader, .ci_refresh
.h4.subheader,
.ci_refresh
.h4 .subheader {
  /* base fontsize from h3 */
  font-size: 17.25px;
  font-size: 1.07813rem;
  line-height: 21px;
  line-height: 1.3125rem;
}
@media screen and (max-width: 767px) {
  .ci_refresh h4.subheader,
  .ci_refresh h4 .subheader, .ci_refresh
  .h4.subheader,
  .ci_refresh
  .h4 .subheader {
    font-size: 15px;
    font-size: 0.9375rem;
    line-height: 18.75px;
    line-height: 1.17188rem;
  }
}
@media screen and (max-width: 400px) {
  .ci_refresh h4.subheader,
  .ci_refresh h4 .subheader, .ci_refresh
  .h4.subheader,
  .ci_refresh
  .h4 .subheader {
    font-size: 14.25px;
    font-size: 0.89063rem;
    line-height: 16.5px;
    line-height: 1.03125rem;
  }
}
@media screen and (max-width: 350px) {
  .ci_refresh h4.subheader,
  .ci_refresh h4 .subheader, .ci_refresh
  .h4.subheader,
  .ci_refresh
  .h4 .subheader {
    font-size: 13.5px;
    font-size: 0.84375rem;
    line-height: 15.75px;
    line-height: 0.98438rem;
  }
}

h5,
.h5 {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 22px;
  line-height: 1.375rem;
}
@media screen and (max-width: 767px) {
  h5,
  .h5 {
    font-size: 17px;
    font-size: 1.0625rem;
    line-height: 21px;
    line-height: 1.3125rem;
  }
}
@media screen and (max-width: 400px) {
  h5,
  .h5 {
    font-size: 16px;
    font-size: 1rem;
    line-height: 20px;
    line-height: 1.25rem;
  }
}
.ci_refresh h5.subheader,
.ci_refresh h5 .subheader, .ci_refresh
.h5.subheader,
.ci_refresh
.h5 .subheader {
  /* base fontsize from h4 */
  font-size: 15px;
  font-size: 0.9375rem;
  line-height: 18.75px;
  line-height: 1.17188rem;
}
@media screen and (max-width: 767px) {
  .ci_refresh h5.subheader,
  .ci_refresh h5 .subheader, .ci_refresh
  .h5.subheader,
  .ci_refresh
  .h5 .subheader {
    font-size: 13.5px;
    font-size: 0.84375rem;
    line-height: 16.5px;
    line-height: 1.03125rem;
  }
}
@media screen and (max-width: 400px) {
  .ci_refresh h5.subheader,
  .ci_refresh h5 .subheader, .ci_refresh
  .h5.subheader,
  .ci_refresh
  .h5 .subheader {
    font-size: 12.75px;
    font-size: 0.79688rem;
    line-height: 15.75px;
    line-height: 0.98438rem;
  }
}
@media screen and (max-width: 350px) {
  .ci_refresh h5.subheader,
  .ci_refresh h5 .subheader, .ci_refresh
  .h5.subheader,
  .ci_refresh
  .h5 .subheader {
    font-size: 12px;
    font-size: 0.75rem;
    line-height: 15px;
    line-height: 0.9375rem;
  }
}

h6,
.h6 {
  font-size: 17px;
  font-size: 1.0625rem;
  line-height: 21px;
  line-height: 1.3125rem;
}
@media screen and (max-width: 991px) {
  h6,
  .h6 {
    font-size: 16px;
    font-size: 1rem;
    line-height: 20px;
    line-height: 1.25rem;
  }
}
.ci_refresh h6.subheader,
.ci_refresh h6 .subheader, .ci_refresh
.h6.subheader,
.ci_refresh
.h6 .subheader {
  /* base fontsize from h5 */
  font-size: 13.5px;
  font-size: 0.84375rem;
  line-height: 16.5px;
  line-height: 1.03125rem;
}
@media screen and (max-width: 767px) {
  .ci_refresh h6.subheader,
  .ci_refresh h6 .subheader, .ci_refresh
  .h6.subheader,
  .ci_refresh
  .h6 .subheader {
    font-size: 12.75px;
    font-size: 0.79688rem;
    line-height: 15.75px;
    line-height: 0.98438rem;
  }
}
@media screen and (max-width: 400px) {
  .ci_refresh h6.subheader,
  .ci_refresh h6 .subheader, .ci_refresh
  .h6.subheader,
  .ci_refresh
  .h6 .subheader {
    font-size: 12px;
    font-size: 0.75rem;
    line-height: 15px;
    line-height: 0.9375rem;
  }
}

.chapter-headline {
  text-align: center;
  font-size: 31px;
  font-size: 1.9375rem;
  line-height: 36px;
  line-height: 2.25rem;
}
.ci_refresh .chapter-headline.subheader,
.ci_refresh .chapter-headline .subheader {
  font-size: 23.25px;
  font-size: 1.45313rem;
  line-height: 27px;
  line-height: 1.6875rem;
}

SCSS

              @import "../general/_general";

.header_wrapper {
  margin-bottom: 30px;

  @media screen and (max-width: $screen-xs-max) {
    margin-bottom: 22px;
  }
}

/* headings */
@include headings {
  color: $blue;
  @include corpid-cd-heavy;
  margin-top: 0;
  margin-bottom: 0;

  &.subheader,
  .subheader {
    display: block;
    color: $orange;
  }

  a {
    color: inherit;
    font-family: inherit;
  }
}

$ci-refresh-header-factor: 1;
$ci-refresh-subheader-factor: 0.75;

@mixin h1() {
  @include rem-font-size(28);
  @include rem-line-height(33);

  @media screen and (max-width: $screen-xs-max) {
    @include rem-font-size(24);
    @include rem-line-height(29);
  }

  @media screen and (max-width: 400px) {
    @include rem-font-size(23);
    @include rem-line-height(28);
  }

  @media screen and (max-width: 350px) {
    @include rem-font-size(22);
    @include rem-line-height(27);
  }

  .ci_refresh & {
    &.with_subheader {
    }

    &.subheader,
    .subheader {
      @include rem-font-size(28 * $ci-refresh-subheader-factor);
      @include rem-line-height(33 * $ci-refresh-subheader-factor);

      @media screen and (max-width: $screen-xs-max) {
        @include rem-font-size(24 * $ci-refresh-subheader-factor);
        @include rem-line-height(29 * $ci-refresh-subheader-factor);
      }

      @media screen and (max-width: 400px) {
        @include rem-font-size(23 * $ci-refresh-subheader-factor);
        @include rem-line-height(28 * $ci-refresh-subheader-factor);
      }

      @media screen and (max-width: 350px) {
        @include rem-font-size(22 * $ci-refresh-subheader-factor);
        @include rem-line-height(27 * $ci-refresh-subheader-factor);
      }
    }
  }
}

h1,
.h1 {
  @include h1;
}

@mixin h2() {
  @include rem-font-size(25);
  @include rem-line-height(29);

  @media screen and (max-width: $screen-xs-max) {
    @include rem-font-size(23);
    @include rem-line-height(28);
  }

  @media screen and (max-width: 400px) {
    @include rem-font-size(22);
    @include rem-line-height(27);
  }

  @media screen and (max-width: 350px) {
    @include rem-font-size(21);
    @include rem-line-height(26);
  }

  &.enlarged {
    @include rem-font-size(31);
    @include rem-line-height(36);

    margin-bottom: 50px;

    @media screen and (max-width: $screen-xs-max) {
      margin-bottom: 25px;
    }

    @media print {
      margin-bottom: 20px;
    }
  }

  .ci_refresh & {
    &.with_subheader {
    }

    &.subheader,
    .subheader {
      @include rem-font-size(25 * $ci-refresh-subheader-factor);
      @include rem-line-height(29 * $ci-refresh-subheader-factor);

      @media screen and (max-width: $screen-xs-max) {
        @include rem-font-size(23 * $ci-refresh-subheader-factor);
        @include rem-line-height(28 * $ci-refresh-subheader-factor);
      }

      @media screen and (max-width: 400px) {
        @include rem-font-size(22 * $ci-refresh-subheader-factor);
        @include rem-line-height(27 * $ci-refresh-subheader-factor);
      }

      @media screen and (max-width: 350px) {
        @include rem-font-size(21 * $ci-refresh-subheader-factor);
        @include rem-line-height(26 * $ci-refresh-subheader-factor);
      }
    }
  }
}

h2,
.h2 {
  @include h2;
}

@mixin h3() {
  @include rem-font-size(23);
  @include rem-line-height(28);

  @media screen and (max-width: $screen-xs-max) {
    @include rem-font-size(20);
    @include rem-line-height(25);
  }

  @media screen and (max-width: 400px) {
    @include rem-font-size(19);
    @include rem-line-height(22);
  }

  @media screen and (max-width: 350px) {
    @include rem-font-size(18);
    @include rem-line-height(21);
  }

  .ci_refresh & {
    &.with_subheader {
    }

    &.subheader,
    .subheader {
      /* base fontsite from h2! */
      @include rem-font-size(25 * $ci-refresh-subheader-factor);
      @include rem-line-height(29 * $ci-refresh-subheader-factor);

      @media screen and (max-width: $screen-xs-max) {
        @include rem-font-size(23 * $ci-refresh-subheader-factor);
        @include rem-line-height(28 * $ci-refresh-subheader-factor);
      }

      @media screen and (max-width: 400px) {
        @include rem-font-size(22 * $ci-refresh-subheader-factor);
        @include rem-line-height(27 * $ci-refresh-subheader-factor);
      }

      @media screen and (max-width: 350px) {
        @include rem-font-size(21 * $ci-refresh-subheader-factor);
        @include rem-line-height(26 * $ci-refresh-subheader-factor);
      }
    }
  }
}

h3,
.h3 {
  @include h3;
}

@mixin h4() {
  @include rem-font-size(20);
  @include rem-line-height(25);

  @media screen and (max-width: $screen-xs-max) {
    @include rem-font-size(18);
    @include rem-line-height(22);
  }

  @media screen and (max-width: 400px) {
    @include rem-font-size(17);
    @include rem-line-height(21);
  }

  @media screen and (max-width: 350px) {
    @include rem-font-size(16);
    @include rem-line-height(20);
  }

  .ci_refresh & {
    &.with_subheader {
    }

    &.subheader,
    .subheader {
      /* base fontsize from h3 */
      @include rem-font-size(23 * $ci-refresh-subheader-factor);
      @include rem-line-height(28 * $ci-refresh-subheader-factor);

      @media screen and (max-width: $screen-xs-max) {
        @include rem-font-size(20 * $ci-refresh-subheader-factor);
        @include rem-line-height(25 * $ci-refresh-subheader-factor);
      }

      @media screen and (max-width: 400px) {
        @include rem-font-size(19 * $ci-refresh-subheader-factor);
        @include rem-line-height(22 * $ci-refresh-subheader-factor);
      }

      @media screen and (max-width: 350px) {
        @include rem-font-size(18 * $ci-refresh-subheader-factor);
        @include rem-line-height(21 * $ci-refresh-subheader-factor);
      }
    }
  }
}

h4,
.h4 {
  @include h4;
}

@mixin h5() {
  @include rem-font-size(18);
  @include rem-line-height(22);

  @media screen and (max-width: $screen-xs-max) {
    @include rem-font-size(17);
    @include rem-line-height(21);
  }

  @media screen and (max-width: 400px) {
    @include rem-font-size(16);
    @include rem-line-height(20);
  }

  .ci_refresh & {
    &.with_subheader {
    }

    &.subheader,
    .subheader {
      /* base fontsize from h4 */
      @include rem-font-size(20 * $ci-refresh-subheader-factor);
      @include rem-line-height(25 * $ci-refresh-subheader-factor);

      @media screen and (max-width: $screen-xs-max) {
        @include rem-font-size(18 * $ci-refresh-subheader-factor);
        @include rem-line-height(22 * $ci-refresh-subheader-factor);
      }

      @media screen and (max-width: 400px) {
        @include rem-font-size(17 * $ci-refresh-subheader-factor);
        @include rem-line-height(21 * $ci-refresh-subheader-factor);
      }

      @media screen and (max-width: 350px) {
        @include rem-font-size(16 * $ci-refresh-subheader-factor);
        @include rem-line-height(20 * $ci-refresh-subheader-factor);
      }
    }
  }
}

h5,
.h5 {
  @include h5;
}

@mixin h6() {
  @include rem-font-size(17);
  @include rem-line-height(21);

  @media screen and (max-width: $screen-sm-max) {
    @include rem-font-size(16);
    @include rem-line-height(20);
  }

  .ci_refresh & {
    &.with_subheader {
    }

    &.subheader,
    .subheader {
      /* base fontsize from h5 */
      @include rem-font-size(18 * $ci-refresh-subheader-factor);
      @include rem-line-height(22 * $ci-refresh-subheader-factor);

      @media screen and (max-width: $screen-xs-max) {
        @include rem-font-size(17 * $ci-refresh-subheader-factor);
        @include rem-line-height(21 * $ci-refresh-subheader-factor);
      }

      @media screen and (max-width: 400px) {
        @include rem-font-size(16 * $ci-refresh-subheader-factor);
        @include rem-line-height(20 * $ci-refresh-subheader-factor);
      }
    }
  }
}

h6,
.h6 {
  @include h6;
}

@mixin chapter-headline() {
  text-align: center;
  @include rem-font-size(31);
  @include rem-line-height(36);

  .ci_refresh & {
    &.with_subheader {
    }

    &.subheader,
    .subheader {
      @include rem-font-size(31 * $ci-refresh-subheader-factor);
      @include rem-line-height(36 * $ci-refresh-subheader-factor);
    }
  }
}

.chapter-headline {
  @include chapter-headline;
}