07.06.2018 Contao Konferenz Salzburg
Jonas Hellwig
kulturbanause.de
@_kulturbanause
Front-End-Designer @_kulturbanause
Autor, Dozent
Grundlagen
Mehrsprachigkeit
Styling
Font Loading
Schriftvarianten + Open Type
Variable Fonts
RWD
Schriftgröße
Zeilenabstand
Ausrichtung
Aufteilung
-> Layout, Wirkung der Gestaltung
Wörter
Buchstaben
Abstände
-> Ästhetik
»Web Design is 95% Typography«Oliver Reichenstein
»The responsive web
will be 99.9% typography«James Young
(by Kissmetrics)
#1 Fonts That Are Too Small
#3 Low Contrast Fonts
#4 Poor Line Height for Text
#5 Line Length That’s Too Long
Flietext: 16px und größer
Skalierungsfaktoren berücksichtigen
Design for diversity
Mindestens AA entsprechend WCAG
Flietext: 150% und aufwärts
Mobile Friendly Test berücksichtigen
45 - 75 Zeichen pro Zeile
0000000000 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum deserunt, nesciunt doloribus facere voluptatem, quam consequuntur vero ratione quibusdam dicta eius facilis voluptatibus aliquam ex. Consectetur amet repellat temporibus necessitatibus!
font-kerning, letter-spacing, word-spacing
Ich bin ein Blindtext.
text-align
Ich bin ein Blindtext.
direction
Will you get by with your English in Germany?
هل ستستطيعون التعامل بشكل جيد باللغة الإنجليزية في ألمانيا?
ቋንቋ እንግሊዝኛ ኣብ ጀርመን ከንቀሳቕሰካ ይኽእልዶ?
<html dir="rtl" lang="ar">
writing-mode, text-orientation
Ich bin ein
Blindtext.
text-combine-upright
政府インターネットテレビ:「徳光・木佐の知りたいニッポン!~日本の信用を築いて150年 パスポートの歴史と進化」(2016年10月14日掲載
In diesem Satz wird ein Wort betont.
<q>, <blockquote>, quotes:
In diesem Satz wurde ein Abschnitt
zitiert.
Das ist ein ein Zitat als Block.
:lang()
<p lang="de-DE">
Dieser Satz ist in Deutsch geschrieben.
This sentence is written in English.
Dieser Text hat eine Unterlänge
Dieser Text ist recht lang. Er läuft in zwei Zeilen.
::first-letter, initial-letter, dropcap.js
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum ducimus libero sapiente voluptatibus excepturi quis ullam, repellat fugiat iste veritatis incidunt ipsum asperiores aliquam, perferendis in nihil maxime id nostrum.
Dokument wird angefordert
Webfont unsichtbar -> FOIT
Fallback -> FOUT
Webfont geladen
Spezifikation, Browser-Support
body {
font-display: auto;
}
font-display: optional;
für Text
font-display: block;
für Icons etc.
body {
font-size-adjust: 0.62;
}
body {
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif;
}
body {
font-family: system-ui;
}
text-transform
Dieser Text ist ein Blindtext.
font-variant bzw. font-variant-caps
Dieser Text ist ein Blindtext.
font-variant bzw. font-variant-ligatures
Spezifikation
font-variant bzw. font-variant-position
E=MC2
H2O
font-variant bzw. font-variant-numeric
🧙 Harry fuhr auf Gleis 9 3/4 ab.
c2sc calt dlig frac liga lnum onum ordn pnum salt smcp ss## subs sups swsh tnum
.class {
font-feature-settings: "swsh";
}
init
Dieser Text wird mit seltenen Open Type Features ausgestattet.
»Authors should generally use
"font-variant" and its related subproperties whenever possible and only use "font-feature-settings" for special cases where its use is the only way of accessing a particular infrequently used font« CSS Spezifikation
»There is also a low-level property font-feature-settings which can be used to support legacy browsers. Whenever possible, however, you should use the more modern font-variant properties.« Jonathan Harrell
»A variable font is a single font file which behaves like multiple styles.« Richard Rutter
@font-face {
font-family: "Avenir Next Variable";
src: url("AvenirNext_Variable.ttf") format("truetype");
}
h1 {
font-family: "Avenir Next Variable";
font-variation-settings: 'wght' 400, 'wdth' 75;
}
Browser-Support, Illustrator, Photoshop
@supports (font-variation-settings: "wght" 400) {
/* CSS Code */
}
Schriftgröße gleicht Betrachtungsabstand aus
Verhältnisse von Headline zu Fließtext beachten
Relative Einheiten wie em, rem nutzen
vw, vh, vmin, vmax
Neue Eigenschaften: font-min-size, font-max-size
body {
font-size: calc(14px + (22 - 16) * ((100vw - 320px) / (1600 - 320)));
}
Benutzbarkeit
Mehrsprachigkeit
Performance
Open Type Features
RWD
kulturbanause.de
blog.kulturbanause.de
@_kulturbanause