Anweisungen für einen Druckdesigner, der systemfremde Schriftarten für Websites verwenden möchte

Sie haben hier ein paar separate Probleme, zuerst würde ich empfehlen, die Designer auf beides hinzuweisen

http://www.fontsquirrel.com und http://www.google.com/fonts/

Diese Sites enthalten CC-Fonts, die perfekt im Web funktionieren und völlig kostenlos zu verwenden sind, und es gibt Anweisungen auf der Site, wie Sie sie zu Ihren Websites hinzufügen können - sowie einen Download, damit sie in Designanwendungen verwendet werden können.

Zweitens würde ich empfehlen, Ihren Designern eine CSS-Framework-Vorlage zu geben, auf die sie hinarbeiten können. Etwas wie Bootstrap (es gibt viele andere, wählen Sie Ihre Präferenz) wäre gut dafür.

http://twitter.github.io/bootstrap/ - das Framework selbst

http://benstewart.net/2012/06/bootstrap-responsive-photoshop-templates/ - eine PSD-Vorlage (dies war eine schnelle Suche, möglicherweise sind bessere verfügbar).

Wenn Sie sie dazu bringen können, mithilfe des Rasters zu entwerfen, können Sie möglicherweise viel näher an ihren Entwürfen Ergebnisse erzielen.

Wenn ich Druckdesignern begegne, die sich weigern, das Medium zu verstehen, setze ich mich normalerweise hin und erkläre den Unterschied:

In PhotoShop = bestimmen Sie als Designer das Design.

In HTML/CSS = können Sie als Designer nur vorschlagen, was es sein könnte.

Die PSD ist also ein großartiger Vorschlag, Sie als Entwickler werden das umsetzen, aber letztendlich liegt es an jeder einzelnen Person, Voreinstellung, Webbrowser, Computerbildschirm und Betriebssystem, zu entscheiden, wie nah es an Ihrem Vorschlag liegt.

Darüber hinaus sind im Allgemeinen Dinge zu beachten, die beim Schreiben im Web zu beachten sind:

