SlideShare une entreprise Scribd logo
1  sur  33
Télécharger pour lire hors ligne
Einführung in die
(Web-)Typografie
Jens Weigel
Designer
»Schrift verhilft der Sprache zur
Kommunikation. Sie will und wird
gelesen werden. Die Schrift erzeugt
eine Stimme im Kopf.«
»Gute Typographie bemerkt man
so wenig wie gute Luft zum Atmen.
Schlechte merkt man erst, wenn es
einem stinkt.«
Kurt Weidemann
jensweigel.de
Einführung in die (Web-)Typografie
Grundlegende
Begriffe
Einführung in die (Web-)Typografie
jensweigel.de
Grundlegende Begriffe
Hamburgewr
Serifen
Punzen Abstrich
Auf- oder Haarstrich
Glyphe
Einführung in die (Web-)Typografie
jensweigel.de
Grundlegende Begriffe
ABCDEF Versalien
Majuskeln text-transform:uppercase;
abcdef Gemeine
Minuskeln
text-transform:lowercase;
text-transform: none; /* default */
ff fl ffl
ff fl ffl
Ligaturen font-feature-settings: ”liga=0”;
ß & ä ö ü auch Ligaturen
jensweigel.de
Einführung in die (Web-)Typografie
Glype
Einführung in die (Web-)Typografie
jensweigel.de
Grundlegende Begriffe
Spationierung
HambDie Spationierung wird für jede
Glyphe eingestellt. Sie stellt ein
harmonisches Schriftbild sicher.
Einführung in die (Web-)Typografie
jensweigel.de
Grundlegende Begriffe
Spationierung
Obwohl die Japaner als siebtgrößte aus-
ländische Bevölkerungsgruppe eine kleine
Minderheit bilden, prägen sie seit über 50
Jahren das Stadtbild und bereichern das
wirtschaftliche und kulturelle Leben der
Stadt. Die meisten in Düsseldorf lebenden
Japaner wurden von ihren Arbeitgebern
nach Deutschland entsandt und sind für
wenige Jahre oder kurzfristige Einsätze in
der Stadt. Es handelt sich überwiegend um
gutbezahlte Spezialisten und Führungs-
kräfte sowie deren Familienangehörige.
Daneben studieren regelmäßig junge Ja-
paner an der Musikhochschule oder der
Kunstakademie.
letter-spacing: 0.2em; Probleme:
• Schrift ist Sprache
• Sub-Pixel Positioning
Einführung in die (Web-)Typografie
jensweigel.de
Grundlegende Begriffe
Kerning
AV Toll Voll Vhs
AV Toll Voll Vhs
ohne Kerning
mit Kerning
Das Kerning regelt den Abstand
bei zwei aufeinander treffenden
Buchstabenpaaren.
jensweigel.de
Einführung in die (Web-)Typografie
Schrift
Einführung in die (Web-)Typografie
jensweigel.de
Schrift
Hamburgefonts
Der braune Fuchs
Schriftgrad & Durchschuß
Grundline
x-Höhe
VersalhöheOberlängen
Unterlängen
Durchschuß
font-size line-height
Einführung in die (Web-)Typografie
jensweigel.de
Schrift
Schriftgrad & Durchschuß
Einheiten
font-size line-height
px /* Pixel */ Feste Größe
em Größe richtet sich nach
HTML-Elternelemente
Zeilenhöhe richtet sich
nach font-size; Einheit
kann auch weggelassen
werden.
rem Größe richtet sich nach
root
keine Infos
% /* Prozent */ Größe richtet sich nach
Elternelemente
Zeilenhöhe richtet sich
nach font-size von root
pt /* Punkt */ Feste Größe;
eigentlich eine Maßeinheit 1pt = 0,3527 mm
Einführung in die (Web-)Typografie
jensweigel.de
Schrift
Tiefergehender
How to Size Text in CSS
Css font-size: em vs. px vs. pt vs. percent
Font sizing with rem
Refine your Web type with this crash course on the CSS line-height property
Schriftgrad & Durchschuß
Einführung in die (Web-)Typografie
jensweigel.de
Schrift
serif sans-serif
Tiefergehender
Schriftklassifikation in a nutshell
Schriftklassifikation und Schriftmischung (SlideShare, Blog)
Klassifikation nach DIN 16518
font-family: ”Tolle Schrift”,
Systemschrift,
serif;
font-family: ”Tolle Schrift”,
Systemschrift,
sans-serif;
cursive fantasy monospace
Klassifikation
Einführung in die (Web-)Typografie
jensweigel.de
Schrift
Schriftschnitte
Regular
Italic
Bold
Bold italic
Kapitälchen
Condensed
Extended
font-weight: normal;
font-style: italic;
font-weight: bold; /* od. 700 */
font-style: italic; font-weight: bold;
font-variant: small-caps;
Working Draft: font-stretch: condensed;
Working Draft: font-stretch: expanded;
Einführung in die (Web-)Typografie
jensweigel.de
Schrift
weitere Auszeichnungen
Iquistionem eaturerum, omnis autempo ratio-
ribus aut odi que nonsequias con rest haruptam
voluptaecto dit que dolupta tibusam harchil
itaepe laut quis di cus
Unterstrichen
text-decoration: underline; text-decoration: line-through;
Iquistionem eaturerum, omnis autempo ratio-
ribus aut odi que nonsequias con rest haruptam
voluptaecto dit que dolupta tibusam harchil
itaepe laut quis
Durchgestrichen
Iquistionem eaturerum, omnis autempo ratio-
ribus aut odi que nonsequias con rest haruptam
voluptaecto dit que dolupta tibusam harchil
itaepe laut quis di cus
Oberstrich
text-decoration: overline;
text-decoration-style: solid | double |
dotted | dashed | wavy
text-decoration-color: #f00;
Zukunft
jensweigel.de
Einführung in die (Web-)Typografie
Webfonts
Einführung in die (Web-)Typografie
jensweigel.de
Webfonts
WOFF
Formate
EOT TTF/OTF
• Microsoft-Format
• nur IE ab 5.5
• Umständlich zu
erstellen
• weit verbreitet
• wird fast von jedem
Browser unterstütz
• da nicht geschützt
wurde es von den
Fontherstellern
nicht unterstützt
• modernstes
Containerformat
• wird von allen Brow-
sern unterstützt
außer Android
Systembrowser
SVG ist inzwischen nicht mehr notwendig.
Einführung in die (Web-)Typografie
jensweigel.de
Webfonts
Einbinden
Selbstgehostet
• meist nur WOFF und EOT
@font-face {
font-family: 'Schriftname';
src: url('dateiname.eot‘);
src: local('?'),
url('dateiname.woff‘) format('woff'),
url('dateiname.ttf') format('truetype')
font-weight: normal;
font-style: normal;
}
fontshop.com
myfonts.com
CDN
• teilweise speziell
überarbeitete Schriften
• große Auswahl von
Schriften
typekit.com
fonts.com
jensweigel.de
Einführung in die (Web-)Typografie
Absatz
Einführung in die (Web-)Typografie
jensweigel.de
Absatz
Absatzarten
linksbündig rechtsbündig
Iquistionem eaturerum, omnis autempo
ratioribus aut odi que nonsequias con rest
haruptam voluptaecto dit que dolupta tibusam
harchil itaepe laut quis di cus dolorum es arum
harumendam, tessi blaboritis exerum volo
cone ilit que voluptae. Ut harum ex et magni
doluptatur reperunt, inctur mo est, comniatem
sitatum ad eumque veliqui debit vellace
restiurem. Ebis simporro volo cum harumquis
esciis ressinc temperisci blam, to conseque
plautemquia alisquunt fugiam faccaest, sapitia
eles estior sam, volorae ptatus dit, aspero que
consed quame sapiet aut rep
Iquistionem eaturerum, omnis autempo
ratioribus aut odi que nonsequias con rest
haruptam voluptaecto dit que dolupta tibusam
harchil itaepe laut quis di cus dolorum es arum
harumendam, tessi blaboritis exerum volo
cone ilit que voluptae. Ut harum ex et magni
doluptatur reperunt, inctur mo est, comniatem
sitatum ad eumque veliqui debit vellace
restiurem. Ebis simporro volo cum harumquis
esciis ressinc temperisci blam, to conseque
plautemquia alisquunt fugiam faccaest, sapitia
eles estior sam, volorae ptatus dit, aspero que
consed quame sapiet aut rep
text-align: left; /* default */ text-align: right;
Einführung in die (Web-)Typografie
jensweigel.de
Absatz
Absatzarten
Blocksatz zentriert
Iquistionem eaturerum, omnis autempo
ratioribus aut odi que nonsequias con rest
haruptam voluptaecto dit que dolupta tibusam
harchil itaepe laut quis di cus dolorum es arum
harumendam, tessi blaboritis exerum volo
cone ilit que voluptae. Ut harum ex et magni
doluptatur reperunt, inctur mo est,
comniatem sitatum ad eumque veliqui debit
vellace restiurem. Ebis simporro volo cum
harumquis esciis ressinc temperisci blam, to
conseque plautemquia alisquunt fugiam fac-
caest, sapitia eles estior sam, volorae ptatus dit,
asperoqueconsed quame sapiet aut rep
Iquistionem eaturerum, omnis autempo
ratioribus aut odi que nonsequias con rest
haruptam voluptaecto dit que dolupta tibusam
harchil itaepe laut quis di cus dolorum es arum
harumendam, tessi blaboritis exerum volo
cone ilit que voluptae. Ut harum ex et magni
doluptatur reperunt, inctur mo est, comniatem
sitatum ad eumque veliqui debit vellace
restiurem. Ebis simporro volo cum harumquis
esciis ressinc temperisci blam, to conseque
plautemquia alisquunt fugiam faccaest, sapitia
eles estior sam, volorae ptatus dit, aspero que
consed quame sapiet aut rep
text-align: justify; text-align: center;
Einführung in die (Web-)Typografie
jensweigel.de
Absatz
Einzüge
Eingerückt hängender Einzug
Iquistionem eaturerum, omnis autempo ra-
tioribus aut odi que nonsequias con rest ha-
ruptam voluptaecto dit que dolupta tibusam
harchil itaepe laut quis di cus dolorum es arum
harumendam, tessi blaboritis exerum volo cone
ilit que voluptae. Ut harum ex et magni do-
luptatur reperunt, inctur mo est, comniatem
sitatum ad eumque veliqui debit vellace restiu-
rem. Ebis simporro volo cum harumquis esciis
ressinc temperisci blam, to conseque plautem-
quia alisquunt fugiam faccaest, sapitia eles es-
tior sam, volorae ptatus dit, aspero que consed
quame sapiet aut rep
Iquistionem eaturerum, omnis autempo rati-
oribus aut odi que nonsequias con rest ha-
ruptam voluptaecto dit que dolupta tibusam
harchil itaepe laut quis di cus dolorum es
arum harumendam, tessi blaboritis exerum
volo cone ilit que voluptae. Ut harum ex et
magni doluptatur reperunt, inctur mo est,
comniatem sitatum ad eumque veliqui debit
vellace restiurem. Ebis simporro volo cum
harumquis esciis ressinc temperisci blam, to
conseque plautemquia alisquunt fugiam fac-
caest, sapitia eles estior sam, volorae ptatus
dit, aspero que consed quame sapiet aut rep
text-indent: 1em; Wroking Draft: text-align: hanging;
Einführung in die (Web-)Typografie
jensweigel.de
Absatz
Initialen
Iquistionem eaturerum, omnis autempo ra-
tioribus aut odi que nonsequias con rest ha-
ruptam voluptaecto dit que dolupta tibusam
harchil itaepe laut quis di cus dolorum es arum
harumendam, tessi blaboritis exerum volo cone
ilit que voluptae. Ut harum ex et magni do-
luptatur reperunt, inctur mo est, comniatem
sitatum ad eumque veliqui debit vellace restiu-
rem. Ebis simporro volo cum harumquis esciis
ressinc temperisci blam, to conseque plautem-
quia alisquunt fugiam faccaest, sapitia eles es-
tior sam, volorae ptatus dit, aspero que consed
quame sapiet aut rep
:first-letter {font-size: 3em;
jensweigel.de
Einführung in die (Web-)Typografie
Detailtypografie
Einführung in die (Web-)Typografie
jensweigel.de
Detailtypografie
Anführungszeichen
”Die englischen Anführungszeichen
sind bei deutschen Texten falsch”
„Diese Anführungszeichen sind
besser. Eselsbrücke: 99 66“
Die Systemschriften Verdana und Trebuchet haben keine korrekten
deutschen Abführungszeichen.
Einführung in die (Web-)Typografie
jensweigel.de
Detailtypografie
Anführungszeichen
«Die französischen Anführungszei-
chen auch Guillemet genannt»
»… werden im deutschen
andersherum gesetzt«
Einführung in die (Web-)Typografie
jensweigel.de
Detailtypografie
Bindestrich und Devis
Bindestriche werden für Worttren-
nungen, gekoppelte Begriffe (Die
Prism-Affäre) und »Auflistungen«
(ein-, zwei-, dreimal) verwendet.
Im Web kann die CSS-Anweisung hy-
phens:auto; vor automatisches setzen
von Bindestrichen. Nachteil ist, dass
nach caniuse.com Chrome den Befehl
nicht unterstützt. Außerdem gibt
es keine Begrenzungsmöglichkeiten
wieviel Zeilen hintereinander mit ei-
ner Trennung enden.
Das Devis hingegen wird als Ge-
dankenstrich gestzt – natürlich
geht das auch im Web. Auch als Bis-
Strich wird das Devis verwendet.
jensweigel.de
Einführung in die (Web-)Typografie
Quellen
Einführung in die (Web-)Typografie
jensweigel.de
Quellen
W3C CSS2 http://www.w3.org/TR/CSS2/
W3C CSS3-Fonts http://www.w3.org/TR/css3-fonts/
Wikipedia http://www.wikipedia.de
Smashing Magazin http://www.smashingmagazine.com/
Weitere Infos
Fontrendering A Closer Look At Font Rendering
Font-Smoothing Schriftdarstellung mit -webkit-font-smoothing
white-space http://css-tricks.com/almanac/properties/w/whitespace/
Anführungszeichen Typografie der Anführungszeichen:
Gänsefüßchen und Guillemets
Typografie.info
jensweigel.de
Einführung in die (Web-)Typografie
Fragen?
Vielen Dank für eure
Aufmerksamkeit
Jens Weigel
Designer

Contenu connexe

En vedette

Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Applitools
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at WorkGetSmarter
 
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...DevGAMM Conference
 
Barbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationBarbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationErica Santiago
 
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellGood Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellSaba Software
 

En vedette (20)

Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
 
Barbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationBarbie - Brand Strategy Presentation
Barbie - Brand Strategy Presentation
 
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellGood Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
 

Einführung in die (Web-)Typografie

  • 2. »Schrift verhilft der Sprache zur Kommunikation. Sie will und wird gelesen werden. Die Schrift erzeugt eine Stimme im Kopf.«
  • 3. »Gute Typographie bemerkt man so wenig wie gute Luft zum Atmen. Schlechte merkt man erst, wenn es einem stinkt.« Kurt Weidemann
  • 4. jensweigel.de Einführung in die (Web-)Typografie Grundlegende Begriffe
  • 5. Einführung in die (Web-)Typografie jensweigel.de Grundlegende Begriffe Hamburgewr Serifen Punzen Abstrich Auf- oder Haarstrich Glyphe
  • 6. Einführung in die (Web-)Typografie jensweigel.de Grundlegende Begriffe ABCDEF Versalien Majuskeln text-transform:uppercase; abcdef Gemeine Minuskeln text-transform:lowercase; text-transform: none; /* default */ ff fl ffl ff fl ffl Ligaturen font-feature-settings: ”liga=0”; ß & ä ö ü auch Ligaturen
  • 7. jensweigel.de Einführung in die (Web-)Typografie Glype
  • 8. Einführung in die (Web-)Typografie jensweigel.de Grundlegende Begriffe Spationierung HambDie Spationierung wird für jede Glyphe eingestellt. Sie stellt ein harmonisches Schriftbild sicher.
  • 9. Einführung in die (Web-)Typografie jensweigel.de Grundlegende Begriffe Spationierung Obwohl die Japaner als siebtgrößte aus- ländische Bevölkerungsgruppe eine kleine Minderheit bilden, prägen sie seit über 50 Jahren das Stadtbild und bereichern das wirtschaftliche und kulturelle Leben der Stadt. Die meisten in Düsseldorf lebenden Japaner wurden von ihren Arbeitgebern nach Deutschland entsandt und sind für wenige Jahre oder kurzfristige Einsätze in der Stadt. Es handelt sich überwiegend um gutbezahlte Spezialisten und Führungs- kräfte sowie deren Familienangehörige. Daneben studieren regelmäßig junge Ja- paner an der Musikhochschule oder der Kunstakademie. letter-spacing: 0.2em; Probleme: • Schrift ist Sprache • Sub-Pixel Positioning
  • 10. Einführung in die (Web-)Typografie jensweigel.de Grundlegende Begriffe Kerning AV Toll Voll Vhs AV Toll Voll Vhs ohne Kerning mit Kerning Das Kerning regelt den Abstand bei zwei aufeinander treffenden Buchstabenpaaren.
  • 11. jensweigel.de Einführung in die (Web-)Typografie Schrift
  • 12. Einführung in die (Web-)Typografie jensweigel.de Schrift Hamburgefonts Der braune Fuchs Schriftgrad & Durchschuß Grundline x-Höhe VersalhöheOberlängen Unterlängen Durchschuß font-size line-height
  • 13. Einführung in die (Web-)Typografie jensweigel.de Schrift Schriftgrad & Durchschuß Einheiten font-size line-height px /* Pixel */ Feste Größe em Größe richtet sich nach HTML-Elternelemente Zeilenhöhe richtet sich nach font-size; Einheit kann auch weggelassen werden. rem Größe richtet sich nach root keine Infos % /* Prozent */ Größe richtet sich nach Elternelemente Zeilenhöhe richtet sich nach font-size von root pt /* Punkt */ Feste Größe; eigentlich eine Maßeinheit 1pt = 0,3527 mm
  • 14. Einführung in die (Web-)Typografie jensweigel.de Schrift Tiefergehender How to Size Text in CSS Css font-size: em vs. px vs. pt vs. percent Font sizing with rem Refine your Web type with this crash course on the CSS line-height property Schriftgrad & Durchschuß
  • 15. Einführung in die (Web-)Typografie jensweigel.de Schrift serif sans-serif Tiefergehender Schriftklassifikation in a nutshell Schriftklassifikation und Schriftmischung (SlideShare, Blog) Klassifikation nach DIN 16518 font-family: ”Tolle Schrift”, Systemschrift, serif; font-family: ”Tolle Schrift”, Systemschrift, sans-serif; cursive fantasy monospace Klassifikation
  • 16. Einführung in die (Web-)Typografie jensweigel.de Schrift Schriftschnitte Regular Italic Bold Bold italic Kapitälchen Condensed Extended font-weight: normal; font-style: italic; font-weight: bold; /* od. 700 */ font-style: italic; font-weight: bold; font-variant: small-caps; Working Draft: font-stretch: condensed; Working Draft: font-stretch: expanded;
  • 17. Einführung in die (Web-)Typografie jensweigel.de Schrift weitere Auszeichnungen Iquistionem eaturerum, omnis autempo ratio- ribus aut odi que nonsequias con rest haruptam voluptaecto dit que dolupta tibusam harchil itaepe laut quis di cus Unterstrichen text-decoration: underline; text-decoration: line-through; Iquistionem eaturerum, omnis autempo ratio- ribus aut odi que nonsequias con rest haruptam voluptaecto dit que dolupta tibusam harchil itaepe laut quis Durchgestrichen Iquistionem eaturerum, omnis autempo ratio- ribus aut odi que nonsequias con rest haruptam voluptaecto dit que dolupta tibusam harchil itaepe laut quis di cus Oberstrich text-decoration: overline; text-decoration-style: solid | double | dotted | dashed | wavy text-decoration-color: #f00; Zukunft
  • 18. jensweigel.de Einführung in die (Web-)Typografie Webfonts
  • 19. Einführung in die (Web-)Typografie jensweigel.de Webfonts WOFF Formate EOT TTF/OTF • Microsoft-Format • nur IE ab 5.5 • Umständlich zu erstellen • weit verbreitet • wird fast von jedem Browser unterstütz • da nicht geschützt wurde es von den Fontherstellern nicht unterstützt • modernstes Containerformat • wird von allen Brow- sern unterstützt außer Android Systembrowser SVG ist inzwischen nicht mehr notwendig.
  • 20. Einführung in die (Web-)Typografie jensweigel.de Webfonts Einbinden Selbstgehostet • meist nur WOFF und EOT @font-face { font-family: 'Schriftname'; src: url('dateiname.eot‘); src: local('?'), url('dateiname.woff‘) format('woff'), url('dateiname.ttf') format('truetype') font-weight: normal; font-style: normal; } fontshop.com myfonts.com CDN • teilweise speziell überarbeitete Schriften • große Auswahl von Schriften typekit.com fonts.com
  • 21. jensweigel.de Einführung in die (Web-)Typografie Absatz
  • 22. Einführung in die (Web-)Typografie jensweigel.de Absatz Absatzarten linksbündig rechtsbündig Iquistionem eaturerum, omnis autempo ratioribus aut odi que nonsequias con rest haruptam voluptaecto dit que dolupta tibusam harchil itaepe laut quis di cus dolorum es arum harumendam, tessi blaboritis exerum volo cone ilit que voluptae. Ut harum ex et magni doluptatur reperunt, inctur mo est, comniatem sitatum ad eumque veliqui debit vellace restiurem. Ebis simporro volo cum harumquis esciis ressinc temperisci blam, to conseque plautemquia alisquunt fugiam faccaest, sapitia eles estior sam, volorae ptatus dit, aspero que consed quame sapiet aut rep Iquistionem eaturerum, omnis autempo ratioribus aut odi que nonsequias con rest haruptam voluptaecto dit que dolupta tibusam harchil itaepe laut quis di cus dolorum es arum harumendam, tessi blaboritis exerum volo cone ilit que voluptae. Ut harum ex et magni doluptatur reperunt, inctur mo est, comniatem sitatum ad eumque veliqui debit vellace restiurem. Ebis simporro volo cum harumquis esciis ressinc temperisci blam, to conseque plautemquia alisquunt fugiam faccaest, sapitia eles estior sam, volorae ptatus dit, aspero que consed quame sapiet aut rep text-align: left; /* default */ text-align: right;
  • 23. Einführung in die (Web-)Typografie jensweigel.de Absatz Absatzarten Blocksatz zentriert Iquistionem eaturerum, omnis autempo ratioribus aut odi que nonsequias con rest haruptam voluptaecto dit que dolupta tibusam harchil itaepe laut quis di cus dolorum es arum harumendam, tessi blaboritis exerum volo cone ilit que voluptae. Ut harum ex et magni doluptatur reperunt, inctur mo est, comniatem sitatum ad eumque veliqui debit vellace restiurem. Ebis simporro volo cum harumquis esciis ressinc temperisci blam, to conseque plautemquia alisquunt fugiam fac- caest, sapitia eles estior sam, volorae ptatus dit, asperoqueconsed quame sapiet aut rep Iquistionem eaturerum, omnis autempo ratioribus aut odi que nonsequias con rest haruptam voluptaecto dit que dolupta tibusam harchil itaepe laut quis di cus dolorum es arum harumendam, tessi blaboritis exerum volo cone ilit que voluptae. Ut harum ex et magni doluptatur reperunt, inctur mo est, comniatem sitatum ad eumque veliqui debit vellace restiurem. Ebis simporro volo cum harumquis esciis ressinc temperisci blam, to conseque plautemquia alisquunt fugiam faccaest, sapitia eles estior sam, volorae ptatus dit, aspero que consed quame sapiet aut rep text-align: justify; text-align: center;
  • 24. Einführung in die (Web-)Typografie jensweigel.de Absatz Einzüge Eingerückt hängender Einzug Iquistionem eaturerum, omnis autempo ra- tioribus aut odi que nonsequias con rest ha- ruptam voluptaecto dit que dolupta tibusam harchil itaepe laut quis di cus dolorum es arum harumendam, tessi blaboritis exerum volo cone ilit que voluptae. Ut harum ex et magni do- luptatur reperunt, inctur mo est, comniatem sitatum ad eumque veliqui debit vellace restiu- rem. Ebis simporro volo cum harumquis esciis ressinc temperisci blam, to conseque plautem- quia alisquunt fugiam faccaest, sapitia eles es- tior sam, volorae ptatus dit, aspero que consed quame sapiet aut rep Iquistionem eaturerum, omnis autempo rati- oribus aut odi que nonsequias con rest ha- ruptam voluptaecto dit que dolupta tibusam harchil itaepe laut quis di cus dolorum es arum harumendam, tessi blaboritis exerum volo cone ilit que voluptae. Ut harum ex et magni doluptatur reperunt, inctur mo est, comniatem sitatum ad eumque veliqui debit vellace restiurem. Ebis simporro volo cum harumquis esciis ressinc temperisci blam, to conseque plautemquia alisquunt fugiam fac- caest, sapitia eles estior sam, volorae ptatus dit, aspero que consed quame sapiet aut rep text-indent: 1em; Wroking Draft: text-align: hanging;
  • 25. Einführung in die (Web-)Typografie jensweigel.de Absatz Initialen Iquistionem eaturerum, omnis autempo ra- tioribus aut odi que nonsequias con rest ha- ruptam voluptaecto dit que dolupta tibusam harchil itaepe laut quis di cus dolorum es arum harumendam, tessi blaboritis exerum volo cone ilit que voluptae. Ut harum ex et magni do- luptatur reperunt, inctur mo est, comniatem sitatum ad eumque veliqui debit vellace restiu- rem. Ebis simporro volo cum harumquis esciis ressinc temperisci blam, to conseque plautem- quia alisquunt fugiam faccaest, sapitia eles es- tior sam, volorae ptatus dit, aspero que consed quame sapiet aut rep :first-letter {font-size: 3em;
  • 26. jensweigel.de Einführung in die (Web-)Typografie Detailtypografie
  • 27. Einführung in die (Web-)Typografie jensweigel.de Detailtypografie Anführungszeichen ”Die englischen Anführungszeichen sind bei deutschen Texten falsch” „Diese Anführungszeichen sind besser. Eselsbrücke: 99 66“ Die Systemschriften Verdana und Trebuchet haben keine korrekten deutschen Abführungszeichen.
  • 28. Einführung in die (Web-)Typografie jensweigel.de Detailtypografie Anführungszeichen «Die französischen Anführungszei- chen auch Guillemet genannt» »… werden im deutschen andersherum gesetzt«
  • 29. Einführung in die (Web-)Typografie jensweigel.de Detailtypografie Bindestrich und Devis Bindestriche werden für Worttren- nungen, gekoppelte Begriffe (Die Prism-Affäre) und »Auflistungen« (ein-, zwei-, dreimal) verwendet. Im Web kann die CSS-Anweisung hy- phens:auto; vor automatisches setzen von Bindestrichen. Nachteil ist, dass nach caniuse.com Chrome den Befehl nicht unterstützt. Außerdem gibt es keine Begrenzungsmöglichkeiten wieviel Zeilen hintereinander mit ei- ner Trennung enden. Das Devis hingegen wird als Ge- dankenstrich gestzt – natürlich geht das auch im Web. Auch als Bis- Strich wird das Devis verwendet.
  • 30. jensweigel.de Einführung in die (Web-)Typografie Quellen
  • 31. Einführung in die (Web-)Typografie jensweigel.de Quellen W3C CSS2 http://www.w3.org/TR/CSS2/ W3C CSS3-Fonts http://www.w3.org/TR/css3-fonts/ Wikipedia http://www.wikipedia.de Smashing Magazin http://www.smashingmagazine.com/ Weitere Infos Fontrendering A Closer Look At Font Rendering Font-Smoothing Schriftdarstellung mit -webkit-font-smoothing white-space http://css-tricks.com/almanac/properties/w/whitespace/ Anführungszeichen Typografie der Anführungszeichen: Gänsefüßchen und Guillemets Typografie.info
  • 32. jensweigel.de Einführung in die (Web-)Typografie Fragen?
  • 33. Vielen Dank für eure Aufmerksamkeit Jens Weigel Designer