Text



Das Video ist eine Übersicht für diesen Bereich und zeigt wie mit CSS Text gestaltet werden kann.

CSS Eigenschaften für Text

CSSWerteBedeutung
font:italic bold 12px/30px Georgia serif;Kurzschreibweise für die Font Eigenschaften: font-weight font-size/line-height font-family.
font-size:14px;Schriftgröße mit absoluten Werten z.B. wie Pixel oder auch relative Größe wie REM.
font-weight:bold; 800; 300;Schriftschnitt z.B. Bold oder Light. Bei Google Webfonts sind die Schnitte meist Zahlen. Je niedriger desto dünner. 400 ist dann Dünn. 700 ist Fett.
font-family:verdank; sans-serif;Schriftfamilie. Man sollte den Systemschriften wie Verdana oder Arial Vorzug gegenüber anderen Schriften geben. Diese sind schneller geladen. Man kann auch gut damit auskommen die Schrift grob über sans-serif (Serifenlos) oder serif (Serifenschrift) zu definieren. Je nach Gerät wird dann eine typische genommen. Wenn man andere Schriften verwendet, dann am Besten als WOFF bzw. WOFF2 Schrift.
line-height:18px;Zeilenabstand. Je kleiner die Schrift, desto größer sollte das Verhältnis von Schriftgröße und Zeilenabstand sein. Bei großen Schriften kann es 1:1 oder sogar kleiner sein.
list-style-type:none, circle, square, disc, decimal, lower-roman, upper-roman, lower-greek, decimal-leading-zero, armenian, georgian, inheritnone = Kein Aufzählungszeichen, circle = Kreis, nur Rahmen, square = Quadrat, disc = Gefüllter Kreis, decimal = Dezimalzahlen (1. ,2. , 3. , ...), lower-roman = Kleine römische Zahlen (i. ,ii. ,iii. , ...), upper-roman = Grosse römische Zahlen (I. ,II. , III., ...), decimal-leading-zero = Dezimalzahlen mit führender 0 (01. ,02. , 03. , ...), lower-greek = Kleine griechische Nummerierung (alpha, beta, gamma,...), lower-latin = Kleines ABC (a. ,b., c. , ...), upper-latin = Große ABC (A., B. ,C. , ...), armenian = Armenische Nummerierung, georgian = Georgische Nummerierung, Inherit = erbt vom letzten definierten Elternelement
letter-spacing:4px;Spationieren bzw. Zeichenabstand ist das Erhöhen des Buchstabenabstandes. Die muß mitunter unbedingt gemacht werden. Z.B. liest sich je nach Schrift der Wort click wie dick. In so einem Fall wird das letter-spacing für das Wort etwas erhöht. Das habe ich mal bei einer Werbung von Apple gesehen. 🙂
text-align:left; right; center; justify;Absatzausrichtung: linksbündig, zentriert, Blocksatz etc. Text-align greift nur bei Text und INLINE-Elementen. Damit können keine BLOCK-Elemente ausgerichtet werden.
vertical-align:sub; super; baseline (Standard); top; bottom; middle; text-top; text-bottom; super; baseline; top; bottom; middle; text-top; text-bottom;Vertikale Ausrichtung bei Elementen mit der Eigenschaft display: TABEL-DATA. Ist für Tabellen gedacht.
text-decoration:none; overline; underline; line-through;Unterstreichen und andere Auszeichnungen. Ist ein Standardwert bei dem Link (a).
text-indent:15px;Texteinzug der ersten Zeile.
text-shadow:2px 2px 4px #ff0000;Schlagschatten. Verschiebung auf der X- und Y-Achse sowie Weichzeichner und Farbe. Vergleichbar zu Box-Shadow. Kann mit Komma getrennt mehrfach angewendet werden. RGBA Werte ergeben meist ein weicheres Ergebnis.
text-transform:uppercase; lowercase; capitalize;Großbuchstaben, Kleinbuchstaben, Kapitälchen
orphans:3; 5; (...)Verhindert einzelne Zeilen am Ende einer neuen Seite oder Spalte. Entspricht dem typographischen Begriff "Schusterjunge". "Der Schusterjunge weiß nicht wo er hin soll."
widows:3; 5; (...)Verhindert einzelne Zeilen zu Beginn einer neuen Seite oder Spalte. Entspricht dem typographischen Begriff "Hurenkind". "Das Hurenkind weiß nicht wo es herkommt."
page-break-beforealways; avoid; left; right; autoErzeugt einen Spalten bzw. Seitenumbruch vor dem Element.
page-break-insideavoid; autoVerhindert den Umbruch innerhalb des Textes (avoid) oder erlaubt den Umbruch (auto).
page-break-afteralways; avoid; left; right; autoErzeugt einen Spalten bzw. Seitenumbruch nach dem Element.
-webkit-column-break-inside:avoid;Element wird bei Webkit Browsern (Safari, Chrome) nicht umbrochen sondern beginnt vollständig auf der neuen Seite oder Spalte.
column-span:2Elemente mit dieser Eigenschaft können in ihrer Breite über mehrere Spalten laufen.

