1. Buchempfehlung
2. CSS-Grundeinstellungen
3. Interaction via CSS
4. Elementen sichtbar/unsichtbar machen
5. Einbinden von Webfonts
6. Zeilenlänge und Zeilenabstand
7. Automatische Silbentrennung
8. Zitate
9. Hoch- und tiefgestellte Zeichen
10. Flexible Schriftgrößen Einheiten
11. Text-Einzug bei Paragraphen

http://www.book.webtypography.net/

Das Buch kostet £29.95 und in der eBook-Version £14.95

Folgende Grundeinstellungen finde ich sehr praktisch und füge diese deswegen grundsätzlich am Anfang meines Stylesheets ein:

CSS

/* ============ Grundeinstellungen ========== */

* {
    margin:0;
    padding: 0;
    box-sizing: border-box; /* z.B. Breite 300px bleibt 300px, trotz padding…*/
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}

body {
    hyphens: auto; /* automatische Silbentrennung */
}

/* ============ ab hier alle anderen CSS-Anweisungen ========== */

Ihr könnt diese natürlich für Eure Bedürfnisse anpassen…

… z.B. wenn man sich mit dem Cursor über einem Element befindet …

Demo

Demo zu Hover

CSS

/* Cursor befindet sich über <p> */
p:hover {
    background: red;
}

Dafür stellt CSS zwei unterschiedliche Anweisungen zur Verfügung:

• unsichtbar (visibility:hidden) macht ein Element unsichtbar – der dafür benötigte Platz bleibt erhalten
• versteckt (display:none) läßt ein Element verschwinden – es bleibt keine Lücke

Demo

Demo zu den beiden Möglichkeiten des Unsichtbarmachens

CSS

/*  das Element wird nur ausgeblendet, der benötige Platz bleibt jedoch erhalten  */
img { visibility: hidden; }

/* Element wieder sichtbar machen */
img { visibility: visible; }

/* ============= Element  „verschwindet“ völlig ================= */

/* das Element „verschwindet“ völlig */
img { display: none; }

/* Element wieder sichtbar machen */
img { display: block; }

HTML

<div>
  Hover-Element
  <p>Hallo!</p>
</div>

CSS

div {
    …
    position: relative; /* Elternelement */
}

div p {
    /* Position von <p>, wenn es sichtbar wird */
    position: absolute;
    width: 300px;
    left: 200px;
    top: 15px;
    …

    /* macht das Element unsichtbar */
    display: none;
}

/* bei Hover über <div> wird das <p> sichtbar */
div:hover p {
    display: block;
}

Demo

Demo dazu

Demo

Schaut Euch die Demo und den Source-Code an! Ihr könnt Euch auch das ganze Paket herunterladen!

HTML

<nav>
    <img src="p/burger.svg" alt="Menü-Icon">
    <ul>
      <li><a href="#">Startseite</a></li>
      <li><a href="#">Kontakt</a></li>
      <li><a href="#">Über mich</a></li>
      <li><a href="#">Impressum</a></li>
    </ul>
</nav>

CSS

nav {
  position: relative; /* Elternelement */
  width:36px; /* so breit wie das Burger-Icon sein soll */
}

nav img {
  width: 100%;
  height: auto;
}

nav ul {
  …

  /* Position des Menüs in Beziehung auf Burger-Icons */
  position: absolute;
  left: 10px;
  top: 10px;

  /* Menü anfangs unsichtbar */
  display:none;
}

nav:hover ul {
  /* Hovert man über das Burger-Icon, wird das Menü sichtbar */
  display: block;
}

Online-Demo

Demo – schaut Euch den Source-Code an!

HTML

<img src="p/Venice-Beach-Sunset.jpg" alt="Venice-Beach-Sunset">

CSS

img {
    filter: blur(3px) sepia(1);
}

img:hover {
    filter: sepia(0);
}

:target ist das Ziel beim Verlinken mit Anchor-Links …

Online-Demo

Demo – klickt auf das „Navigations-Burger-Symbol“ und schaut Euch den Source-Code von style.css an! Ihr könnt Euch auch das ganze Paket herunterladen…

HTML

<!-- ziel des Links ist <nav id="navi"> -->
<a href="#navi" title='Navigation sichtbar machen'><img class="burger" src="p/burger.svg" alt=""></a>

