Beim Erstellen einer Website ist mir aufgefallen, dass Arial mit hgroßer Schriftgröße im Layout (Photoshop) anders dargestellt wird als Arial in großer Schriftgröße in HTML.
Ich gehen davon aus, dass HTML durch das Verpixeln die Schrift „verzieht“.
Gibt es eine Möglichkeit die Schrift gut darzustellen (abgesehen von Hochladen eines Bildes der Schrift)?
Hallo,
grundsätzlich handelt es sich nun mal um ein anderes Ausgabemedium. Das liegt nicht am HTML, es liegt schlicht daran, dass Schrift auf einem Bildschirm anders erzeugt wird als auf Papier. Hinzu kommt die unterschiedliche Darstellung der diversen Browser, so dass eine Schrift niemals hundertprozentig beim Nutzer so ankommt, wie du es dir in deinem Layout gedacht hast 
Natürlich könnte man das jetzt als Bild darstellen, das ist aber aus mehreren Gründen keine besonders gute Lösung. Schon gar nicht für Arial - dies ist eine DER Webschriften, sprich damit kannst du nicht viel falsch machen. Warum deine Ausgabeschrift jetzt irgendwie verzerrt wirkt, kann man ohne ein Beispiel nicht beurteilen. Möglicherweise hast du auch einfach fehlerhafte Angaben im HTML?
Grüße
Moin,
außerdem musst Du immer daran denken, dass jeder Nutzer eine andere Schriftgröße favorisiert. Dadurch sieht dann Deine Website u.U. auch nochmal anders aus (und das Layout verzieht sich). Berücksichtigen muss man sowas aber in jedem Fall.
Genauso wie die Tatsache, dass der Nutzer die Schrift, die Du anzeigen willst, vielleicht gar nicht auf seinem Rechner hat, er einen Textbrowser benutzt oder Grafiken nicht darstellt (Alternativtext nicht vergessen!).
Liebe Grüße,
-Efchen
Erstmal danke für deine Anwort. Das Layout war nicht auf Papier, sondern in Photoshop erstellt, weshalb ich mich darüber gewundert habe. In CSS ist die Schrift als definiert, allerdings von font-weight wieder auf „normal“ zurückgesetzt. Die Schrift wird durch ein
in zwei Zeilen zerlegt. Seltsamerweise wirken die Buchstaben der oberen Zeile anders, als die in der unteren.
Danke Efchen.
Bei den frühen Firefoxversionen (Version 2?) wurde mit STRG und + nur die Schrift ohne Hintergrund vergrößert.
Auch das Layout ist nicht das Problem. Mit Arial sollte ich bei den meisten Systemen auf der sicheren Seite sein.
Es geht darum, dass die Schrift (Schriftgröße 22) in PS ordentlich aussieht, aber in HTML werden die Proportionen geändert.
Z.B. ist der waagrechte Mittelstrich von ‚e‘ in HTML höher als in Photoshop. (Vielleicht bin ich ja zu pingelig? )
Bei den frühen Firefoxversionen (Version 2?) wurde mit STRG
und + nur die Schrift ohne Hintergrund vergrößert.
Das geht auch heute noch und das habe ich z.B. bei mir so eingestellt.
Z.B. ist der waagrechte Mittelstrich von ‚e‘ in HTML höher als
in Photoshop. (Vielleicht bin ich ja zu pingelig?
Würde ich mal vorsichtig sagen aber das ist vermutlich ne Berufskrankheit. Ich möchte meinen, dass die meisten „normalen“ Nutzer davon gar nichts mitkriegen, weil sie in ihrem Browser gar nichts anderes gewohnt sind.
Liebe Grüße,
-Efchen
Das Layout war nicht auf
Papier, sondern in Photoshop erstellt
Für eine Website? Das ist aber gefährlich! Das passt sich dann ja weder der Schriftgröße noch der Größe des Viewports an!
Bitte nicht „slicen“ oder Tabellenlayouts erstellen!
In CSS ist die Schrift als
definiert
CSS definiert kein h2, HTML legt damit fest, dass es sich semantisch gesehen um eine Überschrift 2. Ordnung handelt, CSS kann darauf aufbauen und die Schriftgröße festlegen. Aber ohne Angabe der font-size sagt Dein Satz nichts darüber aus, wie groß die Schrift tatsächlich ist, weil es dafür keine Vorschriften gibt und das jeder Browser anders machen kann.
Seltsamerweise wirken die Buchstaben der oberen Zeile
anders, als die in der unteren.
Könnte man ja mit :first-line erreichen.
So ohne Code (bzw. besser Link) steht Deine Aussage unbestätigt im Raum. Vielleicht hast Du ja Fehler im Code.
Ansonsten kann man Fehler oder Nachlässigkeiten im Browser natürlich nicht ausschließen…
Mit Selektoren wie :first-line würde ich vorsichtig sein, man denke, dass der IE immer noch einen großen Marktanteil hat (die Schalten jetzt sogar Werbung für den Schrott).
Dass die Schrift anders aussieht könnte daran liegen, dass Du in PS „smooth“ oder etwas ausgewählt hat und die Schrift dann weichgezeichnet wird.
Und dann, wie schon gesagt wurde, rendert jeder Browser anders, der IE produziert meiner Meinung nach ein weniger scharfes Bild von Seiten als z.B. FireFox.
Aber im großen und ganzen tippe ich mal auf Pingeligkeit
Ja, du bist eindeutig zu pingelig Designer leiden immer, wenn sie das erste Mal fürs Web entwerfen sollen… Ich habe mir meine Designer immer gut erzogen. Die wissen jetzt, dass sie nicht zu weinen haben, wenn ihre schicke Schrift plötzlich nicht mehr so ganz schick ist oder ihre Linien nicht hundertprozentig an der gleichen Stelle stehen wie im Entwurf… dafür gebe ich mir Mühe, ihre Entwürfe umzusetzen, und am Ende gibts dann bei einem schönen Entwurf auch ein schönes Ergebnis. Also: nicht den Mut verlieren, die Seite mal fertigstellen und dann das Endergebnis betrachten
Hallo,
wichtig für gelernte Print-Designer ist, zu verstehen, dass Web-Design was vollkommen anderes ist und viele Regeln einfach gar nicht mehr gelten. Hinzu kommen neue Regeln, die wichtiger sind, als manches, was sie im Print-Bereich gelernt haben.
Dass z.B. das „Blatt Papier“ sehr unterschiedliche Größen haben kann und dass sie auch die Schriftgröße nicht vorgeben können.
Liebe Grüße,
-Efchen
Mit Selektoren wie :first-line würde ich vorsichtig sein, man
denke, dass der IE immer noch einen großen Marktanteil hat
(die Schalten jetzt sogar Werbung für den Schrott).
Ja, die Werbung sagt „Mit Sicherheit ins Internet“ - ich musste beim ersten Mal herzhaft lachen. Wenn ich Sicherheit will, nehm ich sicher nicht den IE.
Aber Deine Aussage ist so global gesehen auch irrelevant. Man muss unterscheiden zwischen der Nutzbarkeit und dem Aussehen bzw. bloßer Schönheit. Klar ist, dass eine Website in jedem Browser nutzbar sein MUSS, sowohl im IE als auch im Firefox. Aber auch in Netscape 0.8, Mosaic, Lynx, Jaws oder anderen Exoten. Das hat aber noch nichts mit dem Aussehen zu tun.
Wenn ein Browser - aufgrund seines Alters (Netscape 0.8), seiner Fähigkeiten (Lynx als Textbrowser) oder mangelhafter Umsetzung (IE6) - etwas nicht gemäß dem Standard darstellt, ist das in erster Linie sein Problem. Es schadet der Nutzbarkeit einer Site gar nicht, wenn eine Site in zwei Browsern unterschiedlich aussieht (Lynx vs. Firefox ist das wohl sogar immer so ). Wenn also ein alter IE :first-line nicht versteht, ist das sicher kein Beinbruch.
Menschen, die mit veralteten Browsern unterwegs sind, müssen lernen, dass sie nicht neumodische Features angezeigt bekommen können. Aber sie können erwarten, dass die Site trotzdem zu 100% nutzbar ist, wenn auch vielleicht auf leicht andere Weise als in anderen Browsern.
Liebe Grüße,
-Efchen
Ja, das „Blatt Papier“ ist tatsächlich eine schwierige Denkweise.
Darum lege ich mein Layout in PS an. Dort kann ich teiltransparente Rahmen in 800x600, 1024x768 usw. drüberlegen und den Effekt abschätzen.
Nur bei webfähigen Handys und anderen internetfähigen Kleincomputern weiß ich noch nicht ganz, wie ich Seiten erstelle.
teiltransparente Rahmen in 800x600, 1024x768 usw. drüberlegen
und den Effekt abschätzen.
Was ist mit Leuten, die 1600x1040Pixel fahren? Oder widescreen Auflösungen? Oder die ganz fies sind, und ihren Browser nicht im Vollbild fahren, sondern irgend nen ganz wilden Viewport haben, z.B. 567x234 Pixel?
Worauf ich hinaus will: DU HAST KEINE FESTE GRÖßE! Pixelgenaue Ausrichtung ist vollkommen irrelevant im Web, weil DU NICHT WISSEN KANNST, in welchem Viewport Deine Seite angezeigt wird.
Ja, das „Blatt Papier“ ist tatsächlich eine schwierige
Denkweise.
Darum lege ich mein Layout in PS an. Dort kann ich
teiltransparente Rahmen in 800x600, 1024x768 usw. drüberlegen
und den Effekt abschätzen.
Und damit bist Du voll ins Fettnäpfchen getreten.
Wie kommst Du auf diese Zahlen? Die sind völlig irrelevant.
Was ist mit 772x981? 300x200? 825x624?
Genau das ist die falsche Denkweise von Print-Designern. Sie kennen nur DIN-Größen und wählen das eine oder andere Format. Im WWW ist aber alles variabel! Das Seitenverhältnis ist unterschiedlich, die Auflösung ist vollkommen irrelevant, Schriftgrößen verändern alles.
Nur bei webfähigen Handys und anderen internetfähigen
Kleincomputern weiß ich noch nicht ganz, wie ich Seiten
erstelle.
Mit CSS und media=„handheld“. Ansonsten genauso. Und mit dynamischen Layouts. Deswegen ist ein Grafikprogramm für Layouterstellung auch absolut ungeeignet!
Liebe Grüße,
-Efchen
Bei vielen Websites ist es möglich, sie variabel zu erstellen, z.B. bei CMS.
Andere Seiten brauchen spezielles Design um „rüberzukommen“. Ich behaupte einfach mal, dass das Design bei variablen Seiten eingeschränkt ist, aber ich stimme zu, dass variable Seiten besser gehandhabt werden können.
1 Like
Die großen Auflösungen sind z.B. in einem 800x600er Entwurf ja abgedeckt. Auch der Background zählt zur Gestaltung dazu.
Bei Surfern, die den Browser auf ein winziges Fenster minimiert haben gehe ich davon aus, dass sie bei Interesse schlau genug sind, das Fenster großzuziehen.
Die einzige Schwierigkeit besteht - wie in meinem vorigen Post schon erwähnt - in der Anzeige für Handys.
Meiner Ansicht nach können variable Seiten nicht so gut gestaltet werden, wie solche mit festen Größen.
Genau so seh ich das auch. Irgendwo muss sich der User auch anpassen. Ich kann nicht erwarten ein Hochglanzseite zu sehen, wenn ich mit einem uralten Netscape oder IE jenseits Version 6 unterwegs bin.
Jeder Webdesigner muss eben seine Grenze setzen, wie weit er dem User bzw. Kunden entgegenkommt.
Bei vielen Websites ist es möglich, sie variabel zu erstellen,
z.B. bei CMS.
Das hat nichts mit CMS zu tun. Ein CMS ist ja nur eine Software, die Dir die Website erstellt. Auch ohne CMS kann man dynamische Designs erstellen.
Andere Seiten brauchen spezielles Design um „rüberzukommen“.
Aber was bringt Dir das spezielle Design, wenn zahlreiche Nutzer aufgrund eines unpassenden Viewports die Site als hässlich empfinden, z.B. weil sie viel horizontal scrollen müssen oder weil mehr als 50% der Anzeigefläche leer ist.
Solche Designs sind dann IMHO gar nicht web-tauglich, sondern sollten auf dem Papier bleiben.
Leute, die eine Website als schlecht empfinden, sagen das so weiter. Mundpropaganda kann für so eine Website sogar das Todesurteil bedeuten.
Ich behaupte einfach mal, dass das Design bei variablen Seiten
eingeschränkt ist
Das kann sogar sein. Aber das sind nunmal die anderen Voraussetzungen im WWW gegenüber dem Print-Design.
aber ich stimme zu, dass variable Seiten
besser gehandhabt werden können.
Und darum gehts im WWW primär. Besser eine Website mit etwas weniger gutem Design, die ich gut benutzen kann, die mich nicht nervt oder in meinen Entscheidungen behindert, als eine, die optisch ein Knüller ist, aber bei der Bedienung so umständlich ist, dass man lieber woanders hin geht.
Liebe Grüße,
-Efchen
Die großen Auflösungen sind z.B. in einem 800x600er Entwurf ja
abgedeckt.
Auflösungen sind im WWW absolut irrelevant.
Ich kann auch bei einer Auflösung von 1600x1200 einen Viewport von weniger als 800x600 haben. Außerdem sehen Websites, die nur eine Größe von 800x600 haben, in einem 1600x1200 großen Viewport einfach nur schlecht aus.
Auch der Background zählt zur Gestaltung dazu.
Aber vom Background hat der Anwender nichts. Wenn er einen großen Viewport hat, dann hat er den, weil er viele Informationen auf einem Blick haben will. Es bringt ihm nichts, wenn die Website dann nur 25% seiner möglichen Fläche einnimmt und er dann scrollen muss. Dann ist er genervt, sucht sich eine andere Site und sagt anderen, dass die Website Mist ist.
Bei Surfern, die den Browser auf ein winziges Fenster
minimiert haben gehe ich davon aus, dass sie bei Interesse
schlau genug sind, das Fenster großzuziehen.
Warum sollten sie sich an die Website anpassen?
Das macht kaum einer. Es gibt sicher auch andere Websites zu dem Thema. Den Nachteil hat der Betreiber dieser Website, nicht der Nutzer.
Die einzige Schwierigkeit besteht - wie in meinem vorigen Post
schon erwähnt - in der Anzeige für Handys.
Nein, das ist wieder viel einfacher, weil Du da einfach ein anderes Stylesheet einbindest, das für Handys optimiert ist.
Schwieriger sind da Netbooks, die oft nur eine maximale Auflösung von 1024x600px haben, der Viewport da also selbst bei maximiertem Fenster oftmals nur ca. 400px hoch ist.
Ich habe auch so ein Teil und ich HASSE Websites, die meinen, sie müssen Elemente, die höher sind als mein Viewport, vertikal zentrieren: Da sehe ich dann nämlich oben und unten nichts. Ganz oberschlau sind die, die sich per JavaScript immer in die Mitte schieben, d.h. die Inhalte gehen unten raus, aber man kann nicht hinscrollen, weil sich das Fenster mitbewegt - intelligent!
Meiner Ansicht nach können variable Seiten nicht so gut
gestaltet werden, wie solche mit festen Größen.
Richtig, aber wie schon geschrieben, was nützt Dir eine gut aussehende Site, wenn sie nicht benutzt werden kann?
Liebe Grüße,
-Efchen
Genau so seh ich das auch. Irgendwo muss sich der User auch
anpassen.
Hmmm…so hab ich das eigentlich nicht gemeint.
Jeder soll nutzen, was er will. Websites MÜSSEN in jedem Client funktionieren.
Ich sehe das nicht als „anpassen“, dass sich ein Nutzer bewusst sein muss, dass alte Software nicht das selbe Ergebnis liefern kann, wie aktuelle Software.
Ich kann nicht erwarten ein Hochglanzseite zu sehen,
wenn ich mit einem uralten Netscape oder IE jenseits Version 6
unterwegs bin.
Das ist richtig. Aber die wenigsten wollen eine Hochglanzseite sehen. Die Leute gehen ins WWW, um Informationen abzuziehen.
Jeder Webdesigner muss eben seine Grenze setzen, wie weit er
dem User bzw. Kunden entgegenkommt.
In Sachen Nutzbarkeit gibt es da keine Kompromisse. Die Technik erlaubt es, 100%ige Nutzbarkeit, auch für veraltete Browser und für Clients, die gar nichts darstellen, z.B. Suchmaschinen oder Vorlesebrowser, zu erreichen, und das muss das Ziel eines jeden Webmasters sein. Mit dem Aussehen hat das aber natürlich noch nichts zu tun.
Liebe Grüße,
-Efchen