Sketch Wiki

Text

Micha
Text in Sketch richtig schreiben, Schriftart ändern und Schriftgröße ändern

Das Wichtigste zuerst: das Textwerkzeug rufst du in Sketch durch das Tastenkürzel „T“ auf. Dein Mauszeiger verändert sich in einen Eingabezeiger und mit einem Klick erstellst du einen Text. Die Nachricht „Type something“ fordert dich dazu auf, mit dem Schreiben zu beginnen. Wenn du nicht mit Tastenkürzeln arbeiten möchtest, kannst du dir auch ein kleines Symbol in die Symbolleiste legen. Oder du gehst über das Menü „Insert“ > „Text“.

Zwei, drei Sätze zu Text Grundlagen

Die Bedeutung von Text und Schrift fürs Design ist sicherlich nicht zu unterschätzen. Immerhin hat Text die höchste Informationsdichte in deinem Design. Schriftzeichen begleiten die Menschheit schon über 8000 Jahre und gehören zu den wichtigsten Möglichkeiten der Kommunikation.

95% aller Informationen nehmen wir über Schrift auf

Vermutlich ist die Bedeutung von Text mit den digitalen Oberflächen wie Internet, PC und Smartphones sogar noch gestiegen. So wurde der erste Mac von Steve Jobs 1984 damit beworben, die Texte auf dem Bildschirm am schönsten und schärfsten darstellen zu können. Von der seit damals in Apples Betriebssystem eingebaute Technik profitiert das Textwerkzeug von Sketch auch heute noch.

Das Textwerkzeug im Überblick

Das Text-Tool von Sketch nutzt das in OS X eingebaute „Rendering“ der Schriftzeichen um Präzision beim Designen zu ermöglichen. Der Vorteil besteht darin, dass Fehler in der Umsetzung deines Designs auf andere Bildschirme vermieden werden. Außerdem werden von Sketch noch viele weitere Funktionen unterstützt, die das Arbeiten mit Schrift und Text erleichtern.

Darüber hinaus wird der Inspektor-Bereich bei der Textverarbeitung angepasst. So hast du schnellen Zugriff auf Farbe, Schriftart, Schriftstärke und viele weitere Einstellungen.

Einschränkungen am Textwerkzeug

In vorherigen Versionen von Sketch wurde auch das vergrößern und verkleinern von Sketch durch ziehen mit der Maus unterstützt. Leider ist das nicht mehr möglich. Stattdessen bist du auf die Schriftgröße-Einstellung im Inspektor-Bereich angewiesen. Oder du erstellst dir ein eigenes Tastaturkürzel um schneller Text vergrößern und verkleinern zu können.

Erstellen

Sketch hat ein paar kleine Besonderheiten in der Texterstellung versteckt. Wie bereits oben beschrieben, erzeugst du ein neues Textelement mit Druck auf die Taste „T“ und einem Klick auf deine Arbeitsfläche. So kannst du sofort beginnen zu schreiben.

Hältst du aber den Eingabezeiger fest und ziehst ihn wird ein Textkasten generiert. Der Bearbeiten-Modus von Texten verlässt du mit einem Klick außerhalb des Textelements. Alternativ geht auch ein Druck auf „esc“ (Escape-Taste) oder indem du ein anderes Werkzeug auswählst.

Ein neues Element wird immer in der zuletzt verwendeten Formatierung erzeugt. Die Schriftart, -farbe, -größe und alle weiteren Einstellungen werden also vom zuletzt erstellten Text übernommen. In diesem Sinn gibt es also keine Standardformatierung, die von Sketch vorgegeben wird.

Zeilenumbruch

Deine Inhalte werden also in einem eigenen Element zusammengefasst. Hast du dein Textelement mit einem Klick erstellt, werden alle Zeichen automatisch in nur einer Zeile geschrieben. Ein Satzspiegel wird erst erzeugt, wenn du dein Textelement in der Größe bearbeitest und damit als“Fixed“ definierst.

Sketch wird immer versuchen den Zeilenumbruch in ganzen Worten zu erzeugen. Sollte ein Wort länger als eine Zeile sein, werden die einzelnen Buchstaben umgebrochen.

Textansichten zuschneiden

