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>

Kommentar schreiben

Kommentare: 89
  • #1

    diesewebsidehatstyle (Montag, 07 November 2011 15:49)

    find ich gut daumen hoch :)

  • #2

    deutschland-politik (Montag, 07 November 2011 16:15)

    Hallo

  • #3

    asv-gifhorn (Montag, 07 November 2011 16:34)

    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

    Annett Lerche (Montag, 07 November 2011 16:49)

    o.k

  • #5

    sessel-24 (Montag, 07 November 2011 16:51)

    Sehr schön... danke!

  • #6

    Heiko Schulz (Montag, 07 November 2011 16:55)

    Guter Hinweis.

  • #7

    schneckenhaltung (Montag, 07 November 2011 17:03)

    Vielen Dank für die Tipps .

  • #8

    Olaf Timm Urlaub im schönen Frankenland und Bayern (Montag, 07 November 2011 17:22)

    Danke für neue Info's
    Viele Grüsse

  • #9

    ETCETERA (Montag, 07 November 2011 17:46)

    ...oh, please, Olaf Timm!! No apostrophe before the plural "s"!!!!

  • #10

    kaninchen-allerlei (Montag, 07 November 2011 18:01)

    Gut (:

  • #11

    Jedward.Jimdo.com (Montag, 07 November 2011 18:22)

    danke :)

  • #12

    womanspoint (Montag, 07 November 2011 18:25)

    Danke für die Infos! Schaut' mal' auf meiner WebSite vorbei!

    Herzlichst, Eveline

  • #13

    Christian Schäfer (Montag, 07 November 2011 18:40)

    Wunderbar. Weiter so! Besucht unseren Shop. Moonlon-Shop.de. Wir freuen uns auf euch!

  • #14

    Anette Klötzer (Montag, 07 November 2011 19:08)

    Danke für die Tipps ;-) Schaut mal auf meine Homepage: www.fanpage-frankwesemann.de

  • #15

    Dennis Heidrich (Montag, 07 November 2011 19:11)

    Danke!

  • #16

    sv-friedrichweiler (Montag, 07 November 2011 19:54)

    Tipps sind immer gut,ob wir sie alle nutzen liegt an uns!!!!

  • #17

    Dieter Zawodniak (Montag, 07 November 2011 19:58)

    Klasse Tipps... mehr davon! ;-)

  • #18

    tortenmanufaktur-am-meer (Montag, 07 November 2011 20:41)

    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

    gsvz (Montag, 07 November 2011 20:54)

    tipp ist klasse :)

  • #20

    das-tagungshotelportal (Montag, 07 November 2011 21:20)

    Klasse Tipps, immer wieder gerne :-)

  • #21

    solarstrom-simon (Montag, 07 November 2011 21:59)

    Gute Beschreibung hatte vor kurzem selbst die Funktion zur Schriftgrößen Änderung gefunden , aber ist trotzdem ein guter Tipp

  • #22

    Asienspezialist -check in (Dienstag, 08 November 2011 00:10)

    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

    aplusphoto (Dienstag, 08 November 2011 08:01)

    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

    Ursula (Dienstag, 08 November 2011 08:46)

    Danke und Grüße

  • #25

    sylter-reethof (Dienstag, 08 November 2011 09:45)

    Das sind gute Infos. Ich würde mir aber auch mehr unterschiedliche Fonts wünschen.

  • #26

    Viviane Koch (Dienstag, 08 November 2011 12:24)

    Vielen Dank. Super!!!

  • #27

    Gerhard (Dienstag, 08 November 2011 12:43)

    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

    Kostenlose Musik (Dienstag, 08 November 2011 13:24)

    Das Schlimmste sind immer die rot auf schwarz Websiten !

  • #29

    hangi (Dienstag, 08 November 2011 17:11)

    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

    collectors-palace (Dienstag, 08 November 2011 17:16)

    danke für die tipps!

  • #31

    leoslive (Dienstag, 08 November 2011 17:54)

    Dankee für die Tipps ihaa Süzzen ;*

  • #32

    JETZT WIRD GEERNTET: Gutscheinheft für Existenzgründer und Jungunternehmer (Dienstag, 08 November 2011 18:05)


    Einfache Idee, gute Wirkung und leicht umzusetzen...Daumen hoch:)

  • #33

    drawing-contest (Dienstag, 08 November 2011 18:59)

    Toll (:

  • #34

    vom-mailingerbach (Dienstag, 08 November 2011 19:21)

    toll;-)

  • #35

    lunamona (Dienstag, 08 November 2011 20:42)

    Hey! Geht doch bitte, bitte, Biiiiiiite mal auf unsere Seite!Danke!

  • #36

    Evelyne Blaser (Mittwoch, 09 November 2011 07:06)

    sehr gut

  • #37

    jederzeitmachbar (Mittwoch, 09 November 2011 07:30)

    Danke für die Tipps. Wie kann ich denn die Schrifthintergrundfarbe verändern?

  • #38

    bequeme-hufe (Mittwoch, 09 November 2011 07:57)

    Super Infos. Danke!

  • #39

    michael-tewes (Mittwoch, 09 November 2011 09:37)

    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

    beautiful-places (Mittwoch, 09 November 2011 14:43)

    Danke für die Tipps! Die vier positiven Beispiele wirken super.

  • #41

    fishkeeping (Mittwoch, 09 November 2011 16:26)

    Hammer!
    Danke schön =)

  • #42

    Walter-W. Legenstein (Donnerstag, 10 November 2011 12:10)

    Leider kann man immer noch nur mit HTML die "Größe" der Schriften ändern!

  • #43

    Animal Crossing Community (Donnerstag, 10 November 2011 13:35)

    Cool Cool :D

  • #44

    Minispiele (Donnerstag, 10 November 2011 14:49)

    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

    DODO (Samstag, 12 November 2011 18:18)

    cool ;)))

  • #46

    photoimpactfantasyart (Sonntag, 13 November 2011 13:27)

    Eure Tipps sind immer prima!

  • #47

    naturheilpraxis-liliamaie (Montag, 14 November 2011 11:15)

    Wie macht man hier den Hintergrund.. kann nur die Schriftfarbe ändern mit der Schriftformatierung, nicht aber den Hintergrund!

  • #48

    voltiteam-amtzell (Dienstag, 15 November 2011 09:59)

    danke für die tipps, kann man immer gebrauchen =)
    liebe grüße,
    voltiteam amtzell

  • #49

    prophylaxe-zahnarzt-bobin (Dienstag, 15 November 2011 15:35)

    Danke schön!

  • #50

    geertwilders-supporters (Dienstag, 15 November 2011 17:09)

    danke, für die tipps!

  • #51

    Sami Tamer (Mittwoch, 16 November 2011 23:59)

    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

    elbepixel (Samstag, 19 November 2011 21:28)

    Juhu!

  • #53

    Céline Stäuble (Sonntag, 20 November 2011 17:09)

    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

    projekt-gassi-tv (Montag, 21 November 2011 17:31)

    für ne freie Seite ist das Angebot und die Tipps echt klasse

  • #55

    grancanariaallesundmeer (Dienstag, 22 November 2011 11:18)

    echt toll!

  • #56

    yoga-birgit-fruth (Mittwoch, 23 November 2011 16:44)

    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 eigene Geldmaschine (Freitag, 25 November 2011 01:20)

    Die Überschriften sehen mit dem CSS-Code wirklich super aus.

  • #58

    Peter Jünger (Montag, 28 November 2011 11:10)

    Danke für die Tipps.

  • #59

    Dragan (Mittwoch, 30 November 2011 21:46)

    wo bleiben die Audifans ??

  • #60

    adolfflueckiger (Donnerstag, 01 Dezember 2011 07:11)

    Gute Tipps sind immer willkommen.

  • #61

    sicher-reisen (Donnerstag, 01 Dezember 2011 08:50)

    Schöne Tipps, bitte mehr! Schaut doch mal in meine Website, lohnt sich! (Klick oben auf sicher-reisen)

  • #62

    Webseitengestaltung von adEmma (Donnerstag, 01 Dezember 2011 09:29)

    Danke für den Tipp. Werden wir bei neuen Webseitenprojekten einsetzen.

  • #63

    J. F. F. R. (Samstag, 03 Dezember 2011 18:56)

    Wo ein Wille ist, ist auch ein Wegñ.

  • #64

    Sebastian Ehlers (Donnerstag, 15 Dezember 2011 15:20)

    Vielen Dank. die Tipps haben sehr zur Verbesserung unserer Website beigetragen - www.conservationalliance.de

  • #65

    deutschesbuergerbegehren (Freitag, 16 Dezember 2011 17:46)

    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.

  • #66

    deutschesbuergerbegehren (Freitag, 16 Dezember 2011 18:03)

    Keine Umstände! Erneutes versuchen zeigte meine Fehler auf nun ist es hoffentlich lesbarer ?

  • #67

    Florian (Dienstag, 20 Dezember 2011 15:03)

    Cool Danke, werde einige Tipps sicher für zukünftige Projekte berücksichtigen

  • #68

    WEISS-STUDIO | Chris (Donnerstag, 29 Dezember 2011 02:20)

    Hammer geil...finde ich super !

    weiter so JIMDO, ihr seit die BESTEN !

  • #69

    ich-bin-bewusstsein (Sonntag, 19 Februar 2012 11:08)

    Vielen Dank :-)

  • #70

    Fugenmörtel (Mittwoch, 11 Juli 2012 18:10)

    die tipps sind sehr gut, wenn ich mal wieder zeit finde werde ich mir meine schriften noch mal intensiv vornehmen!

  • #71

    News (Mittwoch, 11 Juli 2012 18:11)

    Vielen Dank für die Tipps .

  • #72

    Sami Tamer (Montag, 10 September 2012 04:00)

    gute hinweis

  • #73

    Alfred Eich (Mittwoch, 26 September 2012 15:14)

    Vielen Dank für die Tipps

  • #74

    Margit Voigt (Mittwoch, 26 September 2012 16:31)

    Alles sehr gut verständlich, Jimdo war die richtige Wahl!

  • #75

    Die-Speicherkarten (Donnerstag, 27 September 2012 02:34)

    ok, dann schaut mal bei mir vorbei.

  • #76

    Kredler Jürgen (Donnerstag, 27 September 2012 12:28)

    OK

  • #77

    tortenmanufaktur-am-meer (Donnerstag, 27 September 2012 14:47)

    Danke für die Anregungen. Werde meine Seite überarbeiten...

  • #78

    Phil Schneider (Samstag, 29 September 2012 01:12)

    Vielen Dank für die Tipps.....Color your Life :D

  • #79

    Wasserbasierte Hobbyfarben und Klebstoffe - Reine Farben für Umwelt und Gesundheit (Samstag, 29 September 2012 10:35)

    Erklärung ist einfach und verständlich. Danke hierfür!

  • #80

    Henry Herkommer (Sonntag, 14 Oktober 2012 19:21)

    viel zu kompliziert warum kann ich das nicht einfach im Eingabe Fenster machen (wie bei einem word doc.)??????????????????????????????????

  • #81

    Claudia Finking (Donnerstag, 29 November 2012 18:25)

    Vielen Dank für die guten Tipps!

  • #82

    www.praxisclaudiafinking.de (Donnerstag, 29 November 2012 18:28)

    Gute Tipps! Aber hat jemand auch einen Tipp für mich,was ich machen muss, damit hier bei den Kommentaren mein Bild erscheint??????

  • #83

    Daniela Wiesenborn (Montag, 03 Dezember 2012 10:38)

    Ah super... vielen Dank. Das muss ich mir nochmal genauer durchlesen. Bin mit meiner Farbwahl auch noch nicht so sicher.

  • #84

    Daniela Wiesenborn (Sonntag, 20 Januar 2013 11:39)

    danke

  • #85

    cacostam (Montag, 25 Februar 2013 22:07)

    Dank für alle jimdo.

  • #86

    Rainer (Freitag, 29 März 2013 18:51)

    Graue Schrift auf weissem Hintergrund ist auch keine gute Lösung; wird derzeit leider modern. Ist aber für ältere Augen nicht gut; man blinzelt immer, um die Schlieren wegzubekommen.
    Vor 20 Jahren hätte mich das nicht gestört; aber wie gesagt: man klickt weg.

  • #87

    sophies-perfect-world (Montag, 15 April 2013 18:01)

    Ich habs geschafft :D Danke ;)

  • #88

    Daniel von free-handy24 (Dienstag, 09 Juli 2013 10:33)

    Hallo,
    wirklich nützliche Anleitungen und Hilfestellungen in eurem Blog. Bisher bin ich mit meiner Homepage noch bei 1&1 und nutze dort den HP Baukasten. Da dieser Baukasten etwas in die Jahre gekommen ist und sich leider nicht mehr weiterentwickelt und aus SEO Sicht auch nicht wirklich zu empfehlen ist werde ich nun bald einen Domain Umzug in Angriff nehmen. Bin gespannt ob alles so gut klappt.
    Schöne Grüße aus Norddeutschland

  • #89

    Stefan Fleig (Dienstag, 11 Februar 2014 09:28)

    Die erklärungen per bild finde ich gut, aber um näher am user zu sein,
    macht doch mal Videos von euern verschiedenen einstellungen! Mit verschiedenen themen, und die dann nichtnur zum anschauen auf eurer internetseite sondern auch zum Downloaden!