Wird der Text meiner Website im Webbrowser genauso aussehen wie in Photoshop?

Ich möchte sicherstellen, dass mein Design im Internet genauso aussieht wie in Photoshop oder InDesign

Du kannst nicht.

Der Grund dafür ist, dass es keine „genaue“ Art und Weise gibt, wie Ihre Website im Web funktionieren wird. Jeder Browser, jedes Betriebssystem, jede Endbenutzerpräferenz, jeder Bildschirm, jede Hardware bringt eine gewisse Abweichung mit sich.

Aus diesem Grund schlagen so viele Leute vor, Websites nicht mehr vollständig in Photoshop zu entwerfen und stattdessen Photoshop als Zeichenwerkzeug zu verwenden, sondern Ihr Design so schnell wie möglich in Markup und CSS umzuwandeln. Auf diese Weise können Sie mit der Variabilität entwerfen, anstatt dagegen anzukämpfen.

Wenig überrascht von einigen dieser Antworten, die das größere Problem nicht ansprechen ... Es sei denn, ich vermisse hier etwas völlig ...

Die Frage, ob Photoshop mit Webfonts funktioniert oder nicht, ist wie die Frage, ob Sie mit Ihrem Honda Civic auf großen Wellen surfen können. Sie sind nicht einmal das gleiche Reich.

ALLES, was Sie in PS tun, wird irgendwann als eine Art Bild ausgespuckt. An diesem Punkt ist es völlig strittig, ob Schriftarten funktionieren oder nicht funktionieren. Das sind dann nur Pixel. Genau aus diesem Grund exportiert Adobe Muse nicht websichere Schriftarten als Bilder, weil sie natürlich angezeigt werden. Egal, ob es sich um Helvetica oder die abscheulichste obskure kostenlose Display-Schriftart handelt, die Sie je gesehen haben, es wird als Pixel in PS enden.

Nun, wenn Sie nur wegen Mockups sprechen, dann ja, halten Sie es bei websicheren Sachen, wenn Sie in PS sind. Selbst wenn Sie sich nicht sicher sind, wenn Sie mit dem Entwerfen beginnen und etwas nicht Web-sicheres haben, verwenden Sie einfach Google Fonts oder TypeKit oder etwas anderes, um einen geeigneten Ersatz zu finden.

Nö. Vielleicht. Wahrscheinlich nicht.

Zunächst einmal für die Zweifelnden: Sie können mit Sicherheit Webfonts in Photoshop verwenden, wenn Sie die erforderlichen Schriftformate herunterladen können. Auf diese Weise können Sie sich eine Vorstellung davon machen , wie Ihr Typ im Internet aussehen wird, keine exakte Darstellung.

Wieso den? Nun, einfach gesagt, Photoshop und InDesign bieten einige Tools, die Browser noch nicht bieten. Am wichtigsten ist, dass Browsern ein guter, vielseitiger Anti-Aliasing-Algorithmus für Text fehlt. Die Produkte von Adobe glätten dünne Linien automatisch, während der Browser sie zackig darstellen kann. Noch frustrierender ist, dass diese Inkonsistenzen selbst ziemlich inkonsistent sind; Text kann in Firefox wunderbar aussehen, in Chrome aber hässlich.

Also 100% Übereinstimmung? Vergiss es. Hier sind jedoch einige allgemeine Tipps, damit Ihre Schriftarten online besser aussehen:

• Dünne Linien, die gezackt aussehen? Ändern Sie Ihre font-sizeum ein Pixel.
• Alternativ fügen text-shadowSie Ihrem Text ein kleines (<1 px) hinzu. Lässt Ihren Text ein sehr kleines bisschen weniger scharf aussehen, aber optimieren Sie dies genug und es wird besser aussehen als je zuvor.
• Verwenden Sie letter-spacing, insbesondere bei großen Kopfzeilen. Bringen Sie sie ein bisschen näher zusammen.
• Sie können die Lesbarkeit drastisch verbessern, indem Sie mit spielen line-height.

TL;DR Erwarten Sie keine exakte Übereinstimmung in PS und Browsern, sondern verwenden Sie die typografischen Werkzeuge, die CSS Ihnen bietet.

Es gibt websichere Schriftarten und Online-Schriftartenressourcen, auf die Sie verweisen können, und Technologien für die Webtypografie mit Schriftarten ändern sich schnell, ebenso wie Richtlinien. Ich habe versucht, Web Preflight ( https://www.oss-usa.com/web-preflight?promo=web-preflight ) für den ersten Durchgang von Photoshop-Webdesigns zu verwenden, funktioniert ziemlich gut.