Diese Satzspiegel-Funktion erlaubt es auch, die bereits fertig getippten Texte zu „verstecken“. Dafür schreibst du deinen Text und verlässt den Bearbeiten-Modus mit einem Klick außerhalb des Textelements. Wähle dein Textelement mit einem Klick auf den Text oder in der Ebenenleiste. Danach siehst du zwei weiße Quadrate am Anfang und Ende deines Elements, wenn du einen einzeiligen Text erstellt hast.

Fasst du eines dieser beiden Quadrate an und ziehst sie weiter auseinander oder zusammen, verändert sich das Textelement. Es bekommt jetzt acht dieser Griffmarken: an allen vier Ecken und auf der Hälfte der vier Seiten. Und diese Funktionen haben die Griffmarken:

Wenn du bereits eine Textbox mit der Maus aufgezogen hast siehst du diese Quadrate direkt von Anfang an. Mehr dazu findest du auch im Abschnitt „Text ausrichten in Sketch“ weiter unten.

Bearbeiten im Inspektor

Du hast also erfolgreich ein, Wort, einen Satz oder einen Absatz in dein Sketch-Dokument geschrieben? Jetzt möchtest du ihn sicher noch anpassen. Im nächsten Abschnitt lernst du, wie die Schriftart, Schriftfarbe, Zeilenabstand und viele weitere Einstellungen in Sketch vornehmen kannst. Erinnerst du dich noch an den Inspektor-Bereich auf der rechten Seite deines Programmfensters? Wählst du ein Textelement aus, verändert sich dieser Bereich. Er sieht dann so aus wie du auf der rechten Seite sehen kannst.

Der Inspektor teilt sich bei Textauswahl folgendermaßen auf:

  1. Ausrichtung
    Wähle zwei oder mehr Elemente aus stelle ihre Ausrichtung zueinander ein.
  2. Position und Größe des Elements
    Hier befindet sich dein Textelement gerade. Hier wird auch die Rotation und die horizontale und vertikale Spiegelung angezeigt.
  3. Verhalten beim Vergrößern und Verkleinern
    Dieser Bereich wurde mit Sketch 45 eingeführt. Hier stellst du ein, wie sich das Element auf einem Artboard verhält, wenn dessen Größe geändert wird.
  4. Textstile
    Hier kannst du die entweder einen neuen Textstil erstellen oder bestehende Stile laden.
  5. Schrifteinstellungen
    Hier stellst du die Schriftart, die Schriftstärke und Schriftgröße ein. Außerdem hast du zugriff auf weitere Einstellungen wie Ausrichtung und Abstände.
  6. Darstellung
    Leg fest, mit welcher Deckkraft und in welchem Mischmodus der Text dargestellt wird.
  7. Füllung
    Diese Einstellung ist ein bisschen doppelt gemoppelt: die Schriftfarbe kannst du auch schon im Bereich „5. Schrifteinstellungen“ festlegen.
  8. Kontur
    Auch Textelemente können mit einer Kontur versehen werden hier sind die Einstellungen dafür.
  9. Schatten, Innere Schatten und Weichzeichner
    Noch mehr Einstellungen zu Schlagschatten inner- und außerhalb des Elements. Hier findest auch die Einstellungen zum Weichzeichner (Gaußscher Weichzeichner, Bewegungsunschärfe, radialer Weichzeichner und Hintergrund-Weichzeichner).

Diese Bereiche 1-3 und 6-9 verhalten sich genau so wie bei den meisten anderen Designelementen. Das ist natürlich super praktisch für dich – so musst du dir weniger merken weil sieben von neun Einstellungsbereichen gleich bleiben. Jetzt aber los mit den konkreten Problemen: ändern der Schriftart, Schriftfarbe und des Schriftschnittes.

Schriftart in Sketch ändern

Erstellst du ein Textelement, wird die letzte von dir verwendete Schriftart verwendet. Auf der rechten Seite deines Sketch-Programmfensters befindet sich der Inspektor. Die Schriftart kannst du mit einem Klick auf die Schaltfläche „Typeface“ auswählen. Es öffnet sich eine alphabetisch sortierte Liste aller Schriften, die du auf deinem Rechner installiert hast.

Tipp: Du weißt wie die Schriftart heißt, zu der du wechseln möchtest? Dann benutz einfach das Suchfeld über der Liste. Der Cursor blinkt und wartet bereits auf deine Eingabe.

Durch Schriftarten ändern sich häufig auch die Abstände zwischen den Buchstaben – deine flexiblen Textelemente passen sich praktischerweise direkt an die Größe an. Das gilt aber nicht für eingerastete Textelemente, die ihre Maße behalten.

