Folgende Grundeinstellungen finde ich sehr praktisch und füge diese deswegen grundsätzlich am Anfang meines Stylesheets ein:
/* ============ Grundeinstellungen ========== */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font: inherit;
}
/* praktisch zum Debugging – in "Produktion" deaktivieren! */
*:hover {
outline: 1px solid red;
}
img,
picture,
video {
max-width: 100%;
height: auto;
display: block;
}
body {
min-height: 100vh;
color: #444;
background-color: #fff;
scroll-behavior: smooth;
-ms-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
/* ============ ab hier alle anderen CSS-Anweisungen ========== */Ihr könnt diese natürlich für Eure Bedürfnisse anpassen…
Schaut Euch die Demo ändert dabei auch die Breite Eures Browser-Fensters… Ihr könnt das Beispiel auch wieder herunterladen
<h2>Floating Headline Text</h2>
<img src="p/white_florette.svg" alt="" />
<p>Lorem ipsum no eam iudicabit patrioque, liberavisse signiferumque [...]</p>/* nach LINKS floaten */
img {
float: left;
width: 250px;
}
/* nach RECHTS floaten */
img {
float: right;
width: 250px;
}See the Pen floating_text by Matthias Edler-Golla (@megolla) on CodePen.
Panic Button von star5112
Einfache Interaktionen können mit Hilfe von CSS relativ leicht dargestellt werden
… z.B. wenn man sich mit dem Cursor über einem Element befindet …
Die Interaction in CSS beschränkt sich fast immer auf eine Hover-Ereignis – und funktioniert somit nur auf Geräten, die einen Cursor (Mauszeiger) haben. Andere Events brauchen Javascript, dazu später mehr.
Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!
/* Cursor befindet sich über <p> */
p:hover {
background: red;
}
Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!
Dafür stellt CSS zwei unterschiedliche Anweisungen zur Verfügung:
/* 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
Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!
<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 an – und ladet Euch zum Experimentieren die Zip-Datei runter!
<nav>
<!-- der Button mit dem Burger-Symbol -->
<button><img src="p/burger.svg" alt=""></button>
<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 {
/* damit Elternelement */
position: relative;
/* wie groß ist die Fläche, die bei Hover reagiert? */
width: 32px;
}
nav button {
width: 24px;
border: none;
background: none;
cursor: pointer;
}
nav ul {
[…]
width: 12em;
/* Position des Menüs in Beziehung auf Burger-Icons */
position: absolute;
left: 20px;
top: 20px;
/* Menü anfangs unsichtbar */
display: none;
}
nav:hover ul {
/* Hovert man über das Burger-Icon, wird das Menü sichtbar */
display: block;
}
Hover geht nur auf Geräten, die einen Cursor haben – also nicht auf Smartphones und Tablets! Deswegen ist es besser, ein Navigations-Menü mit einen Click sichtbar zu machen. Dafür ist jedoch (ein bisschen) Javascript notwendig!
Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!
<body>
[…]
<nav>
<!-- der Button mit dem Burger-Symbol -->
<button><img src="p/burger.svg" alt=""></button>
<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>
[…]
</main>
<!-- Verknüpfung zur Javascript-Datei "script.js" -->
<script src="js/script.js"></script>
</body>identisch mit dem bisherigen Beispiel, es wird nur zusätzlich die Javascript-Datei script.js verlinkt
nav {
/* damit Elternelement */
position: relative;
/* wie groß ist die Fläche, die bei Hover reagiert? */
width: 32px;
}
nav button {
width: 24px;
border: none;
background: none;
cursor: pointer;
}
nav ul {
[…]
width: 12em;
/* Position des Menüs in Beziehung auf Burger-Icons */
position: absolute;
left: 20px;
top: 20px;
/* Menü anfangs unsichtbar */
display: none;
}
/* der entscheidende Unterscheid: Die Klasse "sichtbar" wird via Javascript an-/ausgeschaltet! */
.sichtbar {
/* Clickt man auf das Burger-Icon, wird das Menü sichtbar/unsichtbar */
display: block;
}// die eigentliche Funktion, die das Menü sichtbar/unsichtbar macht
function menuAnAus() {
navMenu.classList.toggle('sichtbar');
}
// der Button mit dem Burger-Menü
const navButton = document.querySelector('nav button');
navButton.addEventListener('click', menuAnAus);
// das Menü, dass sichtbar/unsichtbar werden soll
// sobald auf den Burger-Button geklickt werden soll
const navMenu = document.querySelector('nav ul');
Alle in der Demo verwendeten Bilder sind von https://picsum.photos/
Mit „filter“ wird das Bild direkt im Browser verändert! Früher waren dazu zwei Bilder nötig, die ausgetaucht werden mussten…
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:
Die Fonts werden dabei direkt von den Google-Servern in Eure Website geladen – kostenlos!
Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!
<head>
<!-- Webfonts "Open Sans, Gentium Basic" von Google -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Gentium+Basic:ital@0;1&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap"
rel="stylesheet"
/>
<!-- 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 unbedingt Standard-System-Fonts als Fallback!
*/
html {
/* Webfont an erster Stelle! */
font: 120%/1.5 "Gentium Basic", Georgia, Times, serif;
}
h1 {
/* Webfont an erster Stelle! */
font: 300%/1.5 "Open Sans", Verdana, sans-serif;
margin: 0.5em 0 0.5em -0.1em;
}
https://fonts.google.com/share?selection.family=Lato:ital,wght@0,100;0,400;0,900;1,100;1,400;1,900
Achtung: Verwendet Ihr viele Schriften und Schriftschnitte, kann sich die Ladezeit Eurer Website deutlich erhöhen – behaltet hier Augenmaß!
Umfangreiche Font-Familien enthalten viele Strichstärken – diese kann man in CSS über die Angabe „font-weight“ exakt ansprechen.
Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!
<!DOCTYPE html>
<html lang="de">
<head>
…
<!-- Lato-Font-Familie direkt vom Google-Server -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,400;0,900;1,100;1,400;1,900&display=swap"
rel="stylesheet"
/>
<!-- eigenes Stylesheet -->
<link rel="stylesheet" href="c/style.css" />
</head>Die jeweiligen Schnitte sind direkt im Source-Code zu sehen…
body {
font-family: 'Lato', Verdana, sans-serif;
}
h1 {
/* sehr fetter Schnitt */
font-weight: 900;
}
p {
/* sehr dünner Schnitt */
font-weight: 100;
}
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…
The Noto font collection includes 205 families that consist of nearly 2,300 fonts. Noto fonts are designed and engineered for typographically correct and aesthetically pleasing global communication in more than 1,000 languages and over 150 writing systems.
Der gesamte Font ist mehr als 1 GB groß!
Es ist auch gar nicht schwer, im eigenen Webspace Webfonts selber zu hosten!
Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!
<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>/* ============ 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;
}
…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!
Schriften können variabel angelegt werden. Das ist insbesondere für Webdesigner eine große Neuigkeit. Anstatt drei verschiedene Font-Dateien für drei verschiedene Stärken der gleichen Schrift einzubetten, reicht es künftig, lediglich einen einzelnen Font zu verwenden. Dieser Font wird dann in der Lage sein, im laufenden Betrieb verschiedene optische Zustände anzunehmen.
Das geht momentan schon, aber es gibt noch nicht allzu vielen Schriften, die als Variable Fonts umgesetzt sind!
Wer sich mehr mit der Thematik beschäftigen möchte, wird bestimmt auf folgenden Seiten fündig:
Nachdem die ersten, kostenlosen Variable Fonts erhältlich sind, habe ich damit etwas experimentiert:
Recursive Interaktive Online-Demo
Ihr könnt Euch auch gerne meine Experimente komplett herunterladen!
Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<!--
durch "@100..900" werden alle font-weights zwischen 100 und 900 freigegeben
alle Werte dazwischen stehen somit zur Verfügung
-->
<link
href="https://fonts.googleapis.com/css2?family=MuseoModerno:wght@100..900&display=swap"
rel="stylesheet"
/>/*
Einstellen von font-weight wie bisher;
es sind jedoch auch ganz "schräge" Werte möglich!
*/
html {
font: 120%/1.5 "MuseoModerno", Arial, sans-serif;
font-weight: 321;
}
h2 span {
font-weight: 777;
}
Variable Webfonts können ebenfalls auf dem eigenen Server gehostet werden – dann ist dafür keine Einbindung der Google-Server mehr nötig…
Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!
/* ================= Variable Webfont local einbinden ================= */
@font-face {
font-family: "Montserra";
src: url("../f/Montserrat-VariableFont_wght.ttf") format('woff2');
}
/* ============================== Webfont einbinden ============================== */
html {
font: 100%/1.5 "Montserra", Times, Verdana, Helvetica, sans-serif;
[…]
}
/* ================================ Schriftschnitte angeben ================================ */
p {
/* Strichstärke frei wählen zwischen 100 und 900*/
font-weight: 123;
/* Wie kursiv soll die Schrift dargestellt werden? */
font-style: oblique 15deg;
}
[…]Webtypografie bezeichnet die Typografie für digitale Texte und den Gebrauch von Schriftarten im Web.
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 mittlerweile von fast allen Browsern unterstützt! Allerdings werden noch die „Vendor-Prefixe“ benötigt…
Welcher Browser dies aktuell unterstützt, findet Ihr hier: http://caniuse.com/#search=hyphens
Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!
<!-- WICHTIG: Angeben, welche Trennregeln gelten sollen – hier die deutsche! -->
<html lang="de">body {
/* die oberen zwei Zeilen für Internet Explorer, Safari und Chrome */
-ms-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}Es befinden sich weitere Anpassungen in der Entwicklung, die u.a. verhindern werden, dass zu viele Trennungen hintereinander gemacht werden. Richard Rutter hat dies gut zusammengefasst.
Anzeige der Zeilenlänge bei VS Code
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;
}
/* oder seit kurzem mit "clamp" */
/* bewirkt das gleiche, nur übersichtlicher */
p {
width: clamp(350px, 70%, 550px);
}
Als idealer Zeilenabstand haben sich Werte zwischen line-height: 1.4 und line-height: 1.6 für Fließtext bewährt.
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 an – und ladet Euch zum Experimentieren die Zip-Datei runter!
Verändert die Breite des Browser-Fensters, wenn Ihr Euch die Demo anschaut!
.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.
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:"«";}Damit kann man sogar – wie hier gezeigt – den Anführungszeichen eine eigene Farbe geben!
<!-- 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 – und ladet Euch zum Experimentieren die Zip-Datei runter!
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!
Durch die relativ neuen CSS-Anweisungen min(), max() und clamp() könnt Ihr verhindern, dass z.B. Euer Text gigantisch groß oder winzig klein wird, wenn sich die Browser-Breite ändert.
Für mich ist dabei die Anweisung clamp() die praktischste, weil sie eben sowohl die Ober- als auch die Untergrenze festlegt…
Ohne diese Anweisungen müsstet Ihr dafür media-Queries verwenden, was deutlich umständlich ist!
Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!
/* Der Text wird nie kleiner als 30px, kann aber beliebig groß werden */
.max {
font-size: max(6vw, 30px);
}
/* Der Text wird nie größer als 200px, kann aber beliebig klein werden */
.min {
font-size: min(6vw, 30px);
}
/* Der Text wird nie kleiner als 30px, nie größer als 60px
und passt sich dazwischen an die Browserfenster-Breite an */
.clamp {
font-size: clamp(30px, 6vw, 60px);
}Ihr könnt diese Anweisungen nicht nur für Text sondern auch für ganze Artikel verwenden und so festlegen, wie breit dieser laufen soll:
/* Breite von Textblöcken festlegen */
article {
width: clamp(320px, 90%, 600px);
margin: 5% auto;
}
Beachtet, wie der Paragraph direkt nach der Überschrift keinen Texteinzug hat!
Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!
<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 nur dort ein Einzug gemacht,
wo zwei Paragraphen zusammentreffen */
article p+p {
text-indent: 1.5em;
}
:first-letter Der jeweils erste Buchstabe eines Paragraphen bekommt eine spezielle Behandlung.
Achtung: Ihr müsst dafür dem 1. Buchstaben keine eigene Klasse geben!
Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!
p:first-letter {
font-weight: bold;
font-size: 290%;
color: red;
float: left;
margin: -.2em .1em -.4em 0;
}
Wir fangen mit den Präsentationen um 9:30 an!
Die Links zu weiteren Web-Typografie-Seiten werden nur sichtbar, wenn man auf das Burger-Symbol clickt – siehe Vorlage! Beachtet dazu meine Anmerkungen zu Javascript im heutigen Script!
