Layout - Texte

Schrifttyp auswählen

body {
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

Hier wird auf dem Besucher-PC zuerst nach der Schriftart VERDANA gesucht, falls nicht vorhanden dann nach GENEVA. Dann ARIAL und HELVETICA.
Sollte keine der Fonts installiert sein, so sucht sich der Browser eine serifenfreie PC-Systemschrift (bezeichnet mit "sans-serif") aus.

Externe Schriftarten lokal einbinden und mit der Webseite ausliefern (mit @font-face)

Freie Fonts zuerst herunterladen. Zum Beispiel hier: https://www.fontsquirrel.com und https://www.google.com/fonts

Auf Lizenzen achten!
und in CSS einbinden:

@font-face {
    font-family: "League Gothic";
    src: url("/type/league_gothic.otf") format("opentype");
}

body {
    font-family:"League Gothic", Arial, sans-serif;
}

Hat der Fontname ein Leerzeichen, so ist er in Anführungszeichen zu schreiben. Siehe oben "League Gothic".

Fontflex-und-grid:

Windows:
Arial, Lucida, Impact, Times New Roman, Courier New, Tahoma, ComicSans, Verdana, Georgia, Garamond.
MAC:
Helvetica, Futura, Bodoni, Times, Palatino, Courier, Gill Sans, Geneva, Baskerville

Textgrösse und Abstände:

Ohne Angaben zur Schriftgrösse haben die Browser einen Defaultwert von 16px. 16px sind also die "Werkseinstellung".

Die Textgrösse wird im body festgelegt. Dazu kommen noch weitere Schriftangaben.

CSS:                
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #000;
}

Textflex-und-grid:

Ideally, you want the line height on your body copy to be about one-and-a-half times the size of your text;

Originally, the em was equal to the width of the capital letter M, which is where its name came from.

Textmarkierung mit Umbruch:

Der mit <em> markierte Text bricht um und die Markierung bleibt zusammenhängend bestehen. Die Textfeldgrösse kann zu Demonstrationszwecken verändert werden. Dazu die Textbox unten rechts anfassen.

Text ausrichten mit text-align

Ohne text-align:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in

Mit text-align: left: (Browser-Default)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in

Mit text-align: center:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in

Mit text-align: right:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in

Mit text-align: justify:

Auf den ersten Blick vielleicht nicht sichtbar: Die Aussenabstände sind gleich.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in

Bei Flex: Unterschiedliche Schriftgrössen nebeneinander

Ohne align-items: baseline:

Mit align-items: baseline:

.beispiel-mit-baseline {
    display: flex;
    padding: 10px;
    align-items: baseline;
    border: 1px solid green;
}

Line-height, betrifft die Lesbarkeit

Die Standard Zeilenhöhe bei den meisten Browsern liegt bei 1.1 bis 1.2 (110% to 120%).

Empfehlung: Line-height bei kurzer Zeilenlänge 1.5 und bei langer Zeilenlänge 2.

Kurze Zeilenlänge mit 1.1
p {width: 60ch; line-height: 1.1;}

60ch ist 60 "Character" Buchstaben/Zeichen. Leerzeichen zählen auch.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Empfohlen: Kurze Zeilenlänge mit 1.5
p {width: 60ch; line-height: 1.5;}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lange Zeilenlänge mit 1.1
p {line-height: 1.1;}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Empfohlen: Lange Zeilenlänge mit 2.0
p {line-height: 2.0;}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Erste Textzeile einrücken mit Text-Indent:

<p style="text-indent: 2em;">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Textstellen markieren mit bowsereigener Markierungsfarbe: "<mark>consectetur</mark>"

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

oder mit <span>consectetur</span>

.markierung-mit-span span:nth-child(1) {
    color: #fff;
    background-color: #ff0000;
}

.markierung-mit-span span:nth-child(2) {
    background-color: #00ffeb;
}

.markierung-mit-span span:nth-child(3) {
    background-color: #03d403;
}

