Mit den hochwertigen Webfonts von Typekit gestalten Sie eine ansprechende Website, ohne selbst Code schreiben zu müssen.

Im Rahmen Ihres Creative Cloud-Abos haben Sie Zugriff auf Tausende hochwertiger Typekit-Schriften, die Sie direkt in Ihren Designs für Desktop- und mobile Websites einsetzen können.

1. Web-Schrift aus Typekit hinzufügen

Laden Sie die Datei „beautiful-web-typography.zip“ herunter, und öffnen Sie die Beispieldatei „Ike's_Bikes_before.mu“. Wechseln Sie in den Design-Modus, und klicken Sie auf das Text-Werkzeug. Wählen Sie den Text unter der Überschrift „Services“ aus. Klicken Sie anschließend im Bedienfeld „Text“ auf die Schriftenauswahl, und wählen Sie im Popup-Menü „+ Webschriften hinzufügen“.

Web-Schriften hinzufügen

2. Schrift auswählen

Klicken Sie auf „Jetzt beginnen“, und öffnen Sie im Fenster „Webschriften hinzufügen“ die Registerkarte für Typekit. Geben Sie als Suchbegriff „Adelle“ ein, und wählen Sie den Font im Schriften-Browser aus. Bestätigen Sie mit „OK“.

Stellen Sie sicher, dass der Textrahmen noch ausgewählt ist, und wählen Sie im Popup-Menü die Schrift „Adelle Light“.

Hinweis: Mit einem gebührenpflichtigen Creative Cloud-Abo haben Sie Zugriff auf eine erweiterte Bibliothek mit Web-sicheren Typekit-Schriften. Bei der Beispiel-Website, die wir für dieses Tutorial entworfen haben, kamen Schriften der erweiterten Bibliothek zum Einsatz.

Schrift suchen

3. Unterschiedliche Schriften für Überschriften und Absätze einrichten

Durch die Verwendung unterschiedlicher Fonts für Überschriften und Absätze erhält diese Site einen sauberen, modernen Look. 

Installieren Sie die Schrift „Prenton Ultra Condensed“ (siehe Schritt 1). Wählen Sie anschließend mit dem Text-Werkzeug die Überschrift „Services“ aus. Klicken Sie im Popup-Auswahlmenü auf „Prenton Ultra Condensed“, und wählen Sie den Schriftschnitt „Regular“.

Schrift „Prenton Ultra Condensed“ hinzufügen

4. Absatzformate neu definieren

Während die Überschrift noch ausgewählt ist, öffnen Sie das Bedienfeld „Absatzformate“ – das Format „H1 +“ sollte markiert sein. Klicken Sie auf das Symbol „Format neu definieren“, um die neue Schrift auf alle Überschriften anzuwenden.

Wählen Sie den Absatz unter der Überschrift „Services“ aus. Im Bedienfeld „Absatzformate“ sollte jetzt das Format „Body +“ markiert sein. Klicken Sie erneut auf das Symbol „Format neu definieren“. Jetzt ist sämtlicher Fließtext in Adelle Light formatiert.

Tipp: Sie können Formate auch über das Kontextmenü neu definieren.

Symbol „Format neu definieren“

5. Überschriften in Versalien setzen

Wählen Sie mit dem Text-Werkzeug die Überschrift „Point Services“ aus. Öffnen Sie das Text-Bedienfeld („Fenster“ > „Text“), und klicken Sie auf das Symbol für Großbuchstaben.

Text-Bedienfeld öffnen

6. Zeichen hochstellen

Wählen Sie in der Preisangabe unterhalb der Überschrift „93 Point Service“ die Zahlen „00“ aus. Klicken Sie im Text-Bedienfeld auf das Hochgestellt-Symbol. Führen Sie diese Schritte für alle anderen Preisangaben auf der Seite aus.

Zeichen hochstellen

7. Aufzählungszeichen in Listen ändern

Jede Schrift verfügt über einen eigenen Satz an Aufzählungszeichen. Allerdings können Sie für ein individuelleres Aussehen Ihren Listen auch die Aufzählungszeichen einer anderen Schrift zuweisen.  Installieren Sie die Schrift „Franklin Gothic URW Extra Condensed“ (siehe Schritt 1). 

Öffnen Sie das Bedienfeld „Aufzählungszeichen“ („Fenster“ > „Aufzählungszeichen“). Wählen Sie nun mit dem Text-Werkzeug die Liste unterhalb der Überschrift „67 Point Service“ aus. Klicken Sie auf das Symbol für Aufzählungszeichen, um eine Liste zu erstellen. 

Klicken Sie im Bedienfeld „Aufzählungszeichen“ auf die Optionen-Schaltfläche neben dem Symbol für Aufzählungszeichen, und wählen Sie „+ Neues Zeichen“. Wählen Sie anschließend im Popup-Menü mit der Schriftenauswahl „Franklin Gothic URW Extra Condensed“ und den Schriftschnitt „Book“. Klicken Sie auf das rautenförmige Aufzählungszeichen, dann auf „Hinzufügen“ und zuletzt auf „OK“.

Bedienfeld „Aufzählungszeichen“ bei ausgewähltem Text
Aufzählungszeichen ändern

8. Neues Aufzählungszeichen anwenden

Sie können jetzt auf die Raute im Bedienfeld „Aufzählungszeichen“ klicken, um sie als Symbol für Ihre Liste zu verwenden.

Tipp: Sie können diese Änderung als neues Format für Aufzählungszeichen speichern. Öffnen Sie das Bedienfeld „Aufzählungszeichenformate“, und klicken Sie auf das Symbol zur Erstellung eines neuen Formats. Jetzt können Sie Ihr neues Format ganz leicht auf alle anderen Listen auf Ihrer Seite anwenden.

Neues Aufzählungszeichen anwenden

9. Ligaturen verwenden

Ligaturen verbinden zwei oder drei Buchstaben mit Überlappungen (z. B. „ff“ oder „fi“) und tragen damit zu einer verbesserten Lesbarkeit bei. 

Die Schrift Adelle, die Sie für den Fließtext gewählt haben, enthält eigene Ligaturen. Um jedoch sicherzustellen, dass diese Ligaturen von allen modernen Browsern korrekt dargestellt werden, wählen Sie im Menü „Datei“ die Option „Site-Eigenschaften“, und klicken Sie auf die Registerkarte „Inhalt“. Öffnen Sie das Menü „Webschriftzeichen“, und wählen Sie „Alle“.

Ligaturen verwenden

 

Das war schon alles! Damit ist dieses Training abgeschlossen. Teilen Sie uns Ihre Meinung zu diesem Tutorial mit.

 

02/14/2017
Ali Pordeli
War diese Seite hilfreich?