{"id":4387,"date":"2019-09-13T11:46:10","date_gmt":"2019-09-13T08:46:10","guid":{"rendered":"https:\/\/typetype.org\/de\/?p=4387"},"modified":"2026-02-05T08:49:51","modified_gmt":"2026-02-05T05:49:51","slug":"creation-of-tt-interphases","status":"publish","type":"post","link":"https:\/\/typetype.org\/de\/blog\/creation-of-tt-interphases\/","title":{"rendered":"Die Entstehung der TT Interphases"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

Wir haben uns entschlossen, Ihnen die Entstehung einer komplexen Schriftfamilie in einer unabh\u00e4ngigen Schriftgie\u00dferei zu erz\u00e4hlen. Wir hoffen, dass Ihnen unsere Geschichte gef\u00e4llt und Sie etwas Interessantes und Neues entdecken. <\/p>\n\n\n\n

Einleitung <\/h2>\n\n\n\n

Basierend auf den positiven Erfahrungen bei der Entwicklung von Schriften wie TT Norms\u00ae<\/sup> Pro<\/a> und TT Commons\u2122<\/a> hatten wir die ehrgeizige Idee, die perfekte Schrift f\u00fcr moderne Benutzeroberfl\u00e4chen auf den bekanntesten mobilen und Web-Plattformen zu entwickeln. <\/p>\n\n\n\n

Sie sollte die besten Proportionen in ihrer Kategorie haben und eine gro\u00dfe Auswahl an Stilen, Zeichen und OpenType-Funktionen bieten. Der Font sollte sich gut in das Layout einf\u00fcgen, wenn der alte Font f\u00fcr die Benutzeroberfl\u00e4che durch unseren neuen Font ersetzt wird. Die Anzahl der Schriftschnitte, die in der Schriftfamilie enthalten sein sollten, haben wir als \u00aboptimal maximal\u00bb definiert. Unabh\u00e4ngig davon haben wir uns f\u00fcr die Programmierer entschieden, eine monospaced Version der Schrift mit 4 Schriftschnitten (die sogenannten \u00abGolden Four\u00bb) zu erstellen, die auf der Originalschrift basiert. Es ist gut, ein so konsonantes Schriftpaar zu haben. <\/p>\n\n\n\n

Dieser Font sollte ein universelles und praktisches Werkzeug f\u00fcr Designer werden, die Interface-Fonts aktiv in ihren Projekten einsetzen. Und vergessen wir nicht die gestalterische Komponente des Projekts \u2014 die Schrift sollte sch\u00f6n, elegant und gleichzeitig unsichtbar und neutral sein. Aus technischer Sicht sollte die Schrift perfekt sein, mit den modernsten Anspielungen und einer variablen Version f\u00fcr diejenigen, die sich mit der Materie auskennen. So beginnt die Geschichte des Projekts, das sich \u00fcber mehr als ein Kalenderjahr erstreckte. <\/p>\n\n\n\n

Phase 1 \u2014 Recherche <\/h2>\n\n\n\n

Wir begannen mit einer gr\u00fcndlichen Recherche. Alle g\u00e4ngigen Schriften, die \u00fcblicherweise in Benutzeroberfl\u00e4chen verwendet werden, wurden betrachtet, klassifiziert, gruppiert und analysiert. <\/p>\n\n\n\n

\"\"
Tabelle mit der Analyse existierender Schriften f\u00fcr Benutzeroberfl\u00e4chen <\/strong><\/figcaption><\/figure>\n\n\n\n

Das Ergebnis dieser zusammenfassenden Daten ist eine umfangreiche Pr\u00e4sentation, in der wir versucht haben, die wichtigsten Merkmale in der Konstruktion der Zeichen zu analysieren und zu identifizieren, wie z.B. den Grad der Geschlossenheit\/\u00d6ffnung der \u00d6ffnung in den Zeichen \u00aba\u00bb, \u00abc\u00bb und \u00abe\u00bb; den Grad der Rundheit\/Quadratizit\u00e4t der Kreise in runden Zeichen; die Formen von Punkten, Kommas und anderen \u00e4hnlichen Elementen; bedingt offene und bedingt geschlossene Formen einiger Zahlen wie 4, 6, 9. In einer allgemeinen Sitzung haben wir die Richtung der weiteren Arbeit diskutiert und beschlossen. <\/p>\n\n\n\n

\"\"
Erste interne Pr\u00e4sentation des zuk\u00fcnftigen Projekts <\/strong><\/figcaption><\/figure>\n\n\n\n

Wir konnten die bereits geschaffenen und aktiv verwendeten Schriften nicht ignorieren, also berechneten wir die Proportionen aller popul\u00e4ren Schriften dieser Kategorie und kamen durch diese Analyse zu unseren eigenen Schlussfolgerungen und Proportionen. Jetzt brauchen wir keine Angst mehr zu haben, dass \u00abdas Layout auf den zweihundert bereits gezeichneten Screens verrutscht\u00bb, wenn ein Designer die Schrift in bereits erstellten Layouts austauscht, oder dass sich der Schw\u00e4rzungsgrad einer Schrift in \u00e4hnlichem Stil dramatisch ver\u00e4ndert, denn dank der detaillierten Analyse liegen die \u00abGewichte\u00bb nahe an denen der Konkurrenz. <\/p>\n\n\n\n

Wir haben Parameter wie x-H\u00f6he, H-Gewicht f\u00fcr Gro\u00dfbuchstaben, Dicke des H-Stammes, Dicke des H-Querbalkens und \u00e4hnliche Parameter f\u00fcr Kleinbuchstaben in beliebigen Schrifteinheiten gemessen. Es stellte sich heraus, dass die meisten Schriften einander sehr \u00e4hnlich und einige in vielerlei Hinsicht v\u00f6llig identisch sind. <\/p>\n\n\n\n

Wir haben auch die Unterschiede in der Gr\u00f6\u00dfe der vertikalen Striche verschiedener Schriftschnitte innerhalb einer Schrift gemessen, und es stellte sich heraus, dass diese ebenfalls sehr \u00e4hnlich sind, und dass sie im Wesentlichen auf der Formel von Pablo Impallari beruhen, nach der die Zunahme der schwarzen Farbe in den Schriftschnitten so harmonisch wie m\u00f6glich erfolgt (die Zunahme der schwarzen Farbe erfolgt in hellen Schriftschnitten schnell, in fetten Schriftschnitten langsam). <\/p>\n\n\n\n

\"\"
Tabelle mit den Ma\u00dfen der Grundschriften<\/strong><\/figcaption><\/figure>\n\n\n\n

Wir vergessen auch nicht unsere lieben Kunden, Kollegen und Freunde. Wir beschlie\u00dfen, eine quantitative Marketingstudie durchzuf\u00fchren. Zu diesem Zweck erstellten wir einen Online-Fragebogen \u00fcber die von unseren gro\u00dfen IT-Giganten und den f\u00fchrenden Digitalagenturen des Landes verwendeten Schriften. Als Ergebnis erhielten wir mehr als 50 Antworten mit detaillierten Informationen, die uns veranlassten, weiter \u00fcber die Komposition und die Nuancen der Natur der von uns geschaffenen Schriften nachzudenken. <\/p>\n\n\n\n

\"\"
Die Ergebnisse der quantitativen Marktforschung<\/strong><\/figcaption><\/figure>\n\n\n\n

Schritt 2 \u2014 Zeichnen der Grundschrift<\/h2>\n\n\n\n

Nachdem wir alle grundlegenden Proportionen der Schrift best\u00e4tigt und alle Nuancen in Bezug auf die Form der Buchstaben gekl\u00e4rt hatten, zeichneten wir die Hauptzeichen der Normalschrift, um unsere Hypothesen zu testen. Zun\u00e4chst n\u00e4herten wir uns der Schrift in einem 5\u00d75 Raster von Schrifteinheiten. Der erste Bereich umfasste alle stilbildenden Elemente der Schrift. <\/p>\n\n\n\n

\"\"
Grundzeichen des Regular-Stils <\/strong><\/figcaption><\/figure>\n\n\n\n

W\u00e4hrend der gemeinsamen Diskussion des Projekts wurde die Hypothese aufgestellt, dass die Formen der Kreise zu einfach seien. Der erste Versuch bestand darin, sie \u00abquadratischer\u00bb zu machen, der zweite darin, die senkrechten Striche durch gerade Linien zu ersetzen. <\/p>\n\n\n\n

In der Abbildung unten sehen Sie drei Kreisformen f\u00fcr die Schrift in denselben Textfeldern: Die erste (obere) Option ist die grundlegende Kreisform, die in der ersten Schrift-Iteration implementiert wurde; die zweite (mittlere) Option zeigt jedes ovale Element quadratisch auf jeder Biegung um 10 Schrifteinheiten; und die dritte (untere) Option ist die Version der Ovale mit geraden Abst\u00e4nden, die in die vertikalen Striche der Ovale eingef\u00fcgt wurden. <\/p>\n\n\n\n

\"\"
Test der unterschiedlichen Kreisformen<\/strong><\/figcaption><\/figure>\n\n\n\n

Im Ergebnis kommen wir zu dem Schluss, dass die erste Option die optimale ist und dem Charakter und den funktionalen Aufgaben der Schrift am besten entspricht. <\/p>\n\n\n\n

Tats\u00e4chlich ist die \u00abNeutralit\u00e4t\u00bb nun unser Freund und Mitsch\u00fcler. Und nun steht unsere Schriftabteilung vor der Aufgabe, der Schrift eine individuelle Note zu geben. Beim Entwerfen der Schrift versuchen wir, so originell wie m\u00f6glich zu sein \u2014 wir m\u00fcssen Eroberer sein und d\u00fcrfen auf keinen Fall auf Wiederholungen zur\u00fcckgreifen. <\/p>\n\n\n\n

\"\"
Vergleich der Schrift mit dem Mitbewerb <\/strong><\/figcaption><\/figure>\n\n\n\n

Das endg\u00fcltige Schriftbild nach der ersten Iteration der Schriftzeichnung ist fertig. Lateinisch und Kyrillisch sehen gleich aus. Geometrische und humanistische Motive sind in der Schrift organisch und harmonisch miteinander verwoben. Die Schrift hat ihren eigenen Charakter, der sich in kleinen Nuancen und raffinierten Details manifestiert. Alle wohldosierten Proportionen entsprechen unseren hohen Anspr\u00fcchen, die sich aus der Recherche und detaillierten Analyse aller Interface-Schriften sowie den Ergebnissen einer Umfrage unter unseren Kollegen, Kunden und Freunden ergeben haben. <\/p>\n\n\n\n

\"\"
Lateinische Basisschrift, Kyrillische Basisschrift und Ziffern <\/strong><\/figcaption><\/figure>\n\n\n\n

Schritt 3 \u2014 Zeichnen aller Gesichter der Grundschriftfamilie <\/h2>\n\n\n\n

Jetzt beginnt die interessanteste und schwierigste Phase einer Schriftfamilie \u2014 die Erstellung des ersten funktionierenden Fonts, der weitere Ausbau zu einer Schriftfamilie, das Schreiben von OpenType-Funktionen, die Erstellung des Kernings und zahlreiche Tests. <\/p>\n\n\n\n

Wir legen die Zeichenzusammensetzung des Fonts fest und erstellen eine individuelle Kodierung f\u00fcr den Font. Jeder Schriftschnitt der Familie muss die wichtigsten Sonderzeichen, Ziffern, kyrillische und lateinische Grundalphabete enthalten. Da es aber f\u00fcr Designer sehr wichtig ist, ein multifunktionales Werkzeug f\u00fcr ihre Arbeit zu haben, haben wir uns entschlossen, die Zeichentabelle erheblich zu erweitern, indem wir Folgendes einf\u00fchren: <\/p>\n\n\n\n

    \n
  1. Erweiterte Unterst\u00fctzung f\u00fcr Latein (Griechisch und Vietnamesisch werden etwas sp\u00e4ter folgen) <\/li>\n<\/ol>\n\n\n\n
      \n
    1. Erweiterte Unterst\u00fctzung f\u00fcr Kyrillisch <\/li>\n<\/ol>\n\n\n\n
        \n
      1. einen gro\u00dfen Block f\u00fcr Zahlen (lineare Zahlen, Zahlen im alten Stil, deren tabellarische Versionen sowie verschiedene hochgestellte Zahlen, Z\u00e4hler, Nenner und Unterziffern). F\u00fcr alle Ziffernarten gibt es alternative Versionen f\u00fcr 0 (die alternative Form mit Durchstreichen), 1 (stilistische Alternative mit einem Duktuszeichen), 6 und 9 (alternative geschlossene Formen von Ziffern). <\/li>\n<\/ol>\n\n\n\n
          \n
        1. Ein erweiterter Block mit W\u00e4hrungszeichen (einschlie\u00dflich der regul\u00e4ren Versionen der Zeichen, der tabellarischen Versionen der W\u00e4hrungen und der W\u00e4hrungsversionen f\u00fcr Z\u00e4hler und Nenner). <\/li>\n<\/ol>\n\n\n\n
            \n
          1. Rationale Zahlen in Form einer erweiterten Palette von Hilfsbr\u00fcchen sowie Zahlen f\u00fcr nummerierte Listen, die von Kreisen zweier Arten umgeben sind: mit und ohne F\u00fcllung (sog. \u00abBillardkugeln\u00bb). <\/li>\n<\/ol>\n\n\n\n
              \n
            1. Spezielle Versionen von Sonderzeichen f\u00fcr die Verwendung mit Gro\u00dfbuchstaben (Case Sensitive). <\/li>\n<\/ol>\n\n\n\n
                \n
              1. Alternative Formen f\u00fcr einige Kleinbuchstaben, die der Schrift einen weicheren, duktalen Charakter verleihen. <\/li>\n<\/ol>\n\n\n\n

                8. Eine Reihe von Symbolen, die speziell im Stil der Schrift gezeichnet wurden und f\u00fcr die Verwendung in verschiedenen Schnittstellenumgebungen vorgesehen sind. <\/p>\n\n\n\n

                \"\"
                Erweiterter Zeichensatz <\/strong><\/figcaption><\/figure>\n\n\n\n

                Wir wechseln nun in den Font-Editor und \u00fcbertragen alle Zeichen, die wir im Vektor-Editor gezeichnet haben, in den Font. Wir zeichnen die erste Gruppe von Zeichen, beginnend mit den kompliziertesten Sonderzeichen und diakritischen Zeichen. Wir sollten immer an die Regel denken \u2014 wenn wir den alten Font im Layout \u00e4ndern, sollte alles an der gleichen Stelle bleiben. Au\u00dferdem sollten wir beim Zeichnen von Zeichen immer die \u00abMittellinienregel\u00bb im Hinterkopf behalten, die mit dem Aufkommen von Sketch & Figma wichtig wurde. Wir m\u00fcssen einen Effekt erzielen, bei dem die Mittellinie zwischen den oberen und unteren Ausl\u00e4ufern unserer Schrift \u00e4hnlich ist wie bei anderen Interface-Fonts. Andernfalls verschiebt sich der Text in den Textbl\u00f6cken moderner Interface-Editoren nach oben\/unten, was sich direkt auf das Layout auswirkt. Wir ber\u00fccksichtigen dies beim Zeichnen von Zeichen und Konturen, die die Linie \u00fcberschreiten. <\/p>\n\n\n\n

                \"\"
                Test der Mittellinie <\/strong><\/figcaption><\/figure>\n\n\n\n

                Nach der ersten Iteration des Zeichnens aller Text- und Nicht-Text-Zeichen erhalten wir vom Art Director des Projekts ein Feedback \u00fcber das vorhandene Schriftmuster sowie \u00fcber die ersten Text-Teststreifen des Textes und deren Konsistenz. Eine schwierige, aber notwendige Entscheidung wird getroffen \u2014 wir entfernen die visuellen Kompensatoren und beruhigen den Satz. Unsere Schulliebe \u00abNeutralit\u00e4t\u00bb zwingt uns, alles einer einzigen Logik und Koh\u00e4renz zu unterwerfen. <\/p>\n\n\n\n

                \"\"
                Anmerkungen zu den \u00c4nderungen am Entwurf <\/strong><\/figcaption><\/figure>\n\n\n\n

                Wir arbeiten parallel an zwei Begrenzungsstilen: d\u00fcnn und schwarz. Eine dreik\u00f6pfige Arbeitsgruppe arbeitet daran, zwei Designer und ein technischer Leiter. Wir zeichnen und bearbeiten. Wir zeichnen und bearbeiten wieder. In der Tat ist das ein klarer und strenger technischer Prozess. <\/p>\n\n\n\n

                Vielleicht sollten wir ihn f\u00fcr den unerfahrenen Leser etwas genauer erkl\u00e4ren. Es gibt zwei Hauptaufgaben in diesem Prozess. Die erste ist die Anpassung an die bedingte Schriftbreite. Zum Beispiel erscheint eine d\u00fcnne Schrift nur dann so breit wie eine normale Schrift, wenn sie physisch schmaler ist. Die umgekehrte Logik gilt f\u00fcr fette Schriften \u2014 wir werden nur dann in die bedingte Breite einer normalen Schrift passen, wenn die fette Schrift physisch breiter ist. <\/p>\n\n\n\n

                Die zweite Aufgabe besteht darin, die bedingte H\u00f6he von Kleinbuchstaben im Regular-Schnitt zu erreichen. Da es sich bei der Schrift um eine optische Konstruktion handelt, erh\u00f6hen wir die H\u00f6he der Kleinbuchstaben bei der fetten Schrift um 20 Zeicheneinheiten und verringern sie bei der d\u00fcnnen Schrift um 10 Zeicheneinheiten. Auf diese Weise sind alle Schnitte einheitlich und es entsteht der Eindruck, dass es sich um die gleiche Schrift handelt, die nur eine andere St\u00e4rke hat. <\/p>\n\n\n\n

                Mit der ersten Schrift erhalten wir ein klares Bild davon, wie die Zeichen zueinander stehen. Dies ist nun unser Ausgangspunkt, auf den wir uns bei der Erstellung der anderen Stile konzentrieren werden. Die Buchstaben H und O werden als Ma\u00dfstab verwendet. Wenn die Gewichtung in anderen Schriftschnitten erh\u00f6ht oder verringert wird, sollten sich die Proportionen jedes Zeichens in Bezug auf die beiden Buchstaben in gleicher Weise \u00e4ndern. <\/p>\n\n\n\n

                \"\"
                Drei Ankergewichte: d\u00fcnn, normal und schwarz<\/strong><\/figcaption><\/figure>\n\n\n\n

                Die Zeichnungen zeigen, wie sich die Zeichen von Stil zu Stil ver\u00e4ndern. Die Buchstaben werden fetter, aber ihre Proportionen, ihr Muster und ihre Textur \u00e4ndern sich nicht. Zum Beispiel sieht das \u00abH\u00bb etwas schmaler und h\u00f6her aus. Auch das \u00abO\u00bb \u00e4hnelt eher einem Rechteck als einem Quadrat. Seine Spitzen und Biegungen sind nicht scharf, aber auch nicht eindeutig quadratisch. Die gleiche Art von Verdrehung findet sich beim \u00abB\u00bb, das optisch etwas breiter als das \u00abH\u00bb und etwas schmaler als das \u00abO\u00bb erscheint. Die horizontale Linie befindet sich etwas oberhalb der Mitte, etwa auf der H\u00f6he des Mittelstrichs von \u00abH\u00bb. Betrachten wir das Verh\u00e4ltnis und die Proportionen der Halbovale \u2014 all diese Details bleiben von Stil zu Stil erhalten. <\/p>\n\n\n\n

                Von den drei Grundtypen ist die schwarze Schrift am schwierigsten zu gestalten. Damit die Schwarze optisch mit der Normalschrift \u00fcbereinstimmt, m\u00fcssen die \u00e4u\u00dferen Proportionen der Glyphen sehr genau definiert werden; wir k\u00f6nnen sie nicht dreimal breiter machen, nur um die sehr breiten Sch\u00e4fte in jedem Buchstaben unterzubringen. Wir k\u00f6nnen auch nicht den gesamten wei\u00dfen Raum eines Buchstabens auf Null reduzieren. Daher m\u00fcssen wir auf Kompensationen zur\u00fcckgreifen, die sich auf den inneren Raum des Zeichens beziehen. Einige Zeichen k\u00f6nnen und m\u00fcssen vereinfacht werden: <\/p>\n\n\n\n

                \"\"
                Vereinfachung des Buchstabens Q <\/strong><\/figcaption><\/figure>\n\n\n\n

                Bei anderen suchen wir nach einer Kompensation durch Ausd\u00fcnnung der Horizontalen. <\/p>\n\n\n\n

                \"\"
                Ausgleich des schwarzen Buchstabens e <\/strong><\/figcaption><\/figure>\n\n\n\n

                Diese Arbeit wird f\u00fcr jedes Zeichen von Hand ausgef\u00fchrt. Alles ist sehr individuell; man muss das Ergebnis st\u00e4ndig \u00fcberpr\u00fcfen, damit es keine \u00abKlebestellen\u00bb oder zu helle Stellen gibt. <\/p>\n\n\n\n

                Das Bild unten zeigt die erste Iteration der Zeichnung eines d\u00fcnnen Stils durch einen Designer und die Kommentare, die in die Schriftdatei eingef\u00fcgt und ihm vom technischen Leiter \u00fcbermittelt wurden. Jede F\u00fcllfarbe in der Schrift hat ihre eigene Bedeutung. Designer, die mit dieser Logik vertraut sind, erkennen sofort, was an der Schrift ge\u00e4ndert wurde. <\/p>\n\n\n\n

                Nach der ersten Iteration wurde die H\u00f6he der Kleinbuchstaben manuell um 10 Zeicheneinheiten reduziert. <\/p>\n\n\n\n

                \"\"
                Die Arbeit am Slim-Style <\/strong><\/figcaption><\/figure>\n\n\n\n

                Im B\u00fcro diskutiert die Arbeitsgruppe die Notwendigkeit von Kompensatoren f\u00fcr den Fettdruck und die Einheitlichkeit des Satzes f\u00fcr das kyrillische und das lateinische Alphabet. Wir beschlie\u00dfen, die Kompensatoren auch f\u00fcr den Fettdruck zu streichen. Jetzt setzen wir auf saubere Formen und eine einheitliche Logik f\u00fcr den Aufbau aller Zeichen. <\/p>\n\n\n\n

                \"\"
                Testen der Schrift in einem Textfeld <\/strong><\/figcaption><\/figure>\n\n\n\n

                Bei der Erstellung eines fetten Schriftschnitts fiel uns im letzten Moment auf, dass alle diakritischen Zeichen der Kleinbuchstaben sehr nah an den Kleinbuchstaben selbst platziert waren. Um nicht alles von Hand \u00e4ndern zu m\u00fcssen, hat unser Programmierer ein spezielles Python-Skript geschrieben, mit dem \u00fcber 300 Zeichen sofort ge\u00e4ndert, d.h. auf den gew\u00fcnschten Wert angehoben werden k\u00f6nnen, und zwar nur f\u00fcr Kleinbuchstaben. <\/p>\n\n\n\n

                \"\"

                Diakritische Zeichen mit einem Skript erh\u00f6hen <\/strong><\/figcaption><\/figure>\n\n\n\n

                Wenn die drei Hauptzeichen (Master) vollst\u00e4ndig gezeichnet sind, beginnen wir mit der Arbeit an den Zwischenzeichen, die sehr genau interpoliert werden k\u00f6nnen. Das liegt an der Genauigkeit der urspr\u00fcnglichen Konturen. Zwei Ingenieure arbeiten an sechs Zwischenmodellen, um die Konturen perfekt zu machen. Wir erstellen detaillierte Spezifikationen und schicken sie an die Arbeit. <\/p>\n\n\n\n

                Das folgende Bild zeigt das Ergebnis der \u00dcberlagerung (Mittelwertbildung) der Konturen des regul\u00e4ren Stils und der vom Ingenieur bearbeiteten und vervollst\u00e4ndigten Schrift. Wie man sieht, ist der Unterschied gering. <\/p>\n\n\n\n

                \"\"
                Der Unterschied zwischen dem Schnitt und der bearbeiteten Schrift <\/strong><\/figcaption><\/figure>\n\n\n\n

                Als n\u00e4chstes werden die Schr\u00e4gschnitte oder Kursivschnitte f\u00fcr alle aufrechten Schnitte erstellt. Dies ist einer der wichtigsten, zeitaufw\u00e4ndigsten und gleichzeitig \u00ablangweiligsten\u00bb Schritte. Um die schr\u00e4gen Formen zu erzeugen, verwenden wir die Methode \u00abhalb kippen \u2014 halb drehen\u00bb. Dabei handelt es sich um so genannte \u00abOblique\u00bb-Schriften und nicht um echte \u00abItalic\u00bb-Schriften, d.h. um gekippte, aufrechte Versionen ohne Ver\u00e4nderung der Buchstabenformen selbst. Half-tilt-half-turn ist eine Methode, die die Unterdr\u00fcckung von Verzerrungen in Kreisen vermeidet. <\/p>\n\n\n\n

                Im B\u00fcro erstellen wir 5 Ankergewichte, schreiben die Dokumentation f\u00fcr die von uns erstellten Stile, um sie den am Projekt beteiligten Ingenieuren zu \u00fcbergeben, und schicken die restlichen Schriften an die Druckerei. Die Dokumentation ist ein sehr wichtiger Schritt bei der Erstellung jeder Schrift in bestimmten Projektphasen, da sie es erm\u00f6glicht, den Prozess der Erstellung einer Schrift durch verschiedene Personen zu vereinheitlichen. <\/p>\n\n\n\n

                \"\"
                Die technische Spezifikation f\u00fcr die Erstellung von Schr\u00e4gschriften <\/strong><\/figcaption><\/figure>\n\n\n\n

                Parallel zur Erstellung der Zwischen- und Schr\u00e4gschnitte erfolgt der technische Teil des Projekts, n\u00e4mlich das Kerning und die OpenType-Funktionen sowie die detaillierte Anpassung des Zeilenabstands. Wir machen das Kerning innerhalb der Schrift \u00abeinheitlich\u00bb, d.h. wir erstellen einen einzigen Satz von Kerning-Paaren und Kerning-Klassen f\u00fcr alle Schriftschnitte. Sogar in unserem Team gibt es unterschiedliche Meinungen \u00fcber einheitliches Kerning \u2014 einige sind daf\u00fcr, andere dagegen. <\/p>\n\n\n\n

                Wenn wir jedoch bei der Erstellung des Kernings die physikalisch bedingten unterschiedlichen Abst\u00e4nde in Schriften mit unterschiedlicher Gewichtung ber\u00fccksichtigen (in einer d\u00fcnnen Schrift ist der Abstand deutlich gr\u00f6\u00dfer als in einer normalen Schrift und besonders in einer fetten Schrift), sowie die unterschiedlichen Wei\u00dfwerte bei dreieckigen Zeichenanpassungen (die Diagonalen in Zeichen wie A, X, V usw. k\u00f6nnen ihren Winkel je nach Gewichtung der Schrift \u00e4ndern), dann \u00e4ndert sich der Kerningbedarf, da sich die Diagonalen in dreieckigen Zeichen je nach Gewichtung der Schrift ver\u00e4ndern; Dementsprechend \u00e4ndert sich auch der erforderliche Kompensationsgrad in Form von Unterschneidungspaaren), ist es m\u00f6glich, eine Unterschneidung zu realisieren, die den drei Extremf\u00e4llen und damit auch allen dazwischen liegenden Schriften perfekt entspricht. Insgesamt erhalten wir 1167 einzigartige, manuell ausgew\u00e4hlte Paare. <\/p>\n\n\n\n

                In einem gesonderten Teil werden spezielle Kerning-Paare f\u00fcr einige Zeichen erstellt, die mit Leerzeichen kombiniert werden k\u00f6nnen, um Texts\u00e4tze so sch\u00f6n wie m\u00f6glich auszurichten. Wenn Sie z.B. \u00abY\u00bb und ein Leerzeichen schreiben, entsteht durch die Kombination mit dem Leerzeichen eine L\u00fccke, die optisch als doppeltes Leerzeichen wahrgenommen wird. Solche L\u00fccken kompensieren wir mit einem Kerning-Paar. <\/p>\n\n\n\n

                \"\"
                Kerning-Kompensation von Y, wenn ein Leerzeichen folgt oder vorangeht <\/strong><\/figcaption><\/figure>\n\n\n\n

                Sprechen wir nun ein wenig \u00fcber die OpenType-Funktionen der Schrift. Dies ist n\u00e4mlich der Teil der Arbeit des Schriftdesigners, der f\u00fcr den Schriftanwender fast immer verborgen bleibt. Der Font TT\u00a0Interphases<\/a> bietet 32\u00a0solcher Funktionen. Wir werden hier nur einige davon erw\u00e4hnen, und Sie k\u00f6nnen weitere Details \u00fcber die in\u00a0der Schrift enthaltenen Eigenschaften in\u00a0der ausf\u00fchrlichen Schriftprobe<\/a> nachlesen.<\/p>\n\n\n\n

                a) Nur wenige wissen, dass es in den meisten modernen Schriften eine einzigartige M\u00f6glichkeit gibt, Zahlen, die um einen Schr\u00e4gstrich herum geschrieben werden, durch einen Bruch zu ersetzen. Diese Funktion hei\u00dft Frac und funktioniert folgenderma\u00dfen: Sie geben 1\/2 ein und erhalten als Ausgabe einen kompakten, sch\u00f6nen Bruch. <\/p>\n\n\n\n

                \"\"
                Die Funktion frac (Br\u00fcche \/ fractions) in Aktion<\/strong><\/figcaption><\/figure>\n\n\n\n

                b) F\u00fcr F\u00e4lle, in denen Klammern und Anf\u00fchrungszeichen mit Gro\u00dfbuchstaben verwendet werden, gibt es eine Funktion namens Case (case sensitive). Sie erlaubt es, einige Sonderzeichen zu \u00aberh\u00f6hen\u00bb, um eine harmonische Kombination mit Gro\u00dfbuchstaben zu erreichen. <\/p>\n\n\n\n

                \"\"
                Die Case-sensitive Funktion in Aktion <\/strong><\/figcaption><\/figure>\n\n\n\n

                c) Manchmal werden Tabellennummern und W\u00e4hrungszeichen ben\u00f6tigt. Dies ist sehr praktisch, wenn Sie sie in einer Spalte so eingeben m\u00fcssen, dass eine Zahl genau unter der anderen steht. F\u00fcr solche F\u00e4lle wird ein separater Zeichensatz gezeichnet, bei dem die Breite aller em-Quadrate der Zeichen gleich ist. Aus Gr\u00fcnden der Funktionalit\u00e4t ist der Zeichensatz dann nicht mehr glatt, sondern etwas breiter. Diese Funktion wird TNUM (Tabled Numbers) genannt, und es werden nicht nur Zahlen, sondern auch W\u00e4hrungszeichen gezeichnet. <\/p>\n\n\n\n

                \"\"
                Die Funktion TNUM (Tabled Numbers) im Einsatz <\/strong><\/figcaption><\/figure>\n\n\n\n

                d) F\u00fcr einige Schriftarten, bei denen es notwendig ist, die \u00abNull\u00bb vom Gro\u00dfbuchstaben \u00abO\u00bb zu unterscheiden, wird das Merkmal \u00abZero\u00bb (gestrichelte Null) verwendet. Diese Schrift war keine Ausnahme. Alle m\u00f6glichen Nullen in der Schrift haben alternative Versionen mit einem Schr\u00e4gstrich innerhalb des Ovals. <\/p>\n\n\n\n

                \"\"
                Die Null im Einsatz <\/strong><\/figcaption><\/figure>\n\n\n\n

                Tats\u00e4chlich haben wir dem Font viele n\u00fctzliche OpenType-Features hinzugef\u00fcgt, wie salt, ordn, ccmp, sups, sinf, numr, dnom, tnum, pnum, onum, lnum, liga, dlig, calt, ss01, ss02, ss03, ss04, ss05, ss06, ss07, ss08, ss09, ss10, ss11, ss12, ss13, ss14, locl. Sie sind alle in der Spezifikation der Schriftfamilie beschrieben (verf\u00fcgbar unter dem Link). Durch die Verwendung einzelner Funktionen oder deren Kombination kann die \u00abStimme\u00bb der Schrift bis zur Unkenntlichkeit ver\u00e4ndert werden. <\/p>\n\n\n\n

                Alle Funktionen wurden in den verschiedensten m\u00f6glichen Kombinationen getestet und verifiziert; wir pr\u00fcfen auch die Funktionalit\u00e4t der Funktionen in verschiedenen Programmen. <\/p>\n\n\n\n

                Um das Layout von Textbl\u00f6cken f\u00fcr Interface-Designer so komfortabel wie m\u00f6glich zu gestalten, untersuchen wir die popul\u00e4rsten und am h\u00e4ufigsten nachgefragten Interface-Fonts und ihre technischen Parameter, die den Zeilenabstand beeinflussen (insbesondere wie Ascender, Descender und Gap (erzwungener wei\u00dfer Bereich zwischen den Zeilen)). Auf der Grundlage unserer Recherchen erstellen wir eine zusammenfassende Tabelle, aus der wir unsere eigenen Werte ableiten. <\/p>\n\n\n\n

                \"\"
                Tabelle mit Metriken f\u00fcr Zeilenabst\u00e4nde in Interface-Fonts<\/strong><\/figcaption><\/figure>\n\n\n\n

                Nach einem ersten Vergleichstest von unterschiedlich gro\u00dfen Textbl\u00f6cken im Layout stellen wir fest, dass der Zeilenabstand fast perfekt ist, aber das Textfeld etwas h\u00f6her als n\u00f6tig. Das gef\u00e4llt uns nicht, denn wir m\u00fcssen perfekt sein.<\/p>\n\n\n\n

                \"\"
                Vergleich der Zeilenabst\u00e4nde mit der Konkurrenz <\/strong><\/figcaption><\/figure>\n\n\n\n

                Wir beschlie\u00dfen, den Oberl\u00e4ngenbereich zu verkleinern und den Abstand zu vergr\u00f6\u00dfern, um den gew\u00fcnschten Zeilenabstand zu erreichen. Der Satz ist nun f\u00fcr fast alle verglichenen Schriften ausgerichtet.<\/p>\n\n\n\n

                \"\"
                Von links nach rechts: TT\u00a0Interphases<\/a>, IBM Plex, Roboto, SF\u00a0Display, Sourse Sans, Open Sans. <\/strong><\/figcaption><\/figure>\n\n\n\n

                Schritt 4 \u2014 Erstellung der Icons<\/strong> <\/h2>\n\n\n\n

                Parallel zur Arbeit an der Hauptschrift \u00fcberlegen wir, wie wir eine Reihe von Icons f\u00fcr sie zeichnen k\u00f6nnen. Der erste Versuch scheitert, da die Aufgabe schlecht formuliert und nicht detailliert genug ist. <\/p>\n\n\n\n

                \"\"
                Der erste Versuch, Icons zu zeichnen<\/strong><\/figcaption><\/figure>\n\n\n\n

                Wir untersuchen die vorhandenen Ikonentypen, analysieren die vorhandenen Stile und erstellen schlie\u00dflich eine technische Aufgabe f\u00fcr den Ikonenzeichner. <\/p>\n\n\n\n

                Es stellt sich heraus, dass es nur sehr wenige gute informative Icons f\u00fcr unsere Funktionalit\u00e4t gibt: In der Regel handelt es sich um separate Vektors\u00e4tze (und sie sind nicht in den Schriftarten enthalten). Wir haben uns angesehen, was es gibt (separate Icon-Sets f\u00fcr Laptop\/Desktop\/Telefon), sie enthalten die gleichen Icons, aber es gibt spezifische Icons, die nur auf einem bestimmten Ger\u00e4tetyp verwendet werden. Wir haben auch die Icons in verschiedenen Betriebssystemen untersucht \u2014 Windows, Android, macOS. <\/p>\n\n\n\n

                Wir haben einen \u00abgemittelten\u00bb = universellen Satz von Icons analysiert und erstellt. Die Icons wurden in 5 Gruppen eingeteilt (Hauptaktionen, Zust\u00e4nde, Abschnitte der Website, Dokumente und Ordner, mobile Schnittstelle), abh\u00e4ngig von den Objekten und Aktionen. <\/p>\n\n\n\n

                In der ersten Phase der Arbeit war es wichtig zu verstehen, wie die Icons und die Schrift in Einklang gebracht werden k\u00f6nnen, um eine Einheit in der Skizze zu schaffen, nicht nur durch die Dicke der Linien, sondern auch durch die Konsistenz der Umrisse der Icons und der Buchstaben. <\/p>\n\n\n\n

                Wir erhalten eine Skizze der ersten Icons und betrachten sie in verschiedenen Gr\u00f6\u00dfen und auf verschiedenen Hintergr\u00fcnden. Wir bearbeiten sie so, dass sie stilistisch gut zur Schrift passen (z. B. die Form der Drehungen und die Enden der Striche). Wir achten auf ein ausgewogenes Verh\u00e4ltnis von Schwarz und Wei\u00df, damit schwarze und d\u00fcnne Schriftschnitte harmonisch wirken, und f\u00fcgen bei einigen Symbolen kleine schwarze Farbfl\u00e4chen ein. <\/p>\n\n\n\n

                \"\"
                Der zweite Versuch, Ikonen zu zeichnen (Umkehrung) <\/strong><\/figcaption><\/figure>\n\n\n\n
                \"\"
                Der zweite Versuch, Ikonen zu zeichnen (Umkehrung) <\/strong><\/figcaption><\/figure>\n\n\n\n

                In dieser Phase der Arbeit an den Ikonen, in der wir bereits eine ausgearbeitete technische Spezifikation und ein Verst\u00e4ndnis f\u00fcr die Hauptgruppe der Ikonen hatten, stellte sich die Frage, wie weit wir von den allgemein akzeptierten Bildern abweichen k\u00f6nnten. W\u00e4hrend der Diskussionen kamen wir zu dem Schluss, dass die etablierten Bilder beibehalten werden sollten, aber einige Icons aktualisiert werden k\u00f6nnten, wie z.B. die Uhr. <\/p>\n\n\n\n

                Wir zeichnen den gesamten Satz der Icons f\u00fcr die drei Hauptstile, bearbeiten und ver\u00e4ndern sie erneut und erhalten so eine gro\u00dfe Leinwand mit Icons f\u00fcr die drei Vorlagen (d\u00fcnn, normal, schwarz) und dann Icons f\u00fcr alle 9 aufrechten Stile. <\/p>\n\n\n\n

                Die Icons sind Teil der Schrift, d.h. sie m\u00fcssen ihre S\u00e4ttigung in den gleichen Proportionen \u00e4ndern, in denen sich jeder Stil \u00e4ndert. Bei unseren Recherchen zu diesem Thema stellten wir fest, dass die Dicke der wichtigsten Icons nicht durch die Sch\u00e4fte der Gro\u00dfbuchstaben, sondern durch die Sch\u00e4fte der Sonderzeichen bestimmt wird. Die Icons \u00e4ndern ihre Gewichtung innerhalb der Schriftlogik und bleiben lesbar, ohne in fetten Stilen zu kleben. <\/p>\n\n\n\n

                \"\"
                Icons f\u00fcr die 3 Ankergewichte <\/strong><\/figcaption><\/figure>\n\n\n\n

                Ein weiteres komplexes, aber interessantes technisches Problem bei diesem Projekt war die Tatsache, dass die Glyphnamen der Icons keinen Unicode-Wert haben und daher beim Sortieren der Glyphen innerhalb der Schrift in zuf\u00e4lliger Reihenfolge durcheinander geraten. <\/p>\n\n\n\n

                Wenn wir z.B. die Glyphensteuerung in Adobe Illustrator \u00f6ffnen, sehen wir, dass einige der Symbole zusammen liegen und andere zuf\u00e4llig sortiert sind. Eine solche willk\u00fcrliche Anordnung ist f\u00fcr uns nicht akzeptabel, also \u00fcberlegen wir, wie wir dieses Problem l\u00f6sen k\u00f6nnen. <\/p>\n\n\n\n

                Ein weiteres Problem ist, dass in Programmen wie PowerPoint Zeichen ohne Unicode einfach nicht in der Symbolleiste angezeigt werden und nicht \u00fcber die Tastatur aufgerufen werden k\u00f6nnen. <\/p>\n\n\n\n

                \"\"
                Unicode-Wertzuweisung f\u00fcr alle Symbole <\/strong><\/figcaption><\/figure>\n\n\n\n

                Daher bitten wir unseren Programmierer, ein Unicode-F\u00fcller-Skript zu schreiben, das die ausgew\u00e4hlten Zellen mit Unicode-Werten aus dem freien Bereich des Standards f\u00fcllt und dabei eine bestimmte Reihenfolge einh\u00e4lt. <\/p>\n\n\n\n

                Auf diese Weise behalten wir die Konsistenz der Icons bei, wenn sie \u00fcber das Glyph-Panel in Adobe-Produkten ausgew\u00e4hlt werden, und wir bieten auch die M\u00f6glichkeit, Icons in Programmen wie PowerPoint auszuw\u00e4hlen und hinzuzuf\u00fcgen. Au\u00dferdem k\u00f6nnen die Icons einfach von einem Programm in ein anderes kopiert werden, was wirklich spannend ist! <\/p>\n\n\n\n

                \"\"
                100 Icons sind in\u00a0der Basisstilen der TT\u00a0Interphases<\/a> enthalten <\/strong><\/figcaption><\/figure>\n\n\n\n

                Schritt 5 \u2014 Erstellen einer Monospace-Familie <\/h2>\n\n\n\n

                Von Anfang an wollten wir eine Monospace-Satellitenschriftfamilie f\u00fcr Programmierer schaffen, die die Hauptschriftfamilie erg\u00e4nzt. Wir untersuchten und analysierten die g\u00e4ngigsten Monospace-Schriften, die zum Schreiben von Code verwendet werden. Wir haben alle Nuancen und Eigenschaften dieser Schriften untersucht und uns auch mit verschiedenen Programmierern beraten. <\/p>\n\n\n\n

                Basierend auf den Ergebnissen der Studie haben wir eine zusammenfassende Tabelle erstellt, in der die Werte der Proportionen der \u00abidealen\u00bb Monospaced-Schriftart abgeleitet wurden. Von besonderem Interesse waren Parameter wie die Breite des em-Quadrats, die Gr\u00f6\u00dfe der Strichst\u00e4rken f\u00fcr eine normale und eine fette Version, die technische Konfiguration des Zeilenabstands, \u00e4hnlich wie bei der normalen Version der Schrift. Die Anzahl der Schriftschnitte sollte, wie bei den meisten Analoga, auf vier beschr\u00e4nkt werden. <\/p>\n\n\n\n

                \"\"
                Die Tabelle mit der Analyse der existierenden Monospaced-Schriften <\/strong><\/figcaption><\/figure>\n\n\n\n

                Nachdem wir alle Schl\u00fcsselparameter bestimmt hatten, waren wir sehr \u00fcberrascht, dass sogar die Gr\u00f6\u00dfen der Wortst\u00e4mme in der normalen und der fetten Monospaced-Schrift im Vergleich zu unserer prim\u00e4ren Schriftfamilie \u00fcbereinstimmten. Wir hielten dies f\u00fcr ein gutes Zeichen und begannen, die Schrift in einem 10\u00d710-Raster zu zeichnen. <\/p>\n\n\n\n

                Dabei behielten wir die wichtigsten Charakteristika der Zeichen der Grundschrift bei und \u00fcbertrugen sie sorgf\u00e4ltig in die \u00abneue Realit\u00e4t\u00bb, n\u00e4mlich die Apertur (Grad der \u00d6ffnung bzw. Schlie\u00dfung der runden Zeichen) und den Grad der Abrundung der Kreise.) <\/p>\n\n\n\n

                Da die Schrift monospaced ist, d.h. die Breite des em-Quadrats in allen Zeichen gleich ist (600 Schrifteinheiten), mussten wir die Form einiger Zeichen \u00e4ndern, damit der Satz einheitlich aussieht und keine \u00abL\u00f6cher\u00bb und \u00abKleber\u00bb entstehen. <\/p>\n\n\n\n

                \"\"
                \u00c4nderung der Form einiger Zeichen zwischen den Unterfamilien <\/strong><\/figcaption><\/figure>\n\n\n\n

                F\u00fcr den Schwarz-Wei\u00df-Abgleich haben wir uns entschieden, die in der Hauptfamilie weggelassenen visuellen Kompensatoren wieder einzuf\u00fchren. Dadurch wird die Monospace-Schrift um einige Zeichen erweitert, zus\u00e4tzlich zur korrekten Schwarzwei\u00df\u00fcbereinstimmung. Dies ist in diesem Fall mehr als gerechtfertigt.<\/p>\n\n\n\n

                \"\"
                Unterschiedliche visuelle Kompensationen zwischen den Unterfamilien <\/strong><\/figcaption><\/figure>\n\n\n\n

                Das Ergebnis ist, dass einige Buchstaben sehr breit sind (\u0448, \u0449, \u0436, m) und in ihrer nat\u00fcrlichen Form und Proportion nur schwer in das em-Quadrat (600 Zeicheneinheiten) passen. Um sie lesbar zu machen und ihre Form nicht zu st\u00f6ren, haben wir die mittleren vertikalen St\u00e4mme kompensiert.<\/p>\n\n\n\n

                \"\"
                Zus\u00e4tzliche Kompensation f\u00fcr Monospace-Zeichen <\/strong><\/figcaption><\/figure>\n\n\n\n

                Wir haben weiter an der visuellen Kompensation und der Schwarz-Wei\u00df-Balance gearbeitet und einige Glyphen stark verformt. Diese Verformungen sind nicht nur \u00e4sthetisch, sondern verleihen der Schrift auch ihr wiedererkennbares Bild und ihren Stil. <\/p>\n\n\n\n

                \"\"
                Arbeit am Ausgleich und an der Schwarz-Wei\u00df-Balance <\/strong><\/figcaption><\/figure>\n\n\n\n

                Wir schauen uns an, wie die Schrift aussieht, nehmen \u00c4nderungen an den Zeichenanpassungen und -formen vor und verst\u00e4rken die Kompensatoren, da die Schrift ziemlich schwarz aussieht. <\/p>\n\n\n\n

                \"\"
                Arbeit an der Kompensation und an der Form einiger Buchstaben <\/strong><\/figcaption><\/figure>\n\n\n\n

                Lassen Sie uns ein wenig \u00fcber die Zusammensetzung der Buchstaben in Monospaced-Schriften sprechen. Sie unterscheidet sich auf die eine oder andere Weise von der Zusammensetzung der Buchstaben unserer Hauptfamilie. Wir haben eine kleine qualitative Studie \u00fcber Monospaced-Fonts durchgef\u00fchrt und analysiert, was wir bereits haben, was wir loswerden m\u00fcssen und was wir hinzuf\u00fcgen m\u00fcssen. <\/p>\n\n\n\n

                Wir bearbeiten die Kodierung der Basisschrift TT\u00a0Interphases<\/a>, um\u00a0sie in\u00a0die gew\u00fcnschte Kodierung f\u00fcr TT\u00a0Interphases Mono umzuwandeln. Wir entfernen die Tabellenziffern und die Tabellenw\u00e4hrungen, da\u00a0sie nicht mehr ben\u00f6tigt werden, da\u00a0die gesamte Schrift bereits monospaced ist.<\/p>\n\n\n\n

                Auch die Icons, die wir f\u00fcr die Hauptfamilie erstellt haben, werden nicht mehr ben\u00f6tigt. Wir entfernen die Ligaturen, da deren Vorhandensein vor allem f\u00fcr Programmierer eine gewisse \u00abGefahr\u00bb darstellen kann \u2014 der Code sollte nicht mehrere Zeichen durch ein einziges ersetzen. Stattdessen f\u00fcgen wir Sonderzeichen hinzu, die Programmierer f\u00fcr die Codierung ben\u00f6tigen. <\/p>\n\n\n\n

                \"\"
                Einbettung zus\u00e4tzlicher Zeichen in die Monospaced-Familie<\/strong><\/figcaption><\/figure>\n\n\n\n

                Nachdem wir die Funktionen getestet hatten, stellten wir fest, dass die Frac-Funktion (die f\u00fcr Br\u00fcche zust\u00e4ndig ist) nicht funktionierte und wir uns noch Gedanken \u00fcber ihre Performance machen mussten. Normalerweise werden solche Funktionen in solchen Schriften nicht aktiviert, aber wir entschieden uns, sie beizubehalten und begannen, \u00fcber die Logik ihrer Funktionalit\u00e4t nachzudenken. <\/p>\n\n\n\n

                Das Ergebnis war, dass wir einen separaten Satz von Z\u00e4hlern und Nennern mit negativen Zeichenanpassungen hinzuf\u00fcgten, damit Frac korrekt funktioniert, so dass das em-Quadrat in Kombination mit dem Bruch 600 Schrifteinheiten entspricht. Das klingt kompliziert und unverst\u00e4ndlich, aber am Ende hat es funktioniert. <\/p>\n\n\n\n

                \"\"
                Die Bruch-Funktion (fractions) in Aktion <\/strong><\/figcaption><\/figure>\n\n\n\n

                Wir haben unseren Kollegen gebeten, uns ein echtes St\u00fcck Code zu schicken, wir haben das Layout nachgebildet und das Ergebnis getestet. Wir haben die Schrift vor einem dunklen Hintergrund getestet, wie ihn Programmierer normalerweise zum Schreiben von Code verwenden.<\/p>\n\n\n\n

                \"\"
                Test der Schrift Monospace <\/strong><\/figcaption><\/figure>\n\n\n\n

                Mit dem Ergebnis sind wir zufrieden. Der Buchstabe \u00abo\u00bb wird nicht mit der Ziffer \u00ab0\u00bb verwechselt, \u00abl\u00bb nicht mit \u00ab1\u00bb und alles ist gut unterscheidbar und lesbar. <\/p>\n\n\n\n

                Nun kommen wir zu den schr\u00e4gen Monospace-Schriften. Wir haben uns die vorhandenen Analoga angesehen und analysiert und wie \u00fcblich eine Tabelle erstellt, in der die wichtigsten Proportionen und der Neigungswinkel ber\u00fccksichtigt wurden. Das Ergebnis der Studie war, dass der \u00abideale\u00bb Neigungswinkel 11 Grad betr\u00e4gt. <\/p>\n\n\n\n

                W\u00e4hrend wir an den Schr\u00e4gen arbeiteten, beschlossen wir, ein wenig herumzuspielen und Skizzen zu zeichnen, in denen wir verschiedene seltsame und ungew\u00f6hnliche Zeichenformen ausprobierten. <\/p>\n\n\n\n

                \"\"
                Skizzen zur Monospace-Schr\u00e4gschrift <\/strong><\/figcaption><\/figure>\n\n\n\n

                W\u00e4hrend der Arbeit an der Monospace-Familie beschlossen wir, nicht nur eine schr\u00e4ge, sondern auch eine kursive Schrift zu entwerfen. Eine neue Skizzenphase folgte. Wir wollten der Kursiv einen eigenen Charakter geben, aber gleichzeitig die Neutralit\u00e4t bewahren. Deshalb entschieden wir uns, die sehr extremen Formen zugunsten von klareren und besser lesbaren Zeichen aufzugeben. <\/p>\n\n\n\n

                \"\"
                Arbeit am Schriftdesign <\/strong><\/figcaption><\/figure>\n\n\n\n

                Wir haben einige Buchstabenformen, die traditionell in der Kursivschrift verwendet werden, ver\u00e4ndert, um den geneigten Schnitten einen \u00abhandschriftlichen\u00bb Charakter zu verleihen. <\/p>\n\n\n\n

                \"\"
                Unterschiede zwischen Senkrecht- und Kursivschrift <\/strong><\/figcaption><\/figure>\n\n\n\n

                Schritt 6 \u2014 Hinting<\/h2>\n\n\n\n

                Hinting ist ein komplexes technisches Verfahren zur Optimierung von Schriftmustern f\u00fcr bestimmte Rastertypen (Bildschirme, Browser, Programme). Bei uns im Studio ist das Hinting ein separater technischer Prozess, der viel Zeit in Anspruch nimmt. <\/p>\n\n\n\n

                Zu Beginn waren nicht alle Schnitte f\u00fcr das Hinting bereit. Wir hatten nur f\u00fcnf von neun Stilen: Black, Regular, ExtraLight, Light und Thin. W\u00e4hrend die restlichen Stile fertiggestellt wurden \u2014 Symbole wurden hinzugef\u00fcgt und technische Details ausgearbeitet \u2014 entschied unser Hinting-Guru Victor, mit dem normalen Stil zu beginnen und nach Gewichtungen abzusteigen. Das bedeutet, dass nach dem normalen Schriftschnitt die Hinweise auf die leichteren Schriftschnitte Light, ExtraLight und Thin \u00fcbertragen werden. <\/p>\n\n\n\n

                \"\"
                Ein Foto des echten TypeType-Font-Hinting-Codes<\/strong><\/figcaption><\/figure>\n\n\n\n

                Warum werden Zwischenfonts ben\u00f6tigt, wenn man Hinting in einer Schriftfamilie einrichtet? <\/p>\n\n\n\n

                Normalerweise verwenden wir f\u00fcr das Hinting<\/a> von TypeType-Fonts<\/a> Microsofts Hinting-Tool Visual TrueType (im Folgenden VTT genannt). Um die Arbeit mit dem Hinting zu beschleunigen und zu verbessern, verwenden wir jedoch auch unsere eigene Zusatzsoftware, die wir in unserem Studio entwickelt haben. <\/p>\n\n\n\n

                Eine der Hauptfunktionen dieser Software ist die glyphenweise \u00dcbertragung von Hinting zwischen Schriftschnitten. Je \u00e4hnlicher die Formen der Schriften (in diesem Fall ihre Dicken) sind, desto weniger Fehler treten bei der \u00dcbertragung der Hinting-Informationen auf und desto weniger manuelle Korrekturen sind erforderlich. <\/p>\n\n\n\n

                Unsere Software arbeitet mit einem Algorithmus, der nach \u00e4hnlichen Punkten in der Schrift des n\u00e4chsten Strichst\u00e4rkengrades sucht und die Hintinginformationen exakt \u00fcbertr\u00e4gt. Die Konturen k\u00f6nnen nicht v\u00f6llig identisch sein, so dass in 10-30% der F\u00e4lle Fehler auftreten, die von Hand korrigiert werden m\u00fcssen. Dennoch reduziert sich der Zeitaufwand f\u00fcr die Andeutung um fast das F\u00fcnffache. <\/p>\n\n\n\n

                Wir haben daher zun\u00e4chst mit dem regul\u00e4ren Stil gearbeitet. Das automatische Hinting wurde mit VTT durchgef\u00fchrt. Dieses Werkzeug wurde verwendet, um vorl\u00e4ufige Markierungen zu setzen und Gruppen von Zeichen und Referenzwerten f\u00fcr diese zu identifizieren. Gruppen von Referenzwerten sind Referenzwerte f\u00fcr Glyphen, deren Konturen sowohl in der Breite als auch in der H\u00f6he \u00fcbereinstimmen m\u00fcssen. Die Konturen der Glyphen, die einer Gruppe zugeordnet sind, weisen daher gemeinsame Merkmale auf. <\/p>\n\n\n\n

                Zus\u00e4tzlich zu den vier Standardgruppen, die durch automatische Unterteilung definiert werden \u2014 UpperCase, LowerCase, Figure und Other \u2014 haben wir f\u00fcnf weitere hinzugef\u00fcgt: Superior, OldStyle, Icon, Balls, Numr. Im weiteren Verlauf der Arbeit mit benutzerdefinierten Gruppen wurden deren spezifische Referenzwerte ermittelt und manuell eingegeben. Diese wurden dann als Referenzwerte f\u00fcr die in diesen Gruppen enthaltenen Zeichen verwendet. <\/p>\n\n\n\n

                Insgesamt wurden etwa 60 zus\u00e4tzliche Werte in jedem der Stile definiert, und je gewagter die Schrift wird, desto mehr Werte werden ben\u00f6tigt, um die St\u00e4mme flexibler zu steuern. <\/p>\n\n\n\n

                \"\"
                Einige Zeichengruppen, die beim Font-Hinting verwendet werden<\/strong><\/figcaption><\/figure>\n\n\n\n

                Nach der Verwendung von Auto-Hinting und vor der manuellen Bearbeitung der Fontpixelkarte wurden zus\u00e4tzlich eigene Entwicklungen angewendet. Zum Beispiel das Hinting von zusammengesetzten Zeichen. <\/p>\n\n\n\n

                \"\"
                Hinting von Amacron-Zeichen<\/strong><\/figcaption><\/figure>\n\n\n\n

                Das obige Bild zeigt das Zeichen Amacron in einer Gr\u00f6\u00dfe von 12 bis 15 Pixeln bei einer Aufl\u00f6sung von 72 dpi unter Verwendung des DirectWrite-Rasters in der Schriftart Bold. Beachten Sie, wie das diakritische Zeichen Macron gerastert ist. <\/p>\n\n\n\n

                In der ersten Zeile \u2014 Rasterung des Zeichens vor dem Hinting; <\/p>\n\n\n\n

                In der zweiten Zeile \u2014 die Rasterung nach dem automatischen Hinting; <\/p>\n\n\n\n

                In der dritten Zeile \u2014 die Rasterung nach der Anwendung von Skripten, die wir selbst entworfen haben. <\/p>\n\n\n\n

                Nach all diesen Modifikationen, um die Schrift vorzubereiten, kommen wir zum eigentlichen Hinting. <\/p>\n\n\n\n

                Das Bild unten zeigt die TT Interphases Mono Regular vor dem Hinting. Sie werden feststellen, dass es bei verschiedenen Gr\u00f6\u00dfen ein Problem mit der Konsistenz der Pixeldicke gibt, sowohl zwischen den St\u00e4mmen einer Glyphe als auch zwischen verschiedenen Glyphen. <\/p>\n\n\n\n

                \"\"
                TT Interphases Mono Regular vor dem Hinting <\/strong><\/figcaption><\/figure>\n\n\n\n

                Um dieses Problem zu l\u00f6sen, wurden die Pixel\u00fcberg\u00e4nge der Dicken f\u00fcr ein gleichm\u00e4\u00dfiges Wachstum des Stammes mit zunehmender Gr\u00f6\u00dfe bestimmt. Die Konsistenz zwischen allen Stengeln in der Schrift wurde wiederhergestellt, die Konturen sehen einheitlich aus. <\/p>\n\n\n\n

                \"\"
                TT Interphases Mono Regular after hinting<\/strong><\/figcaption><\/figure>\n\n\n\n

                Gleiches gilt f\u00fcr die Ziffern und ihre altmodischen Varianten in TT Interphases DemiBold, wo die Kleinbuchstaben im Vergleich zu den Regular-Versionen zu fr\u00fch d\u00fcnner werden. <\/p>\n\n\n\n

                Nat\u00fcrlich muss man sich dar\u00fcber im Klaren sein, dass die Hauptaufgabe des Hintings die Lesbarkeit der Schrift ist, und um dieses Ziel zu erreichen, muss man die Konsistenz der Buchstabenst\u00e4mme aufgrund des fehlenden Wei\u00dfraums vernachl\u00e4ssigen. <\/p>\n\n\n\n

                In der Abbildung unten rechts sieht man zum Beispiel, dass in den Schriftgraden 12, 13, 15 und gr\u00f6\u00dfer alle Strichst\u00e4rken gleich sind, aber in Gr\u00f6\u00dfe 14 haben wir wegen des Platzmangels f\u00fcr die Glyphen Euro, Griwna und Rupien die horizontalen Strichst\u00e4rken absichtlich d\u00fcnner gemacht. <\/p>\n\n\n\n

                Andernfalls h\u00e4tte sich, wenn die Konturen nicht verzerrt worden w\u00e4ren, die Situation wiederholen k\u00f6nnen, die man bei der Betrachtung des oberen Teils des Griwna-Zeichens in der Gr\u00f6\u00dfe 14 im gleichen Bild rechts sieht. <\/p>\n\n\n\n

                \"\"
                Zahlen und W\u00e4hrungen in TT Interphases DemiBold vor dem Hinting <\/strong><\/figcaption><\/figure>\n\n\n\n
                \"\"
                Ziffern und W\u00e4hrungen in TT Interphases DemiBold nach dem Hinting <\/strong><\/figcaption><\/figure>\n\n\n\n

                Bei d\u00fcnnen Stilen ist die Situation etwas anders: Neben der Konsistenz muss auch die Dicke der Stile wiederhergestellt werden. In der Abbildung unten sieht man, dass einige Sch\u00e4fte so d\u00fcnn werden, dass sie ganz verschwinden. <\/p>\n\n\n\n

                \"\"
                TT Interphases ExtraLight vor dem Hinting<\/strong><\/figcaption><\/figure>\n\n\n\n
                \"\"
                TT Interphases ExtraLight nach dem Hinting <\/span> <\/strong><\/figcaption><\/figure>\n\n\n\n

                Es ist wichtig zu verstehen, dass in allen oben gezeigten \u00abNach dem Hinting\u00bb-Bildern das Ergebnis der Arbeit an den Konturen jeder Glyphe zu sehen ist: Anpassung der Dicke, Korrektur verschiedener Verzerrungen und Unregelm\u00e4\u00dfigkeiten, Kontrolle der Position der Striche und Wiederherstellung der Lesbarkeit. <\/p>\n\n\n\n

                Um beispielsweise die Lesbarkeit des Zeichens Hbar in TT Interphases ExtraBold zu gew\u00e4hrleisten, wurden die oberen Balkenpixel manuell verschoben. Solche Operationen werden als Deltas bezeichnet. <\/p>\n\n\n\n

                \"\"
                HBar nach manueller Pixelverschiebung in TT Interphases ExtraBold <\/strong><\/figcaption><\/figure>\n\n\n\n

                Genau die gleichen Operationen wurden mit der W\u00e4hrung durchgef\u00fchrt. F\u00fcr jeden Schriftschnitt der TT\u00a0Interphases<\/a>-Familie wurden\u00a0ca.\u00a0170 Deltas ben\u00f6tigt, insgesamt also 3740 Deltas f\u00fcr alle 18\u00a0Schriften der Hauptfamilie und 4\u00a0Schriften der Monospace-Familie. Je\u00a0d\u00fcnner die Kontur, desto weniger Deltas werden ben\u00f6tigt.<\/p>\n\n\n\n

                Generell gilt: Je weniger Deltas, desto besser f\u00fcr alle, denn jede dieser Delta-Anweisungen belegt ein separates Byte in der Schriftdatei, was f\u00fcr viele Massendienste und Websites sehr wichtig sein kann. <\/p>\n\n\n\n

                Au\u00dferdem waren wir zum Beispiel mit der Dicke der Diagonale des kyrillischen Gro\u00dfbuchstabens \u00ab\u0418\u00bb in TT Interphases Medium Italic nicht zufrieden: Bei kleinen Gr\u00f6\u00dfen war sie zu d\u00fcnn. <\/p>\n\n\n\n

                \"\"
                Glyphe \u00ab\u0418\u00bb vor der Bearbeitung und nach der Delta-Verschiebung in der TT Interphases Medium Italic <\/strong><\/figcaption><\/figure>\n\n\n\n

                Es ist auch zu beachten, dass bei einigen Symbolen die Positionen der Komponenten angepasst wurden. Eine Komponente in einem Font ist eine h\u00e4ufig verwendete Kontur, auf die nur in den Glyphen verwiesen wird, in denen sie verwendet wird. Wenn Sie also die Hauptkontur pl\u00f6tzlich \u00e4ndern, \u00e4ndert sich auch die Komponente in den anderen Zeichen, in denen sie verwendet wird. <\/p>\n\n\n\n

                Au\u00dferdem wiegt die fertige Schriftdatei selbst viel weniger, da durch das Weglassen unn\u00f6tiger Informationen Platz in der Schriftdatei gespart wird. <\/p>\n\n\n\n

                <\/p>\n\n\n\n

                \"\"
                Symbol 0\u00d72473 vor und nach der Korrektur der Komponentenposition in TT Interphases ExtraLight <\/strong><\/figcaption><\/figure>\n\n\n\n

                Bemerkenswert ist, dass wir die Gr\u00f6\u00dfe der Schriftdateien mit manuellem Hinting im Vergleich zum automatischen Hinting in TT Interphases um durchschnittlich 18% reduzieren konnten, im Fall von TT Interphases Mono sogar um 5%. Vielleicht freut das die Nutzer unserer Schriften, die sie aktiv im Web einsetzen. <\/p>\n\n\n\n

                \"\"
                Hinted Logo der TypeType Foundry <\/strong><\/figcaption><\/figure>\n\n\n\n

                Schritt 7 \u2014 Variable Schriften erstellen <\/h2>\n\n\n\n

                Zuerst \u00f6ffnen wir alle Stile, die die Grundlage f\u00fcr unsere variable Schrift bilden sollen. Die optimale Anzahl von Stilen f\u00fcr die Erstellung einer variablen Schrift liegt zwischen drei und f\u00fcnf. Um die TT Interphases Variable zu erstellen, w\u00e4hlen wir vier Hauptvorlagen: thin, regular, bold, black. <\/p>\n\n\n\n

                Wir arbeiten mit FontInfo und f\u00fcgen Vorlagen durch Kopieren hinzu. Wir passen den Gewichtswert an und bearbeiten den Schriftnamen, damit er in der Software richtig angezeigt wird. <\/p>\n\n\n\n

                Wir f\u00fcgen die gew\u00fcnschte Variationsachse hinzu \u2014 in unserem Fall Gewicht. Wir f\u00fcgen alle anderen Schriftschnitte als Instanzen hinzu und schreiben nach dem = die Strichst\u00e4rke unserer Schriften. Wenn die Reiter Namen, Achsen, Stile und Instanzen richtig ausgef\u00fcllt sind, k\u00f6nnen wir mit der Kompatibilit\u00e4tspr\u00fcfung der Umrisse fortfahren. <\/p>\n\n\n\n

                \"\"
                Arbeiten an der Erstellung einer variablen Schriftart<\/strong><\/figcaption><\/figure>\n\n\n\n

                Wenn unsere Vorlagen kompatibel sind, werden sie alle in der Ebenentafel in gr\u00fcner Farbe angezeigt. Manchmal ist es notwendig, die Startpunkte manuell zu setzen und die Richtungen der Konturen zu \u00fcberpr\u00fcfen, da ihre Nicht\u00fcbereinstimmung zu Verzerrungen bei der Interpolation f\u00fchrt. <\/p>\n\n\n\n

                Im Fall von TT Interphases m\u00fcssen drei Punkte zum Buchstaben \u00abM\u00bb in schwarzer Schrift hinzugef\u00fcgt werden. Dazu markieren wir nacheinander jeden Punkt und dr\u00fccken Strg + D oder klicken mit der rechten Maustaste und w\u00e4hlen + Duplizieren. Nachdem wir die fehlenden Punkte hinzugef\u00fcgt haben, klicken wir auf Match Masters und \u00fcberpr\u00fcfen die Variabilit\u00e4t auf Instanzebene oder im Vorschaubereich. <\/p>\n\n\n\n

                Nun sind alle \u00dcberpr\u00fcfungseinstellungen abgeschlossen und wir k\u00f6nnen guten Gewissens mit dem Testen der variablen Schrift beginnen. <\/p>\n\n\n\n

                \"\"
                Testen der variablen Schrift TT Interphases Variable Roman <\/strong><\/figcaption><\/figure>\n\n\n\n

                Zusammenfassung<\/strong> <\/h2>\n\n\n\n

                Vielen Dank, dass Sie sich die Zeit genommen haben, die Geschichte der Schriftfamilie TT Interphases zu lesen. Wir haben versucht, Ihnen einen m\u00f6glichst detaillierten Einblick in die interne K\u00fcche des Schriftenstudios zu geben und Ihnen alle Phasen der Entstehung einer komplexen Schrift zu zeigen. <\/p>\n\n\n\n

                \"\"<\/figure>\n\n\n\n

                Das TT Interphases-Team <\/h2>\n\n\n\n

                An\u00a0der Entwicklung der Schriftfamilie TT\u00a0Interphases<\/a> war ein achtk\u00f6pfiges Team aus Schriftdesignern, Schrifttechnikern und Managern beteiligt. Die vollst\u00e4ndige Liste der Projektbeteiligten:<\/p>\n\n\n\n

                Ivan Gladkikh \u2014 Projektleiter
                Irina Tatarskaja \u2014 Projektleiterin
                Pavel Emelyanov \u2014 Art Director, Autor der Studie und der Grundschrift
                Marina Khodak \u2014 Hauptschriftdesignerin, technische Projektleiterin
                Ksenia Karataeva \u2014 Schriftdesignerin, Autorin der Unterfamilie Monospace
                Nadezhda Polomoshnova \u2014 Schriftgestalterin, Autorin der Icons
                Viktor Rubenko \u2014 Technischer Ingenieur, Programmierer, Spezialist f\u00fcr Anspielungen und einfach ein Schelm
                Nadyr Rakhimov \u2014 Schriftdesigner, technischer Ingenieur
                Yuri Nakonechny \u2014 technischer Ingenieur, Debugger-Tester <\/p>\n\n\n\n

                TT Interphases n\u00fctzliche Links <\/p>\n\n\n\n

                PDF-Probe<\/a> | Grafische Pr\u00e4sentation<\/a> | TT Interphases ausprobieren und kaufen<\/a> <\/p>\n\n\n\n

                Feedback <\/p>\n\n\n\n

                Wenn Sie Fragen haben, schreiben Sie uns einfach an marketing@typetype.org<\/a> und wir werden sie gerne beantworten. <\/p>\n","protected":false},"excerpt":{"rendered":"

                Wir haben uns entschlossen, Ihnen die Entstehung der komplexen Schriftfamilie TT\u00a0Interphases in\u00a0einem unabh\u00e4ngigen Schriftstudio zu\u00a0erz\u00e4hlen. Wir hoffen, dass Ihnen unsere Geschichte gef\u00e4llt und Sie etwas Interessantes und Neues entdecken.<\/p>\n","protected":false},"author":1,"featured_media":10000050606,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[183,184],"class_list":["post-4387","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-font-creation","tag-typetype-fonts"],"acf":{"show_sidebar":true},"_links":{"self":[{"href":"https:\/\/typetype.org\/de\/wp-json\/wp\/v2\/posts\/4387","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/typetype.org\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/typetype.org\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/typetype.org\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/typetype.org\/de\/wp-json\/wp\/v2\/comments?post=4387"}],"version-history":[{"count":5,"href":"https:\/\/typetype.org\/de\/wp-json\/wp\/v2\/posts\/4387\/revisions"}],"predecessor-version":[{"id":47030,"href":"https:\/\/typetype.org\/de\/wp-json\/wp\/v2\/posts\/4387\/revisions\/47030"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/typetype.org\/de\/wp-json\/wp\/v2\/media\/10000050606"}],"wp:attachment":[{"href":"https:\/\/typetype.org\/de\/wp-json\/wp\/v2\/media?parent=4387"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/typetype.org\/de\/wp-json\/wp\/v2\/categories?post=4387"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/typetype.org\/de\/wp-json\/wp\/v2\/tags?post=4387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}