Lorem ipsum dolor sit amet, <span>consectetur</span> adipisicing elit, sed do eiusmod tempor incididunt ut <span>labore et dolore magna aliqua. Ut enim ad minim veniam, quis</span> nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla <span>pariatur</span>. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Anfangsbuchstaben in Grossschreibung:

 .anfangsbuchstaben-gross p:nth-child(1)::first-letter {
    font-size: 2rem;
    font-weight: bold;
    color: #000;
}

.anfangsbuchstaben-gross   p:nth-child(2)::first-letter {
    font-size: 3rem;
    font-weight: bold;
    color: #ff0000;
}

.anfangsbuchstaben-gross   p:nth-child(3)::first-letter {
    font-size: 5rem;
    font-weight: bold;
    color: #ffd700;
}

Erste Zeile in Grossbuchstaben:

 .erste-zeile-gross p:nth-child(1)::first-letter {
    font-size: 2rem;
    font-weight: bold;
    text-transform: uppercase;
    color: #000;
}

.erste-zeile-gross p:nth-child(2)::first-letter {
    font-size: 3rem;
    font-weight: bold;
    text-transform: uppercase;
    color: #ff0000;
}

.erste-zeile-gross p:nth-child(3)::first-letter {
    font-size: 5rem;
    font-weight: bold;
    text-transform: uppercase;
    color: #ffd700;
}

Dazu bitte Bildschirmbreite verändern:

Farbe ändern bei markiertem Text:

 .text-markierung-farbe p::selection {
    color: #ff0000;
}

Blockquote

Blockquote:

Das HTML <blockquote> Element (oder HTML Block Quotation Element) gibt an, dass der eingeschlossene Text ein erweiterndes Zitat ist. Normalerweise wird dieses Element als Einrückung dargestellt. Eine URL für die Quelle des Zitats kann mit Hilfe des cite Attributs angegeben werden, während die Quelle eines Textes mit dem <cite> Element angegeben werden kann.

<figure class="beispiel-blockquote">                    
    <blockquote >
        <p>
            Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.
        </p>
    </blockquote>
        <figcaption>—Aldous Huxley,
            <cite>Brave New World</cite>
        </figcaption>
</figure>

cite:

Das <cite> Html-Element wird benutzt, um eine Referenz zu einem zitierten, kreativen Werk zu benennen. Es muss den Titel des zitierten Werks enthalten.

Textschatten mit text-shadow:

Html:
<div class="beispiel-text-shadow">
    <h1>Putenschnitzel</h1>
    <p>
    Lorem ipsum dolor sit amet, consectetur ... 
    </p>
</div>

CSS:
.beispiel-text-shadow h1 {
    font-size: 250%;
    color: #256579;
    text-shadow: 5px 4px 3px #999;
}

text-shadow: px-horizontal,  px-vertikal, px-blur-radius (blur: Streuung), Farbe;

Text-shadow bei der nachstehenden h1 Überschrift:

Markierungen bei ul/ol mit list-style

Html:
<ul class="elternelement">
    <li>Wiener Schnitzel</li>
    <li>Pommes frites</li>
    <li>Kopfsalat</li>
    <li>Bier</li>
</ul>

CSS:
.elternelement li {
    list-style: siehe unten;
}

CSS:
.beispiel-liststyles ul:nth-child(10) li{
    list-style: decimal inside; /* Zuerst alle "li" stylen */
}

Dann ein einziges List-Element herauspicken:
.beispiel-liststyles ul:nth-child(10) li:nth-child(3) {
    list-style-image: url(../images/15px-Blue_check.svg.webp);
}

Komplette Linkadresse automatisch in einen a-Tag einfügen:

Html:            
<a href="https://www.google.de"></a>

CSS:
a:after {
content: " (" attr(href) ") ";}

ergibt: . Die Benennung im a-Tag entfällt hiermit.

Lauftext:

SVG-Schrift:

Testplatz: