Test Schriften

Schriftschnitt Bold im Editor

Dieser Text ist innerhalb eines Absatzes <p>. Er übernimmt Schrift und Schriftschnitt von <body>. Die Einstellungen werden unter > Einstellungen > Font > Konvergent Projekt-Font für den Text eingerichtet.

Für Fette Schriften stehen im Editor die Ikone "B" und die dafür formatierten Formate aus der Liste bereit.

Mit dem Editor Shriften Fett stellen:
- Mit Klick auf die Schatfläche "B" wird der markierte Text Fett.
- Der markierte Text wird mit dem HTML-Element umgeben

<strong>Markierter Text</strong>

- Die CSS Regel ersetzt die Schrift die Body vorgiebt und wählt den angegeben Schriftschnitt. Da innerhalb einer Schriftfamilie ein "Regular" eine Stärke "font-weight:normal" haben muss, ist das bei einem zusätzlichen fetten Schriftschnitt ebenfalls der Fall. Angaben wie "font-weight:bold" quetscht eine Schrft bis sie Fetter aussieht, WENN der Webfont nicht für diese CSS-Regel optimiert ist. Daher ist die Regel folgendermassen:

strong, b {
 font-family: $TemplateSystemFontDataFont1;
 font-weight: normal!important;
}

Schriftfamilien die für "font-weight" optimiert sind

Optimierte Webfonts (z.B. OpenSans, PTSans, Roboto, Arial, Times) wechseln den Schriftschnitt gemäss der Angabe von "font-weight:normal" oder "font-weight:bold". CSS kennt verschiedene Abstufungen für die Schriftdicke: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Diese Einstellungen greiffen aber nicht, bei Schriften aus dem Printbereich, die zu Webfonts konvertiert wurden oder als einzelne Schriftschnitte angeboten werden.

Weiterlesen, Artikel auf Mediaevent

CSS Regeln aus InDesign-Exporten

In der ersten Phase der Konvergent Entwicklung wurden nur drei Schriften zur Wahl angeboten. Für <body> (Text) wird an alle Elemente vererbt, für <nav> alle Navigations-Elemente, für <h1>, <h2 usw. > alle Titelschriften. Bisher wurden alle Schriftangaben aus InDesign-Exporten ignoriert, da sie durch die "body"-Angabe vererbt wurde oder durch "font-weight" für die Weboptimierten Schriften gesetzt wurde.

Komplizierter wird es, wenn für Regular und Bold verschiedene Schriftschnitte geladen werden. (Viele Webdesigner sprechen von NICHT-tauglichen Webfonts!) In unserem Fall werden optimierte Webfonts neben einzelnen Schriftschnitten verwendet, dieser Mix erfordert Regeln, die es für einen reibungslosen Ablauf zu beachten gillt.

Die exportierten InDesign-Formate enthalten Angaben zu Schriftfamilie, Schriftschnitt, Farbe, Laufweite, Grösse und Zeilenabstand. Schriftfamilie und Schriftschnitt können nur benutzt werden, wenn der gleiche Webfont auch mit InDesign benutzt wird. Das wäre mit Webfonts wie OpenSans oder Roboto einfach möglich. Da aber auch andere Schriften verwendet weren, kann es keine einheitliche Verwendung dafür geben.

In InDesign vorgegebene Regeln:

Schriftfamilien
s- > Serifen Schriften
g- > Groteske Schriften

Absatzformate
-tit > Titelschriften
-fett > Fette Schriftschnitte
-neg > bezieht sich auf die Farbe (--colneg) (Negativ, häufug weiss)
-leg > Legenden Formate
-ez > Einzüge
-inh > Inhalte
-tim > Timeline (Absätze mit Kreismarkierungen)
-box > Boxen (Randkontur oder Hintergrundfarbe, Innenabstand)
-tab > Tabellenformate
-lin > Linien
-strich > Linientyp
-punkt > Linientyp

Zeichenformate
z- > Zeichenformate (InDesign) oder <span> (html)
z-vers > Versal (uppercase)
z-uts > Unterstreichungen
z-transparent > Farbe Transparent
z-col1, z-col2, z-col3, z-col4, z-col5 > Farbzuweisungen dynamisch
z-hoch > Hochgestellt
z-pfeil > Pfeil in ..svg/icons/arrow.svg
z-initial > Initial, Unterschneidung normal (Abstand zwischen Initial und Text)
z-initial-plus > Initial, Unterschneidung 0.05em (Abstand wird vergrössert)
z-initial-minus > Initial, Unterschneidung -0.05em (Abstand wird verkleinert)

Diese Klassenbezeichnungen können fast beiebig zusammengesetzt werden. Das kann zu folgenden Konstrukten führen:

Beispiel, Abstände für Boxen:

p.g-box-col1-ts img, p.g-box-col1-ts-fett img, p.g-box-col1-tw img, p.g-box-col1-tw-fett img,
p.g-box-col4-ts img, p.g-box-col4-ts-fett img, p.g-box-col4-tw img, p.g-box-col4-tw-fett img,
p.g-box-col5-ts img, p.g-box-col5-ts-fett img, p.g-box-col5-tw img, p.g-box-col5-tw-fett img {
   margin: -5px -5px 0 -5px;
   width: calc(100% + 10px);
}

Beispiel Einzüge:

p.g-inh-aufz span.z-vers-neg, p.g-inh-ez span.z-vers-neg,
p.g-inh-fett-aufz span.z-vers-neg, p.g-inh-fett-ez span.z-vers-neg,
p.g-inh-neg-aufz span.z-vers-neg, p.g-inh-neg-ez span.z-vers-neg,
p.g-inh-fett-neg-aufz span.z-vers-neg, p.g-inh-fett-neg-ez span.z-vers-neg {
   margin-left: 0px;
   min-width:auto;
   display:block;
}

Demzufolge müssen alle Text-Formate (Titel und Navigation ausgenommen) die "-fett" enthalten aufgelistet werden um Schriftfamilie und Schriftschnitt, font-weight auf "normal" zurückzusetzen. Das würde etwas so aussehen:

p.s-inh-fett, p.s-inh-fett-neg, p.s-leg-fett, 
p.s-leg-fett-neg, p.s-inh-fett-ez, p.s-inh-fett-neg-ez, 
.z-s-tim-fett, .z-s-tim-neg-fett, .s-box-col1-ts-fett, 
.s-box-col4-ts-fett, .s-box-col4-tw-fett, .s-box-col5-ts-fett, 
.s-tab-li-fett, .s-tab-li-fett-neg, .s-tab-re-fett-neg, 
.z-s-fett, .z-s-fett-neg {
   font-family: var(--font1), serif;
   font-weight:normal;
}

p.g-inh-fett, p.g-inh-fett-neg, p.g-leg-fett, 
p.g-leg-fett-neg, p.g-inh-fett-ez, p.g-inh-fett-neg-ez, 
.z-g-tim-fett, .z-g-tim-neg-fett, .g-box-col1-ts-fett, 
.g-box-col4-ts-fett, .g-box-col4-tw-fett, .g-box-col5-ts-fett, 
.g-tab-li-fett, .g-tab-li-fett-neg, .g-tab-re-fett-neg, 
.z-g-fett, .z-g-fett-neg {
   font-family: var(--font2), sans-serif;
   font-weight:normal;
}

Diese Regeln sind aber nur tauglich, für Schriften bei denen ein eigener Schriftschnitt als zusätzliche Datei geladen werden muss. Bei allen "optimierten Webfonts" hingegen, versagt diese Strategie der CSS Deklaration. Zielführender ist es, wenn die Exporttags bereits in Indesign entsprechend angepasst und in CSS entgegengenommen werden.

Kumulieren von Formaten für optimierte Webfonts

In InDesign können die Absatz-, Tabellen- und Zeichenformate beliebig zur gestalterischen Formatierung genitzt werden. Für die Ausgabe als HTML sind einzig das HTML-Elemente für Absatzformate "p" (h1 usw. sind nur für Titel), für Zeichenformate "span", "em" und "strong" auswählbar. Die CSS-Klassen hingegen lassen sich frei wählen und kumulieren. Sie können in InDesign unter "Alle Exporttags bearbeiten" für jedes Element festlegen. bereits verwendet mit der Klasse "Trennungen", die Klasse wurde in den Exporttags gesetzt, für alle Textformate die Trennungen beinhalten sollen. Dazu wurde in CSS eine Regel erstellt:

.Trennungen {
  word-wrap:break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: auto 3;
  hyphenate-limit-lines: 3;
  -webkit-hyphenate-limit-chars: auto 3;
  -webkit-hyphenate-limit-lines: 3;
  -ms-hyphenate-limit-chars: auto 3;
  -ms-hyphenate-limit-lines: 3;
}

Neue Formatangaben für die InDesign-Exporte

Alle Absatz, Tabellen- und Zeichenformate können eine kumulierte Klaase in den Exporttags beinhalten. Folgende zusätzlichen Klassen wären sinnvoll:

Bold (alle Formate die -fett enthalten)
Kursiv (bis jetzt nicht vorhanden)
Bold-Grotesk (alle Formate die g- und -fett enthalten)
Bold-Serif (alle Formate die s- unf -fett enthalten)
Ausz1 (kann für Auszeichnungen verwendet werden)
Ausz2 (kann für Auszeichnungen verwendet werden)

Damit können diese Attribute in einzelnen Klassen benutzt werden.

Wichtige Regel für den praktischen Einsatz

Wenn eine Exportangabe "Bold" mit der CSS-Regel "Bold" korrekt wirken soll, ist es übersichtlicher, wenn damit auch eine Schrift mit Schriftschnitt "Bold" geladen wird.

Für Auszeichnungen, Initialen oder andere abweichende Schriftschnitte können Font3 unf Font4 benutzt werden, um die Schriftdatei zu laden.