FrageAntwort
Das Wort typographie soll in Großbuchstaben angezeigt werdenh1 {
text-transform: uppercase


Farbe



Das Video ist eine Übersicht für diesen Bereich und zeigt wie mit CSS Text gestaltet werden kann.

CSS Farbsysteme

CSSWerteBedeutung
color:#00ff00; (...)Zeichenfarbe
background-color:rgba(240, 240, 240, 0.5); (...)Hintergrundfarbe
opacity:0.9;Deckkraft. Je höher die Opazität, desto niedriger die Transparenz.
background:linear-gradient(to right, red , blue);Kurzschreibweise für die Hintergrund-Eigenschaften. Ein Farbverlauf ist möglich. Verläufe sollten mittels Editor komponiert werden. Gradient Ergänzt die Eigenschaft background um die Möglichkeit eines Verlaufs. http://www.colorzilla.com/gradient-editor/

CSS Farbwerte

CSS-WerteNameBedeutung
red;Color-Key WordDefinierte Farbnamen
#ff0000; #0f0; Hex-RGBHexadezimale RGB. Je niedriger die Zahl, desto dunkler und je höher der Buchstabe desto heller. 0-9a-f
rgb(255, 0, 0); RGBRot, Grün, Blau
rgba(255, 0, 0, 0.4); RGBARot, Grün, Blau, Alpha
transparenttransparentDurchsichtig
currentColorcurrentColorBezieht sich auf die Farbe die bei dem Element über Color eingestellt ist.
hsl(0, 100%, 50%)HSLFarbton, Sättigung, Helligkeit
hsla(90, 100%, 50%,0.6)HSLAFarbton, Sättigung, Helligkeit, Alpha


Box



Das Video ist eine Übersicht für diesen Bereich und zeigt wie mit CSS Text gestaltet werden kann.

CSSBeispiel-WerteBedeutung
margin:5px 3px 8px 5px;Aussen-Abstand zum nächsten Element. Im Uhrzeigersinn: 12 Uhr (oben), 3 Uhr (rechts), 6 Uhr (unten), 9 Uhr (links).
margin-top:50%; 10pxMargin kann auch mit -top, -left, -bottom oder-right direkt angesprochen werden.
padding:5px 3px 8px 5px;Innen-Abstand des Inhalts zum Rand. Wie bei Margin: Im Uhrzeigersinn: 12 Uhr (oben), 3 Uhr (rechts), 6 Uhr (unten), 9 Uhr (links)
padding-top:30%; 20pxPadding kann auch mit -top, -left, -bottom oder-right direkt angesprochen werden.
width:200px;Die Breite von Text bestimmen. Hier besteht eine Wechselwirkung mit der Eigenschaft display. Diese ist Standard display: block. Block-Elemente können in der Breite eingestellt werden. Padding, margin und border-width werden darauf addiert.
height:200px;Die Höhe von Text bestimmen
min-width:150px;Für Breite und Höhe lässt sich ein minimaler Wert definieren.
max-width:400px;Für Breite und Höhe lässt sich ein maximaler Wert definieren.
box-shadow:6px 4px 5px 0px #000;Schlagschatten bei dem horizontaler und vertikaler Versatz, Weichzeichner, Intensität und Farbe eingestellt werden können. Empfehlenswert ist dabei die Benutzung von rgba Farben.


Kontur



Das Video ist eine Übersicht für diesen Bereich und zeigt wie mit CSS Text gestaltet werden kann.

Border

CSSWerteBedeutung
border2px solid #0f0;Praktische Kurzschreibweise die border-width, border-color und border-style zusammenfasst
border-collapse:separate; collapseSteuert ob Rahmen zeilenweise durchgezogen (collapse) oder jede Zelle einzeln (separate) umrandet ist
border-color:#ff0000; redFarbe kann mit den CSS-Color-Definitionen bestimmt werden: (color-key-word; #hex; rgb; rgba; hsl; hsla;)
border-radius:2px;Stärke der abgerundeten Ecken in Pixel. Verträgt sich in Tabellen nicht mit border-collapse
border-style:none; solid; dotted; dashed; groove;Art der Kontur kann beeinflusst werden: none; solid; dotted; dashed; groove; double; ridge; inset; outset;
border-top-width:6px;Mit top, left, bottom und right kann die Kontur unabhängig voneinander adressiert werden.
border-width:1px; 5px 2px 8px 2px;Stärke der gesamten Kontur. Einzelne Rahmen ansprechen.
outline:1px solid red;Erzeugt weitere Kontur allerdings unabhängig vom Box-Modell.
outline-offset:15px;Bestimmt den Abstand der Outline-Kontur
border-image-source:url('rahmen.png');Lädt den Border-Image Sprite
border-image-slice:98 96 97 100 fill;Zerschneidet den Sprite in Slices. Innenfläche kann mit fill gefüllt werden. Es gibt praktische Editoren um dieses Zerschnippeln vorzunehmen.
border-image-repeat:repeat, round, stretch; space;Der Rahmen-Slices wiederholen sich (repeat), wiederholen sich mit Anpassung (round), werden gestreckt (stretch) oder wiederholt und ergänzt (space).
border-image-outset:5pxVerschiebung des Rahmens
-VENDOR-border-image:url(rahmen.jpg) 30 round;Kurzschreibweise die allerdings aufgrund der notwendigen Vendor Prefixe keine nennenswerten Vorteile in der Zeitersparnis bietet.

text-shadow



Das Video ist eine Übersicht für diesen Bereich und zeigt wie mit CSS Text gestaltet werden kann.

Text-Shadow

CSSWerteBedeutung
text-shadow:2px 2px 4px #ff0000;Schlagschatten. Verschiebung auf der X- und Y-Achse sowie Weichzeichner und Farbe. Vergleichbar zu Box-Shadow. Kann mit Komma getrennt mehrfach angewendet werden. RGBA Werte ergeben meist ein weicheres Ergebnis.

transform



Das Video ist eine Übersicht für diesen Bereich und zeigt wie mit CSS Text gestaltet werden kann.

transform

WertBedeutung
translateVerschieben auf der X und Y Achse
translate3dVerschieben auf der X, Y und Z Achse
translateXVerschiebt nur auf der X-Achse
translateYVerschiebt nur auf der Y-Achse
translateZVerschiebt nur auf der Z-Achse
scaleSkaliert Breite und Höhe
scale3dSkaliert Breite und Höhe sowie Z Achse
scaleXSkaliert nur die Breite
scaleYSkaliert nur die Höhe(YAchse)
scaleZSkaliert nur die Z-Achse(Z Achse)
rotateDrehen
rotate3d3D Rotation
rotateXDreht um die X-Achse
rotateYDreht um die Y-Achse
rotateZDreht um die Z-Achse
skewKippen der X- und Y-Achse
skewXKippen der X-Achse
skewYKippen der Y-Achse
matrixZusammenfassung der sechs 2-D Werte
matrix3dZusammenfassung der 16 3-D Werte


Google Webfonts

Neben den Systemschriften können Webfonts eingebunden werden. Die können bei Google bezogen werden und über den LINK im HEAD als CSS eingebunden werden. Allerdings sind eigene WOFF Schriften stattdessen zu empfehlen.

Google Webfonts einbinden

AttributBedeutung

CSS Eigenschaften für Text

CSSWerteBedeutung
font:italic bold 12px/30px Georgia serif;Kurzschreibweise für die Font Eigenschaften: font-weight font-size/line-height font-family.
font-size:14px;Schriftgröße mit absoluten Werten z.B. wie Pixel oder auch relative Größe wie REM.
font-weight:bold; 800; 300;Schriftschnitt z.B. Bold oder Light. Bei Google Webfonts sind die Schnitte meist Zahlen. Je niedriger desto dünner. 400 ist dann Dünn. 700 ist Fett.
font-family:verdank; sans-serif;Schriftfamilie. Man sollte den Systemschriften wie Verdana oder Arial Vorzug gegenüber anderen Schriften geben. Diese sind schneller geladen. Man kann auch gut damit auskommen die Schrift grob über sans-serif (Serifenlos) oder serif (Serifenschrift) zu definieren. Je nach Gerät wird dann eine typische genommen. Wenn man andere Schriften verwendet, dann am Besten als WOFF bzw. WOFF2 Schrift.
line-height:18px;Zeilenabstand. Je kleiner die Schrift, desto größer sollte das Verhältnis von Schriftgröße und Zeilenabstand sein. Bei großen Schriften kann es 1:1 oder sogar kleiner sein.
list-style-type:none, circle, square, disc, decimal, lower-roman, upper-roman, lower-greek, decimal-leading-zero, armenian, georgian, inheritnone = Kein Aufzählungszeichen, circle = Kreis, nur Rahmen, square = Quadrat, disc = Gefüllter Kreis, decimal = Dezimalzahlen (1. ,2. , 3. , ...), lower-roman = Kleine römische Zahlen (i. ,ii. ,iii. , ...), upper-roman = Grosse römische Zahlen (I. ,II. , III., ...), decimal-leading-zero = Dezimalzahlen mit führender 0 (01. ,02. , 03. , ...), lower-greek = Kleine griechische Nummerierung (alpha, beta, gamma,...), lower-latin = Kleines ABC (a. ,b., c. , ...), upper-latin = Große ABC (A., B. ,C. , ...), armenian = Armenische Nummerierung, georgian = Georgische Nummerierung, Inherit = erbt vom letzten definierten Elternelement
letter-spacing:4px;Spationieren bzw. Zeichenabstand ist das Erhöhen des Buchstabenabstandes. Die muß mitunter unbedingt gemacht werden. Z.B. liest sich je nach Schrift der Wort click wie dick. In so einem Fall wird das letter-spacing für das Wort etwas erhöht. Das habe ich mal bei einer Werbung von Apple gesehen. 🙂
text-align:left; right; center; justify;Absatzausrichtung: linksbündig, zentriert, Blocksatz etc. Text-align greift nur bei Text und INLINE-Elementen. Damit können keine BLOCK-Elemente ausgerichtet werden.
vertical-align:sub; super; baseline (Standard); top; bottom; middle; text-top; text-bottom; super; baseline; top; bottom; middle; text-top; text-bottom;Vertikale Ausrichtung bei Elementen mit der Eigenschaft display: TABEL-DATA. Ist für Tabellen gedacht.
text-decoration:none; overline; underline; line-through;Unterstreichen und andere Auszeichnungen. Ist ein Standardwert bei dem Link (a).
text-indent:15px;Texteinzug der ersten Zeile.
text-shadow:2px 2px 4px #ff0000;Schlagschatten. Verschiebung auf der X- und Y-Achse sowie Weichzeichner und Farbe. Vergleichbar zu Box-Shadow. Kann mit Komma getrennt mehrfach angewendet werden. RGBA Werte ergeben meist ein weicheres Ergebnis.
text-transform:uppercase; lowercase; capitalize;Großbuchstaben, Kleinbuchstaben, Kapitälchen
orphans:3; 5; (...)Verhindert einzelne Zeilen am Ende einer neuen Seite oder Spalte. Entspricht dem typographischen Begriff "Schusterjunge". "Der Schusterjunge weiß nicht wo er hin soll."
widows:3; 5; (...)Verhindert einzelne Zeilen zu Beginn einer neuen Seite oder Spalte. Entspricht dem typographischen Begriff "Hurenkind". "Das Hurenkind weiß nicht wo es herkommt."
page-break-beforealways; avoid; left; right; autoErzeugt einen Spalten bzw. Seitenumbruch vor dem Element.
page-break-insideavoid; autoVerhindert den Umbruch innerhalb des Textes (avoid) oder erlaubt den Umbruch (auto).
page-break-afteralways; avoid; left; right; autoErzeugt einen Spalten bzw. Seitenumbruch nach dem Element.
-webkit-column-break-inside:avoid;Element wird bei Webkit Browsern (Safari, Chrome) nicht umbrochen sondern beginnt vollständig auf der neuen Seite oder Spalte.
column-span:2Elemente mit dieser Eigenschaft können in ihrer Breite über mehrere Spalten laufen.

FrageAntwort
Die Überschrift soll in einer dünnen Variante der Schrift Lora erscheinen....http://fonts. googleapis.com/css? family=Lora:300...

font-family: lora;
font-weight: 700;


► Weitere Infos

Interne Quellen

Im Skript gibt es die textbezogenen Übersichten und weitere Beispiele für die Gestaltung von Text.


Externe Quellen

Kompatibilität

http://caniuse.com/#feat=css-textshadow

Bis auf ein paar Abweichungen im Zusammenhang mit Tex-Shadow im IE werden die textbezogenen Eigenschaften sehr gut unterstützt.


CSS2 Text

http://www.w3.org/TR/CSS2/text.html

Original W3C CSS2 Recommendation für den Gebrauch texbezogener Eigenschaften


Selektoren auf selfhtml.wiki

http://wiki.selfhtml.org/wiki/Kategorie:Typographie

Übersicht der Typografie-Beiträge auf Selfhtml.


#webtypobuch

http://webtypobuch.de

Das #webtypobuch von Gerrit van Aaken kann als E-Book kostenlos heruntergeladen werden. "Allen YouTubes und Instagrams zum Trotz besteht das Web auch in den Zehnerjahren zu weiten Teilen aus Text. Es sollte uns nicht gleichgültig sein, wie dieser gestaltet und dargestellt wird." (Zitat aus webtypobuch.de)


Letterpress for a digital Age

http://csstypeset.com

Praktischer Editor für die Erzeugung von Schrift und CSS Code.


Google Webfonts

https://www.google.com/fonts

Übersicht der kostenlosen Google Webfonts.


Text-Shadow Beispiele

http://designshack.net(...)text-shadows-you-can-copy-and-paste/

Beispiele für den Gebrauch von Text-Shadow.


Ryker-Ipsum

http://www.rikeripsum.com/#!/

Blindtext ist im Gestaltungsprozess eine wichtige Hilfe. Sinnvollerweise benutzen wir dafür natürlich Star-Trek Zitate von Comannder Ryker.