<!-- hier das Zielelement -->
<nav id="navi">
    <ul>
        <li><a href="#">Punkt 1</a></li>
        …
    </ul>
</nav>

CSS

nav {
    position: fixed;
    width: 14em;
    left: 0;
    top: 3.5em;

    /* nächste Zeile zwingt nav, die volle Höhe des Browserfensters zu nutzen */
    bottom: 0;

    /* damit ist es erst mal unsichtbar */
    display:none;
}

/* wenn es zum Target wird, wird es sichtbar */
nav:target {
    display: block;
}

Es gibt ein paar Möglichkeiten, wie Webfonts in eine Website eingefügt werden können:

1. Kostenlos gehostet: Die Schriften liegen z.B. auf den Servern von Google und können kostenlos eingebunden werden – https://fonts.google.com/
2. Kostenpflichtig gehostet: Die Schriften bleiben auf den Servern der Vertreibern und je nach Besucherzahlen muss man dafür Miete zahlen, z.B. bei myfonts.com
3. Gekauft und selber gehostet: Die Schriften können auf dem eigenen Server gehostet werden; man zahlt einmalig für die Fonts, z.B. bei fontspring.com
4. Flatrate: Man zahlt einen monatlichen Betrag und darf dafür beliebig viele Fonts einsetzen, z.B. bei typekit.com
5. Selber hosten: Die Fonts befinden sich auf dem eigenen Server und werden von dort geladen, z.B. bei fontsquirrel.com

Die Fonts werden dabei direkt von den Google-Servern in Eure Website geladen!

Online-Demo

Demo – schaut Euch den Source-Code an!

Code zum Einbinden auf der eigenen Website

HTML

<head>
    <!-- „400italic,700italic,700,400“ geben an, welche Schriftschnitte mitgeliefert werden -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,700,400' rel='stylesheet' type='text/css'>

    <!-- Euer normales Stylesheet NACH dem Google-Stylesheet! -->
    <link rel="stylesheet" href="c/style.css" />
</head>

CSS

/* 
    im Font-Stack den gewünschten Webfont an erster Stelle einfügen,
    danach Standard-System-Fonts als Fallback! 
*/
body {
   font-family: 'Open Sans', Helvetica, Arial,sans-serif;
}

Umfangreiche Font-Familien enthalten viele Schnitte und Strichstärken – diese kann man in CSS über die Angabe „font-weight“ exakt ansprechen:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
    …
    <!-- Webfont von Google -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,800,800i" rel="stylesheet">
    <link href="c/style.css" rel="stylesheet">
</head>

Die jeweiligen Schnitte sind direkt im Source-Code zu sehen…

CSS

body {
    font-family: 'Open Sans', Verdana, sans-serif;
}

h1 {
    /* sehr fetter Schnitt */
    font-weight: 800;
}

p {
    /* sehr dünner Schnitt */
    font-weight: 300;
}

em {
    font-weight: 300;

    /* hierdurch wird der kursive Schnitt aufgerufen */
    font-style: italic;
}

Bisher hatten wir bei font-weight nur die Angaben normal oder bold zur Verfügung…

Demo

Demo mit unterschiedlichen Schriftschnitten

https://www.google.com/get/noto/

Der gesamte Font ist 1 GB groß!

Vorbereitung

1. Einen Font z.B. bei Fontsquirrel herunterladen
2. Im eigenen Webspace hochladen und einbinden – siehe unten:

HTML

<head>
    …
    <!-- selbstgehosteter Webfont -->
    <link rel='stylesheet' href='f/fira.css' type='text/css'>
    <!-- normales Stylesheet DANACH! -->
    <link rel="stylesheet" href="c/style.css">
</head>
<body>
    <h1>Selbst gehosteter Webfont <q>Fira</q></h1>
    <p class="fira_sansbold">Hallo, ich bin <q>fira_sansbold</q></p>
    …
</body>

CSS