So kannst du die Textfarbe ändern

Die Schriftfarbe kannst du direkt unter dem Punkt „Color“ bearbeiten und nach deinen Wünschen anpassen. Es öffnet sich der Farbwähler, den du auch für alle anderen Elemente verwendest. Hier kannst du entweder den HEX-, RGB oder HSB-Farbcode eingeben. Außerdem hast du den Alpha-Kanal um die Deckkraft zu bestimmen.

Achtung: Die Einstellung der Farbe ist ein bisschen verwirrend. Denn Sketch unterscheidet zwischen der Schrift- und der Elementfarbe. Es gilt der Grundsatz, dass die Ebenenfarben alle einzelnen Schriftfarben überschreiben.

Diese Unterscheidung zwischen Text- und Ebenenfarbe hat zwei Seiten. Zum einen kannst du in einem Fließtext mehrere Textfarben anwenden – ganz so wie du es auch aus Word, InDesign oder OpenOffice kennst. Insgesamt ist das in Sketch vielleicht etwas mühseliger als in anderen Layout-Programmen, aber trotzdem möglich.

Die Bearbeitung deiner Schriftfarbe mit den Einstellungen einer Ebene erlauben dir zum anderen aber zusätzliche Flexibilität. So kannst du dein Textelement mit einem Verlauf, Muster oder einem Bild hinterlegen. Das gleiche gilt für  Probiers mal aus – das sieht ziemlich interessant aus!

Fett, kursiv, unterstrichen und noch mehr Optionen…

Die Schriftarten, die du auf deinem Mac installiert hast, liegen häufig auch in verschiedenen „Schriftschnitten“ vor. Sie sind nach Strichstärke von dünn nach dick sortiert. Dazu kommt nochmal die gleiche Anzahl für kursive Schriftschnitte. Unter dem Punkt „Weight“ kannst du sie aus dem Menü auswählen.

Tipp: Wenns schnell gehen soll benutzt du einfach Tastaturkombinationen. Fette deinen Text in Sketch mit cmd + B. Schräg gestellten Text (kursiv) kannst du auf Druck cmd + I auswählen.

Klicke auf das Zahnrad ⚙, um weitere Schrifteinstellungen vornehmen. Das Menü ist in drei Bereiche unterteilt.

  1. Decoration
    Hier kannst du die ausgewählten Textelemente unterstreichen, doppelt unterstreichen oder durchgestrichen anzeigen lassen.
  2. List Type
    Mit Sketch eine Liste erstellen? Ganz einfach! Wähle aus den Optionen „Bullet“ für eine Aufzählungsliste und „Numbererd“ für eine nummerierte Liste. Jeder Absatz in deinem Text wird so markiert.
  3. Text Transform
    Leg fest, ob der Text in GROSSBUCHSTABEN („Uppercase“) oder nur in kleinbuchstaben („lowercase“) angezeigt werden soll.

Text ausrichten in Sketch

Sketch kann Text in waagerecht und senkrecht ausrichten. Erstellst du ein Textelement mit einem Klick ist die Ausrichtung auf automatisch gestellt. Ziehst du an den weißen Vierecken/Griffen wechselt der Ausrichtungsmodus für Text auf eingerastet (engl. „fixed“).

Du kannst Fließtext nur im eingerasteten Modus ausrichten. Du kannst aus diesen Optionen für die senkrechte Ausrichtung wählen:

Für die waagerechte Ausrichtung (wenn das Textelement eine fixierte Höhe hat)

Zusammenfassung

Also erstmal Respekt, wenn du es bis hier unten geschafft hast, alles zu lesen. Text ist ein super wichtiges Thema für Designer und die Einstellungsmöglichkeiten sind schon ziemlich gut. Das Text-Werkzeug in Sketch gehört zu den wichtigsten Tools. Tag für Tag sind wir von Informationen in Form von Schrift umgeben. Übern Daumen gepeilt kann man sagen, dass wir gut 95% aller Informationen auf einer Website dem Text entnehmen. Deswegen ist es wichtig diese Informationen mit den Textwerkzeug zu strukturieren und aufzubereiten.

Mehr Informationen bei:

Team Treehouse (Kurzes Einsteigervideo auf Englisch)

Sketch Documentation (Englisch)

Die mobile Version verlassen