Aufbau einer typografischen Grundlage mit Style Sheets

In den letzten Jahren hat das Axiom "mobile first" Designer dazu motiviert, online zu gehen und sein Publikum zu erreichen, indem man zuerst überlegt, wie die Website und das Erlebnis auf mobilen Geräten aussehen werden. Ursprünglich bedeutete dies, dass die Website für den kleinen Bildschirm eines Telefons konzipiert wurde, aber im Laufe der Zeit haben sich E-Reader und Tablets gegenüber Laptops und Desktops durchgesetzt, so dass Lösungen für eine Reihe von Bildschirmgrößen erforderlich sind. Und die Gestaltung für diese verschiedenen Bildschirme bedeutet, dass auch die Typografie stimmen muss. Heute ist "Mobile First" zur zweiten Natur geworden, aber um sicherzustellen, dass das Design auf kleinen, mittleren und großen Bildschirmen gut funktioniert, muss man "Type First" denken. Es gibt eine Reihe von Tools für die Erstellung typografischer Stilvorlagen, darunter Texteditoren, Markdown-Editoren, Seitenlayoutprogramme und Webanwendungen wie Typecast™von Monotype.

Vom Backend zum Frontend

Bevor Sie ein Layout für Webseite erstellen, sollten Sie sich die typografischen Stilvorlagen ansehen Hilfe und die Größe des Textes nach der Methode "type first" festlegen. Sie sehen Ihre Überschrift 1 bis hin zu Ihren Bildunterschriften sowie kleinere Überschriften und Textkörper und stellen schließlich sicher, dass Ihre Typografie auf einem desktop und einem mobilen Browser auf allen Geräten funktioniert. Webentwickler verwenden in der Regel einen Texteditor, um CSS-Stile einzugeben und ihre Textinhalte im Backend als HTML zu verfassen. Für die manuelle Eingabe von CSS und HTML gibt es zahlreiche Texteditoren, von denen einige eine Vorschau darauf bieten, wie die endgültige Typografie und das Layout im Frontend aussehen werden.

Markdown-Editoren bieten eine einfache Schnittstelle, die nur einfachen Text anzeigt, und viele von ihnen ermöglichen den Export Ihrer Inhalte in HTML. Markdown ist nicht dazu gedacht, HTML oder CSS zu ersetzen. Es ist vielmehr ein Ausgangspunkt für diejenigen, die einen weniger-ist-mehr-Ansatz für die Eingabe und Anzeige ihrer Inhalte wünschen und diese dann in ein Webformat wie XHTML oder HTML konvertieren möchten. Markdown-Editoren bieten eine einfache Möglichkeit, mit Text zu arbeiten, indem sie Stile markieren oder kennzeichnen, z. B. große Überschriften, kleine Überschriften, Fließtext und Anführungszeichen. Auf dem Bildschirm sieht der Text immer gleich aus, wobei die von Ihnen vergebenen Schriftstile wie "#" vor dem Text, der als Überschrift 1 gedacht ist, und "##" für Überschrift 2 auffallen. tags Und erst nach dem Export in HTML können Sie sehen, wie der Text in einem Webbrowser aussehen wird. Oft müssen Sie die CSS als separate Datei erstellen, um Schriftgrößen, Schriftfamilien und Farben festzulegen.

WYSIWYG-Editoren

Viele Designer und Entwickler haben sich zwar an die Verwendung von Texteditoren gewöhnt, aber Zeit ist wirklich von entscheidender Bedeutung, und alles, was getan werden kann, um die Produktions- und Entwicklungszeit zu verkürzen, hilft Hilfe Ihnen und Ihrem Team, zuerst an die Schrift zu denken und Ihre Entwürfe schnell und einfach zu veröffentlichen. Textverarbeitungsprogramme und Design-Layout-Programme, die auf Desktops, Tablets und sogar Smartphones laufen, sollen Designer ein "What you see is what you get"-Layout-Erlebnis (WYSIWYG) bieten, das Ihnen zeigt, wie Ihr Design aussehen wird, und gleichzeitig das notwendige HTML und CSS bereitstellt, damit die Website in einem Browser funktioniert.

Mit vielen WYSIWYG-Programmen können Sie auf einfache Weise Ändern die Größe, die Gewichtung und den Stil Ihrer Typografie sowie die Farbe und die Hintergrundfarbe anpassen. Die Anwendung Typecast von Monotype ist ein solches WYSIWYG-Tool, das Designer eine sofortige Vorschau der Typografie und des Layouts in einer benutzerfreundlichen app bietet, die in einem Webbrowser funktioniert.

Sie können Ihre typografische Grundlage mit einer Schriftfamilie oder einer Kombination aus zwei oder mehreren erstellen, und mit WYSIWYG-Editoren wie Typecast app Hilfe erledigen Sie diese Aufgabe schneller und einfacher, als wenn Sie HTML und CSS Zeile für Zeile in einen Texteditor eingeben. Üblicherweise werden für Designer zunächst websichere Fonts verwendet, wie z. B. die Schriftfamilien Arial®, Georgia® oder Verdana® Schrift . Diese und andere Fonts sind auf den meisten Betriebssystemen installiert, was ihnen den alternativen Titel "System Fonts" verleiht. Es ist jedoch wichtig zu beachten, dass die Verwendung von System Fonts während der vorläufigen Entwicklung, wenn Sie Ihre typografischen Stilvorlagen in der Vorschau betrachten, nicht bedeutet, dass Sie in Ihrem endgültigen Design nur System Fonts verwenden sollten, was die Effektivität einer Website verwässern würde. Das System Fonts ist als Grundgerüst gedacht, auf dem Sie aufbauen und schließlich das Web Fonts verwenden, um Ihre Typografie anzupassen und Ihrer Website eine einzigartige Note zu verleihen.

Sie können von dem System Fonts , das Sie in Ihrem Layout mit Web Fonts verwenden, aufsteigen, indem Sie ein Side-by-Side-Layout verwenden, um die beiden zu vergleichen und gegenüberzustellen. Sie können aus einer Vielzahl von Anbietern und Fonts wählen, um Ihrer Website ein Erscheinungsbild zu geben, das zu Ihrer bestehenden Markenidentität passt, und Tests durchführen, um die beste Lösung für Ihr Fallback Font zu finden.

Wenn Ihre Typografie festgelegt, getestet und fertiggestellt ist, verwenden Sie Typecast, um Ihren Styleguide anzuzeigen, der zeigt, welche Fonts Sie verwenden werden, deren Anbieter, Ihre Farbpalette sowie die Stile und CSS-Eigenschaften. Und wenn Sie sich für einen Texteditor, einen Markdown-Editor, ein Textverarbeitungsprogramm oder ein Seitenlayoutprogramm entschieden haben, sollten Sie Ihr Layout in HTML und Ihre Stile in CSS exportieren, um sie in einem Browser in der Vorschau anzuzeigen und zu testen. Nachdem Sie Ihre Typografie festgelegt und webfähig gemacht haben, können Sie nun mit der Entwicklung des restlichen Webseitentyps beginnen.