Mo
07
Nov
2011
Design-Tipp: Schriftgestaltung
Heute haben wir mal wieder einen neuen Tipp von unseren Designern für euch! Vielleicht kennt ihr das, ihr surft auf einer Webseite, schwarzer Hintergrund, graue Schrift - sprich: kaum lesbar! Da kann der Text noch so toll geschrieben und informativ sein, der Webseiten-Besucher wird schnell gernervt sein und die Seite verlassen. Um dem vorzubeugen, gibt es einige Aspekte, die ihr bei der Gestaltung der Texte auf eurer Webseite beachten könnt.
Kontrast
Ihr solltet immer darauf achten, dass sich die Textfarbe deutlich vom Untergrund abhebt. Zum Beispiel ist grüner Text auf rotem Hintergrund ein absolutes No-Go!
Hinter einem Text sollte eher ein leichter, sanfter Hintergrund stehen. Wenn ein harmonischer Kontrast zwischen Text und Untergrund besteht, ist der Text angenehm zu lesen.
Und wer sich bei seiner Farbwahl nicht sicher ist, kann sich auf der Webseite kuler.adobe.com inspirieren lassen.
Schriftgröße & Zeilenabstand
In der Bearbeitungsleiste auf der rechten Seiten habt ihr unter 'Style/Schriftformat' die Möglichkeit, das Aussehen des Textes festzulegen.
Bei der Auswahl der Schriftgröße solltet ihr euch immer vor Augen halten, dass es Besucher gibt, deren Sehkraft beeinträchtigt sein kann. Deswegen solltet ihr nicht sparsam mit der Größe umgehen. Der übliche Zeilenabstand beträgt 120%. Setzt man den Zeilenabstand jedoch auf 140% oder mehr, wirkt der Text weniger gepresst und lässt sich leichter lesen.
Tipp: Im Gegensatz zu Papier hat eine Webseite keine Begrenzung und der Text kann nach unten laufen, ohne Nachteile oder Kosten zu verursachen.
Überschriften
Das Ziel von Überschriften ist es, das nachfolgende Element einzuleiten und dieses prägnant zu beschreiben. Zu große Überschriften wirken 'bullig' und ziehen zu viel Aufmerksamkeit auf sich, wobei hingegen zu kleine Überschriften nicht wie eine Überschrift wirken.
Tipp: Mit Veränderungen am CSS-Code könnt ihr bei allen Überschriften den Abstand zwischen den Buchstaben verringern (Spationierung) und bei der Überschrift 2 und Überschrift 3 einen Abstand nach oben einbauen (margin) , dadurch bekommen die Überschriften mehr Wirkung :
<style type="text/css">
h1,h2,h3 {
letter-spacing:-1px ;
}
h2,h3 {
margin-top:20px ;
}
</style>
Kommentare: 72
-
#1
find ich gut daumen hoch :)
-
#2
Hallo
-
#3
Schöner Tipp. Damit kann man auch im Blog einzelne Themen deutlicher voneinander trennen. Leider schiebt sich das Blogdatum-"Kalenderblatt" nicht gleich mit runter.
-
#4
o.k
-
#5
Sehr schön... danke!
-
#6
Guter Hinweis.
-
#7
Vielen Dank für die Tipps .
-
#8
Danke für neue Info's
Viele Grüsse -
#9
...oh, please, Olaf Timm!! No apostrophe before the plural "s"!!!!
-
#10
Gut (:
-
#11
danke :)
-
#12
Danke für die Infos! Schaut' mal' auf meiner WebSite vorbei!
Herzlichst, Eveline -
#13
Wunderbar. Weiter so! Besucht unseren Shop. Moonlon-Shop.de. Wir freuen uns auf euch!
-
#14
Danke für die Tipps ;-) Schaut mal auf meine Homepage: www.fanpage-frankwesemann.de
-
#15
Danke!
-
#16
Tipps sind immer gut,ob wir sie alle nutzen liegt an uns!!!!
-
#17
Klasse Tipps... mehr davon! ;-)
-
#18
Für die Gestaltung der Seiten würde ich mir dennoch eine größere Schriftauswahl (mehr Fonts) wünschen. Auch sehe ich nicht, dass ich wie beim Beispiel ganz oben die Hintergrundfarbe für meine Text wählen kann.
Das sind aber jetzt Klagen auf hohem Niveau;) -
#19
tipp ist klasse :)
-
#20
Klasse Tipps, immer wieder gerne :-)
-
#21
Gute Beschreibung hatte vor kurzem selbst die Funktion zur Schriftgrößen Änderung gefunden , aber ist trotzdem ein guter Tipp
-
#22
Vor allem der Tip, dass man Überschriften im CSS code verändern kann, finde ich sehr empfehlenswert. Vielen Dank Jimdo und beste Grüße aus Köln.
-
#23
die tipps sind sehr gut, wenn ich mal wieder zeit finde werde ich mir meine schriften noch mal intensiv vornehmen!
lg und danke an das jimdo-team! -
#24
Danke und Grüße
-
#25
Das sind gute Infos. Ich würde mir aber auch mehr unterschiedliche Fonts wünschen.
-
#26
Vielen Dank. Super!!!
-
#27
Richtig!
Ein gutes Schriftbild ist sehr wichtig.
Das Auge muss sich beim Betrachten der Seiten wohl fühlen,
ansonsten verlässt man die Homepage sehr schnell wieder.
Mit der erwähnten Schriftgrößen bin ich nicht so einverstanden.
Die Größe verändert sich beding durch die Monitorgröße.
Und wer als Besucher die Schrift größer haben möchte,
der kann unten in der Leiste die Schrift nach seinen Wünschen anpassen,
von 50 bis 400%. Die Grundeinstellung ist 100% - oder auch die
Einstellung >Benutzerdefiniert< wählen.
Grüße
-
#28
Das Schlimmste sind immer die rot auf schwarz Websiten !
-
#29
find ich gut (;
auch wenn ich das alles eh schon wusste; es gibt so einige 12jährige kinder die alles in rosa schreiben und die hintergründe so grell sind, dass man sofort auf seinen bildschirm spucken würde. -
#30
danke für die tipps!
-
#31
Dankee für die Tipps ihaa Süzzen ;*
-
#32
Einfache Idee, gute Wirkung und leicht umzusetzen...Daumen hoch:)
-
#33
Toll (:
-
#34
toll;-)
-
#35
Hey! Geht doch bitte, bitte, Biiiiiiite mal auf unsere Seite!Danke!
-
#36
sehr gut
-
#37
Danke für die Tipps. Wie kann ich denn die Schrifthintergrundfarbe verändern?
-
#38
Super Infos. Danke!
-
#39
Ich würde es gut finden wenn ihr bei der Textformatierung noch die Möglichkeit der Sonderzeichen einbaut.
Gedanken- bzw. Halbgeviertstrich, Typografisch korrekte Anführungszeichen u.s.w. -
#40
Danke für die Tipps! Die vier positiven Beispiele wirken super.
-
#41
Hammer!
Danke schön =) -
#42
Leider kann man immer noch nur mit HTML die "Größe" der Schriften ändern!
-
#43
Cool Cool :D
-
#44
Ich habe mal den CSS-Code der Überschriften übernommen und muss sagen: Es sieht wunderbar aus! Werde die Einstellung beibehalten, da die Überschriften nun echt gut aussehen. Mehr solcher Gestaltungstipps bitte und weiter so!
-
#45
cool ;)))
-
#46
Eure Tipps sind immer prima!
-
#47
Wie macht man hier den Hintergrund.. kann nur die Schriftfarbe ändern mit der Schriftformatierung, nicht aber den Hintergrund!
-
#48
danke für die tipps, kann man immer gebrauchen =)
liebe grüße,
voltiteam amtzell -
#49
Danke schön!
-
#50
danke, für die tipps!
-
#51
also ich habe ein problem mit mein design ich möschte mein eignen design laden aber ich kenne mich nicht so gut aus mit die navigation und so bitte hilfe , guckt euch mal die seite an und sagt mir ihre meinung ?
http://www.autoankauf-fahrzeug.de -
#52
Juhu!
-
#53
Hallo! Hab gedacht ich schreib mal was zu den Fragen zum Hintergrund: also wenn ihr einfach hinter dem text ein farbiges "kästchen" haben wollt könnt ihr einfach beim Textfeld auf HTML drücken und dann vor dem ganzen Inhalt <div style="background-color:yellow"> und am Schluss </div> einsetzen. Dann könnt Ihr auch zB vor den letzten " im ersten Teil allenfalls ;padding-bottom:10px oder halt je nach dem padding-left (oder top oder right) angeben um den kasten zu vergrössern, das yellow könnt ihr durch jeden beliebigen Farbencode ersetzen und die px angaben sind natürlich auch frei wählbar :)
-
#54
für ne freie Seite ist das Angebot und die Tipps echt klasse
-
#55
echt toll!
-
#56
gefällt mir.
Für einen Websitesbauerbeginner ist es immer gut Tipps zu bekommen.
Und ja es liegt an uns diese zu nutzen.
Danke -
#57
Die Überschriften sehen mit dem CSS-Code wirklich super aus.
-
#58
Danke für die Tipps.
-
#59
gut gut
-
#60
wo bleiben die Audifans ??
-
#61
Gute Tipps sind immer willkommen.
-
#62
Schöne Tipps, bitte mehr! Schaut doch mal in meine Website, lohnt sich! (Klick oben auf sicher-reisen)
-
#63
Danke für den Tipp. Werden wir bei neuen Webseitenprojekten einsetzen.
-
#64
Wo ein Wille ist, ist auch ein Wegñ.
-
#65
Vielen Dank. die Tipps haben sehr zur Verbesserung unserer Website beigetragen - www.conservationalliance.de
-
#66
Ich habe schon versucht meinen Text noch lesbarer zu gestalten aber nach dem Logout war wieder alles so in grau gehalten. Was mache ich falsch? Könnte mir bitte jemand über E-Mail ein paar nützliche Tips geben? Bitte über E-Mail weil ich wohl so schnell nicht wieder in diesem Blog sein werde
Ich wäre der Person zu größtem Dank verpflichtet. -
#67
Keine Umstände! Erneutes versuchen zeigte meine Fehler auf nun ist es hoffentlich lesbarer ?
-
#68
Cool Danke, werde einige Tipps sicher für zukünftige Projekte berücksichtigen
-
#69
Hammer geil...finde ich super !
weiter so JIMDO, ihr seit die BESTEN ! -
#70
für ne freie Seite ist das Angebot und die Tipps echt gut
-
#71
Vielen Dank :-)
-
#72
sehrschön
Druckversion