/* ============ Einbinden des Webfonts bei f/fira.css  =============== */
/* fette Schrift */
@font-face {
  font-family: "Fira";
  src: url("FiraSans-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}

/* fette, kursive Schrift */
@font-face {
  font-family: "Fira";
  src: url("FiraSans-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
}
…

/* ============ CSS-Anweisungen bei c/style.css  ============== */
html {
  font-family: "Fira", Verdana, sans-serif;
  font-size: 160%;
  line-height: 1.5;
}

.cursiv {
  font-style: italic;
}

.bold {
  font-weight: 700;
}

.book {
  font-weight: 400;
}

.light {
  font-weight: 100;
}
…

Demo

Schaut Euch die Demo an oder ladet Euch das komplette Paket herunter!

Warnung

Wenn Ihr – so wie oben gezeigt – die Fonts direkt einbindet, sind die Fonts sehr umfrangreich und groß, weil sie viele Zeichen beinhalten, die Ihr nicht benötigt! Mit dem Fontsquirrel Generator könnt Ihr ziemlich einfach die von Euch benötigten Zeichensätze (z.B. deutsch und englisch) auswählen und somit die Dateigrößen der Fonts drastisch reduzieren!
 
 

Online-Resourcen:

• https://www.axis-praxis.org
• https://alistapart.com/article/user-interfaces-for-variable-fonts
• https://medium.com/@clagnut/get-started-with-variable-fonts-c055fd73ecd7
• https://css-tricks.com/guides/opentype-variable-fonts/
• https://www.zeichenschatz.net/typografie/how-to-start-with-variable-fonts-on-the-web.html
• https://goertek.kontrapunkt.com/online/ <-- Schrift reagiert auf Sounds!

Für Überschriften und andere, groß dargestellte Texte kann man verspielte, detailreiche Schriften verwenden. Anders schaut es bei den Lesetexten aus: Dort ist eine Schrift notwendig, die auch in kleinen Größen eine gute Lesbarkeit gewährleistet!

Gut geeignet sind Schriften, die entweder für den Bildschirm gestaltet wurden (Verdana, Georgia, Lucida Grande … ), oder aber Schriften, die speziell für gute Lesbarkeit in kleinen Größen gestaltet wurden (also z.B. für Zeitungen, Telefonbücher, Lexikas … )

Als Grundregel kann man sagen, dass Schriften am Bildschirm gut lesbar sind, wenn deren Kleinbuchstaben im Verhältnis zu den Großbuchstaben "hoch" sind – wie die hier gezeigte "Meta" von Erik Spiekermann (der noch viele andere, sehr schöne & gut lesbare Schriften gestaltet hat!)

Welcher Browser dies aktuell unterstützt, findet Ihr hier: http://caniuse.com/#search=hyphens

Schaut Euch die Demo-Datei an und ändert die Breite des Browser-Fensters!

HTML

<!-- WICHTIG: Angeben, welche Trennregeln gelten sollen – hier die deutsche! -->
<html lang="de">

CSS

body {
   hyphens: auto;
}

Auch im Web gilt, dass die Zeilenlänge nicht mehr als ca. 80 Buchstaben betragen sollte. Andererseits sollte die Zeilenlänge auch nicht zu kurz sein, weil auch dies das Auge schnell ermüden kann.

Bei flexiblen Layouts kann man gut mit den CSS-Anweisungen "max-width" und "min-width" dafür sorgen, dass die Zeilenlänge in einem erträglichen Maß bleibt!

CSS

p {
    width: 70%;
    min-width: 350px;
    max-width: 550px;
}

Gebt den Zeilenabstand ohne Maßeinheit an – dann passt sich der Abstand automatisch an die jeweilige Schriftgröße an!

Demo-Seite

CSS

body {
    […]
    line-height: 1.45;
}

Schaut Euch die Demo-Datei an und verändert die Breite des Browser-Fensters!

CSS

.mehrspaltig {
    /* Blocksatz */
    text-align: justify;

    /* Breite des Textes */
    column-width:16em;

    /* Abstand zwischen den Textblöcken */
    column-gap:1em;

    /* Trennlinie in Grau, nur falls gewünscht! */
    column-rule : 1px solid #ccc;
}

CodePen

See the Pen mehrspaltiger_text by Matthias Edler-Golla (@megolla) on CodePen.

HTML

meine <q>Gänsefüßchen</q>

CSS

q:before {content:"„";}
q:after {content:"“";}

/* oder so */
q:before {content:"»";}
q:after {content:"«";}

HTML

<!-- tiefgestelltes Zeichen -->
CO<sub>2</sub> 

<!-- hochgestelltes Zeichen -->
m<sup>3</sup> 

Post-It<sup>®</sup>

CSS

sup {
    font-size: 70%;
    color: red;
}

via CSS könnt Ihr dann auch <sub> oder <sup> ansprechen und individuell gestalten!

Schaut Euch die Demo an!

viewport = Fläche innerhalb des Browserfensters

1vw     =   1% der viewport Breite
1vh     =   1% der viewport Höhe
1vmin   =   1vw oder 1vh, je nach dem, was davon **kleiner** ist
1vmax   =   1vw oder 1vh, je nach dem, was davon **größer** ist

CSS

.vw {
    font-size: 5vw;
}

.vh {
    font-size: 5vh;
}

.vmin {
    font-size: 5vmin;
}

.vmax {
    font-size: 5vmax;
}

Man kann damit nicht nur die Größe von Text sondern auch von anderen HTML-Elementen festlegen!

Beachtet, wie der Paragraph direkt nach der Überschrift keinen Texteinzug hat!

Demo dazu

HTML

<p>Lorem ipsum qui ex sale facilis, vel in quidam adolescens.</p>
<p>Principes dignissim dissentias quo ea…</p>

<h3>Sit an amet</h3>
<p>Vel ancillae offendit id, te eum nonumy mentitum, id per detracto postulant repudiandae.</p>

CSS

article p {
    margin: 0;
}
/* durch das "p+p" wird erst beim 2. Absatz der Einzug gemacht … */
article p+p {
    text-indent: 1.5em;
}

:first-letter Der jeweils erste Buchstabe eines Paragraphen bekommt eine spezielle Behandlung…

Schaut Euch die Demo-Datei an – leider interpretieren die Browser die Anweisungen unterschiedlich, so dass es nicht in allen gleich (gut) aussieht…

CSS

p:first-letter {
    font-weight: bold;
    font-size: 290%;
    color: red;
    float: left;
    margin: -.2em .1em -.4em 0;
}

Damit kann man jeweilis die 1. Zeile eines Absatzes hervorheben – schaut Euch die Demo und deren Source-Code an!

CSS

/* jeweils die 1. Zeile eines Absatzes */
article p:first-line {
    color: red;
    font-size: 110%;
}

Präsentations-Slides

1. Erstellt Eure Layouts im Programm Eurer Wahl
2. Exportiert die Datei als .pdf und benennt diese als index.pdf
3. Ladet die Datei auf die oberste Ebene Eures Webspaces

dann können wir bei der Beamer-Präsentation direkt im Browser eine Präsentation nach der anderen aufrufen:

• http://fk12.org/web17/bayor/index.pdf
• http://fk12.org/web17/christodoulou/index.pdf
• http://fk12.org/web17/duespohl/index.pdf
• http://fk12.org/web17/durst/index.pdf
• http://fk12.org/web17/dzidic/index.pdf
• …

Die Reihenfolge losen wir beim nächsten Mal aus…

Briefing

• HTML ist schon fertig, nicht verändern – nur das Stylesheet anpassen
• Schriftgröße der Überschrift „Typografie“ via der (neuen) Maxeinheit „vw“ festlegen – dann passt sich die Textgröße automatisch der Breite des Browsers an
• Mehrspaltigen Text diesmal via „Multi-Column“-Anweisungen einbauen – siehe entsprechenden Slide am Anfang dieses Scripts
• es sind diesmal keine Media-Queries notwendig, damit sich die Seite an verschiedene Browser-Breiten anpasst – das erledigt die (richtige) „Multi-Column“-Anweisung

Integration von Webfonts via Google-Fonts

• Fügt für die Überschrift den Webfont „Montserrat thin 100“ ein
• Für den restlichen Text bitte den Webfont „Fira Sans“ in den Schriftstärken „extra light 200 italic“ und „regular 400“ einbauen

Hover-Menü

Die Links zu weiteren Web-Typografie-Tips werden nur sichtbar, wenn man mit dem Mousezeiger über den Pfeil (oben rechts) hovert – siehe Vorlage!

HTML

<head>

    <!-- hier den Link zu den Google-Fonts einfügen! -->
    <link rel="stylesheet" href="c/style.css">
</head>

Download

Lade das Übungspaket hier herunter