• Für Fließtext kann eine Schrift mit einer großen x-Höhe die Lesbarkeit etwas erleichtern
• Vermeiden Sie den Einstellungstyp kleiner als 11px (
• Die Schriftglättung wird durch den Browser und das Betriebssystem bestimmt. Es ist von Maschine zu Maschine, von Browser zu Browser unterschiedlich
• Webfonts können großartig sein, aber aufgrund von Problemen mit der Schriftglättung in einigen Situationen möchten Sie ihre Verwendung möglicherweise auf die Anzeige von Gesichtern (Überschriften) beschränken.

In der Vergangenheit wurden beliebte Systemstandardschriften als " websichere " Schriften bezeichnet. Es wurde von vielen im Webdesign als gute Praxis angesehen, sich an diese zu halten. Warum fragst du? In den frühen Tagen des Internets gab es nicht wirklich eine Standardschrift, die man verwenden konnte, die auf allen verschiedenen Plattformen gerendert wurde. Es gab jedoch Schriftarten, die eher vom Computer einer Person stammten, wie Arial, Helvetica und Times New Roman.

Aber heutzutage ist das ein bisschen anders. Mit modernen Browsern ist es jetzt sicher, " Webfonts " zu verwenden , eine Technik, die eine Remote-Schriftartdatei verwendet, um eine bestimmte Schriftart auf einer Webseite mit @font-face wiederzugeben , was mehr kreative Freiheit und Flexibilität beim Entwerfen einer Webseite bietet. Dies ist keineswegs ein neues Konzept, es wurde zumindest teilweise bis mindestens IE 5.5 unterstützt.

@font-face wurde offiziell in die neueste Version der CSS-Standards des W3C aufgenommen (CSS3, es wurde aus CSS2.1 herausgenommen). Die Google Fonts-API bietet eine schnelle und einfache Möglichkeit, die Schriftarten in ihrer Bibliothek sofort nutzbar zu machen, indem Sie den benötigten Code generieren, nachdem Sie die gewünschte Schriftart ausgewählt haben.

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body { font-family: 'Open Sans'; }

Aber das bedeutet nicht, dass Sie bei der Auswahl Ihrer Webfonts wild werden können. Sie sollten Schritte unternehmen, um einen CSS-Font-Stack zu verwenden, um sicherzustellen, dass Sie Ihr Texterlebnis elegant verschlechtern, falls Ihr gewählter nicht geladen wird.

body {font-family: "Open Sans", "Arial", "Helvetica", sans-serif; }

Ein CSS-Font-Stack sollte ähnliche websichere Schriftarten enthalten, wobei die letzte Deklaration im Stack eine generische Schriftfamilie ("serif" oder "san-serif") sein sollte. Was passiert ist, wenn Ihr Browser eine Schriftart nicht finden kann, sucht er nach der nächsten in der Reihe.

Aber warum ist das wichtig? Schließlich scheint die Verwendung von websicheren Schriftarten und CSS-Schriftartstapeln veraltet zu sein, zumal @font-face eine großartige Unterstützung für alle modernen Browser bietet.

Dafür gibt es mehrere Gründe... einer davon ist die Vollständigkeit dieser Schriftarten. Bestimmte Zeichen in der von Ihnen ausgewählten Schriftart sind möglicherweise nicht verfügbar (dieser Schriftart fehlt das Zeichen ™). In diesem Fall versucht der Browser, die nicht verfügbaren Zeichen mit der nächsten Schriftart in Ihrem CSS-Schriftartenstapel darzustellen. Wenn Sie keinen solchen Schriftartenstapel haben, verwendet der Browser Ihre Standard-Standardschriftart (dies können Sie in Ihren Browsereinstellungen festlegen). Warum sollte das jemals ein Problem sein? Angenommen, Sie haben eine Serifen-Überschrift (wie Times New Roman) in der oben genannten Schriftart und die Standardschriftart Ihres Browsers ist eine serifenlose Schriftart (wie Arial). Die Diskrepanz zwischen den beiden unterschiedlichen Stilen sieht nicht unbedingt gut aus. Sie haben keine Kontrolle darüber, welche Browser-Standardschriftart ein Browser haben soll, noch sollten Sie dies versuchen.

Ein weiterer Grund wäre das Internet selbst. Gelegentlich fällt das Internet aus und damit auch die Dienste im Internet. Diese Schriftarten, die Sie haben, werden im Internet gehostet. Wenn der Dienst, der sie hostet, ausfällt, wird sie niemals geladen, selbst wenn es sich um die beste Schriftart der Welt handelt, sondern stattdessen den Standardstandard Ihres Browsers verwenden – es sei denn, Sie geben eine websichere Schriftart in Ihrem CSS-Schriftartenstapel an. Meine Website kann drastisch anders aussehen, wenn Ihre beabsichtigte Schriftartdatei aufgrund einer Art von Dienstunterbrechung plötzlich nicht verfügbar ist.

Sie können das Herunterladen von Webfonts clientseitig über Ihren Browser deaktivieren. Aber warum würdest du das jemals tun wollen? Dies ist einer der am meisten übersehenen Gründe, die Leistung. Dies ist wünschenswerter für Benutzer, die aus dem einen oder anderen Grund langsame Internetverbindungen haben. In den meisten Fällen ist die Vorgehensweise in einem Browser etwas verschleiert. Es kann weitere 1,2 Sekunden dauern, um eine Schriftart von Googles Schriftarten-API zu laden, wenn die Seite normalerweise in 0,011 Sekunden geladen würde. Obwohl wir Geschwindigkeit als selbstverständlich ansehen, da schnelles Breitband in den meisten entwickelten Ländern leicht verfügbar ist, ist es wichtig sicherzustellen, dass die Sichtbarkeit und Konsistenz der Typografie Ihrer Website nicht durch die Einschränkung des Benutzers (Zugänglichkeitsoption) oder seiner Plattform (Bandbreite, Browser).

Abschließend möchte ich sagen, dass es in Ordnung ist, Schriftarten zu verwenden, die nicht websicher sind, um die Dinge schön aussehen zu lassen, aber werden Sie nicht verrückt und verlassen Sie sich nicht auf sie, da nicht alle Benutzererfahrungen erstellt werden gleich (Browser stellen Schriftarten und Standardgrößen je nach Browser- und/oder Systemeinstellung unterschiedlich dar, z. B. ClearType). Sie können einem Benutzer nicht wirklich sagen, wie er Ihre Website verwenden soll, aber Sie können ihm sagen, wie er das beste Erlebnis erzielen kann. Wenn sie nicht in der Lage sind, durchzukommen, können Sie sicher sein, dass Sie die Dinge entsprechend anpassen, damit sie immer noch eine gute Erfahrung machen können. Die Dinge im Internet sind nicht unbedingt in Stein gemeißelt (oder auf Tinte und Papier). Die variable Flexibilität des Internets ermöglicht es Benutzern, Inhalte so bereitzustellen, wie es für sie am bequemsten ist.

Wenn ich das richtig gelesen habe, möchten Sie die effizientesten Techniken zum Rendern der Schriftart im Web. Gehen Sie in diesem Fall, wie bereits erwähnt, zu Fontsquirrel und verwenden Sie deren @font-face-Syntax-/Formatgenerator. Er schreibt die @font-face-Deklaration für Sie, obwohl ich meine bearbeite, aber was noch wichtiger ist, er erstellt Kopien der gewünschten Schriftart in andere Formate, Ausrichtung auf andere Browser/Plattformen, effektives Erreichen Ihrer Wünsche.

das heißt: es gibt immer noch sehr deutliche unterschiede zwischen einigen windows-versionen und der verwendung von directx. Ich habe auch seit einiger Zeit ein pissarmes Font-Rendering in Chromme auf Win7. Abgesehen von Chrome-Problemen sind die meisten von Fall zu Fall Probleme. Es gibt ein paar CSS3-Eigenschaften, die eine eingeschränkte Browserimplementierung haben, und normalerweise können die Probleme, die ich sehen werde, behoben werden, indem man an diesen herumbastelt ...

Das heißt: Google Fonts, Typekit usw. haben (einige) Optimierungen eingebaut, um speziell die oben genannten Fälle zu behandeln ... ich bin auch kein großer Fan von beiden, weil die erste Regel von Drittanbietern Abhängigkeiten sollen Abhängigkeiten von Drittanbietern vermeiden. ;)
Das ist natürlich nicht realistisch, aber ich trimme sie so weit wie möglich. Ich mag auch, dass das Rollen meines eigenen nicht auf Javascript angewiesen ist, sowie zusätzliche HTTP-Anfragen stellt, und schließlich erlaubt es mir, durch @font-face-Deklaration handzulesen, zu bearbeiten/trimmen, wo ich es für richtig halte.

