12pt in Photoshop sieht im Web völlig anders aus

Wir erstellen gerade eine Website in Photoshop und verwenden 12pt für die Schriftarten. Aber wenn wir die Schriftarten im Web mit 12pt sehen, sehen sie viel größer aus. Es scheint, dass wir 12px im Web verwenden müssen, damit es gleich oder ähnlich aussieht.

Meine Frage ist also, wie kann es sein, dass 12pt in Photoshop anders aussieht als 12pt im Web?

Vielen Dank

Meine Frage ist also, wie kann es sein, dass 12pt in Photoshop anders aussieht als 12pt im Web?

Aus mehreren Gründen.

1. Sie sind verschiedene Medien mit verschiedenen Font-Rendering-Engines. Einfach ausgedrückt ist Photoshop kein Webbrowser. Es wird nicht basierend auf CSS und HTML gerendert.

2. Punkte für den Messtyp sind keine exakten Messungen. Punkte beziehen sich auf den Begrenzungsrahmen des Buchstabens - nicht auf den Buchstaben selbst. Unterschiede in Schriftdateien und Rendering-Engines können ebenfalls zu diesem Unterschied beitragen.

3. DPI- und Zoomstufen in Photoshop vs. Zoomstufen im Browser. Sie können einfach variieren.

Denken Sie auch daran, dass Sie wahrscheinlich keine Übereinstimmung von Typ zu Browser oder sogar von Gerät zu Gerät erhalten. Es gibt einfach zu viele Variablen außerhalb Ihrer Kontrolle. Daher sollte man niemals davon ausgehen, dass das, was sie in Photoshop erstellt haben, das ist, was sie im Browser sehen. Photoshop ist einfach keine Webseite. Es ist in Ordnung als Ausgangspunkt, aber behandeln Sie es nicht als unbewegliche Blaupause.

Die gerenderte Schriftgröße (bei einer Zoomstufe von 100%) hängt auch von den dpi-Einstellungen Ihres Bildes ab.

Probieren Sie eines davon aus:

• Old School Standard für Webgrafiken: 72 dpi
• übliche Desktop-Displays: 96 dpi

Zusätzlich zu Scotts Antwort könnte der Grund dafür, dass die Schriftgröße in Photoshop oder im Web sehr unterschiedlich ist, darin liegen, dass Photoshop Punkte verwendet, während das Web Pixel verwendet (oder ems, was ich dringend empfehlen würde px).

Die Berechnung für die Beziehung wäre ungefähr so:

Schriftgröße in Pixel / Schriftgröße in Punkten = Browser-dpi (96) / Photoshop-Bildauflösung (ppi oder Punkte pro Zoll)

Wenn Sie also ein Photoshop-Bild mit 13pt Schriftart bei 72 ppi haben, ist die entsprechende Schriftgröße in Pixel für die Anzeige in einem Webbrowser

Schriftgröße in Pixel = (13/72) * 96 = 17,3 px

Hier sehen Sie eine Umrechnungstabelle .

Photoshop und Browser sind beide unterschiedlich, so dass es in der Textgröße möglich ist. Ich habe auch dieses Problem, also google ich es und finde http://pxtoem.com. Sie können sehen, wie die Schriftgröße funktioniert und welche Schriftgröße Sie für Ihren Text verwenden können.

Sie müssen sich daran erinnern, dass PhotoShop anders aufgebaut ist als ein Browser. In PhotoShop sind es also 12 Pixel auf einer Online-Website. Sogar Browser zeigen Dinge manchmal seltsam an oder verschieben ein Element 2 px nach rechts.

Wenn Ihr Browser eine Website rendert, verwendet er px anstelle von pt. Nichts wird auf allem gleich aussehen, nur danach streben, dass es gut aussieht.