Themen
- Buchempfehlung
- CSS-Grundeinstellungen
- Interaction via CSS
- Elementen sichtbar/unsichtbar machen
- Einbinden von Webfonts
Jason Santa Maria wants you to see type beyond code or flourishes. You’ll discover how typography shapes the way we read and how you can adapt the craft’s practices for the screen.
Das Buch kostet als Paperback $ 21.- und in der eBook-Version $ 11.-
Mehr dazu unter: https://abookapart.com/products/on-web-typography
Folgende Grundeinstellungen finde ich sehr praktisch und füge diese deswegen grundsätzlich am Anfang meines Stylesheets ein:
/* ============ Grundeinstellungen ========== */
* {
margin:0;
padding: 0;
box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
body {
hyphens: auto;
}
/* ============ ab hier alle anderen CSS-Anweisungen ========== */
Ihr könnt diese natürlich für Eure Bedürfnisse anpassen…
Einfache Interaktionen können mit Hilfe von CSS relativ leicht dargestellt werden
… z.B. wenn man sich mit dem Cursor über einem Element befindet …
/* Cursor befindet sich über <p> */
p:hover {
background: red;
}
Demo zu den beiden Möglichkeiten des Unsichtbarmachens
/* 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; }
Befindet sich der Cursor auf einem Element, wird ein weiteres Element sichtbar
<div>
Hover-Element
<p>Hallo!</p>
</div>
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;
}
Schaut Euch die Demo und den Source-Code an! Ihr könnt Euch auch das ganze Paket herunterladen!
<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>
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;
}
Mit „filter“ wird das Bild direkt im Browser verändert!
Demo – schaut Euch den Source-Code an!
<img src="p/Venice-Beach-Sunset.jpg" alt="Venice-Beach-Sunset">
img {
filter: blur(3px) sepia(1);
}
img:hover {
filter: sepia(0);
}
Navigationsmenüs ein- und ausblenden – ganz ohne Javascript!
:target ist das Ziel beim Verlinken mit Anchor-Links …
Demo – klickt auf das „Navigations-Burger-Symbol“ und schaut Euch den Source-Code von style.css an!
<!-- 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>
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;
}
Webfonts ermöglichen es Webdesignern, Schriftarten zu verwenden, die nicht auf den Computern der Benutzer installiert sind.
Wikipedia
Es gibt ein paar Möglichkeiten, wie Webfonts in eine Website eingefügt werden können:
Google bietet einen kostenlosen Service an, um Webfonts in der eigenen Website einzubinden.
Die Fonts werden dabei direkt von den Google-Servern in Eure Website geladen!
Demo – schaut Euch den Source-Code an!
<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>
/*
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;
}
Achtung: Verwendet Ihr viele Schriften und Schriftschnitte, kann sich die Ladezeit Eurer Website deutlich erhöhen – behaltet hier Augenmaß!
Umfangreiche Font-Familien enthalten viele Schnitte und Strichstärken – diese kann man in CSS über die Angabe „font-weight“ exakt ansprechen:
<!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…
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…
Gute Bildschirmschriften haben eine hohe x-Höhe und eine großzügige Punze
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!)
Silbentrennung wird noch nicht von allen Browsern unterstützt!
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!
<!-- WICHTIG: Angeben, welche Trennregeln gelten sollen – hier die deutsche! -->
<html lang="de">
body {
hyphens: auto;
}
Mit dieser CSS-Anweisung könnt Ihr mehrspaligen Text gestalten, bei dem der Text von einer Spalte in die andere fließt – so wie Ihr das z.B. bei Indesign kennt…
Schaut Euch die Demo-Datei an und verändert die Breite des Browser-Fensters!
.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;
}
See the Pen mehrspaltiger_text by Matthias Edler-Golla (@megolla) on CodePen.
Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple column work, a better average is 40 to 50 characters.
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!
p {
width: 70%;
min-width: 350px;
max-width: 550px;
}
Als idealer Zeilenabstand haben sich Werte zwischen line-height: 1.4 und line-height: 1.6 für Fließtext bewährt.
Gebt den Zeilenabstand ohne Maßeinheit an – dann passt sich der Abstand automatisch an die jeweilige Schriftgröße an!
body {
[…]
line-height: 1.45;
}
Zitate am besten nicht direkt mit Anführungszeichen auszeichnen sondern besser mit <q>Zitat</q>. Dann wissen auch die Suchmaschinen, dass es sich hier um ein Zitat handelt …
Gänsefüßchen
meine <q>Gänsefüßchen</q>
q:before {content:"„";}
q:after {content:"“";}
/* oder so */
q:before {content:"»";}
q:after {content:"«";}
<!-- tiefgestelltes Zeichen -->
CO<sub>2</sub>
<!-- hochgestelltes Zeichen -->
m<sup>3</sup>
Post-It<sup>®</sup>
sup {
font-size: 70%;
color: red;
}
via CSS könnt Ihr dann auch <sub> oder <sup> ansprechen und individuell gestalten!
Nützt man eine dieser neuen Größenangaben, passt sich auch die Textgröße an den zur Verfügung stehenden Platz an!
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
.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!
<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>
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…
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!
/* jeweils die 1. Zeile eines Absatzes */
article p:first-line {
color: red;
font-size: 110%;
}
dann können wir bei der Beamer-Präsentation direkt im Browser eine Präsentation nach der anderen aufrufen:
Die Reihenfolge losen wir beim nächsten Mal aus…
Die Links zu weiteren Web-Typografie-Tips werden nur sichtbar, wenn man mit dem Mousezeiger über den Pfeil (oben rechts) hovert – siehe Vorlage!
<head>
<!-- hier den Link zu den Google-Fonts einfügen! -->
<link rel="stylesheet" href="c/style.css">
</head>