1. Sie sollten ihnen erklären, dass Sie bei Websites keine 100-prozentige Konsistenz über all die Millionen von Variablen erreichen können, sondern nur alle Maßnahmen ergreifen können, um so viel Konsistenz wie möglich zu erreichen. Die Art und Weise, wie DA01 es in seiner Antwort formuliert, ist eine sehr prägnante und einfache Möglichkeit, die Botschaft zu vermitteln.

2. Ich würde ihnen dann sagen, dass sie sich zuerst für einen oder mehrere Schriftarten entscheiden sollen und nicht für eine bestimmte Schriftart.

3. Betrachten Sie dann, erst nachdem Sie sich für den Stil entschieden haben, die verfügbaren Optionen mit einem systematischen Ansatz von den schlechtestmöglichen Bedingungen zu den idealen Bedingungen.
   Beginnen Sie mit grundlegenden Systemschriftarten (die 5 universell unterstützten Schriftarten) und arbeiten Sie sich nach außen vor. Sie könnten einige weniger unterstützte Systemschriftarten und dann eine einzelne ideale Webschriftart auswählen. (Sie möchten nicht viele Webfonts auf einer Seite laden und rendern, wie Sie wahrscheinlich wissen).

Sprechen Sie nicht über die Aufgabe, als ob sie zur Diskussion stehen würde, sondern erklären Sie ihnen, dass es in ihrer Verantwortung als guter Designer liegt, diese Dinge zu kennen und zu berücksichtigen, wenn sie erfolgreich für das Web entwerfen möchten.

Es gibt eine andere aktuelle Frage, die für Sie nützlich sein könnte:

Ist es akzeptabel, unterschiedliche, aber ähnliche Schriftarten für Print-Inhalte und Web-Inhalte zu verwenden?