zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Grafik, Design, Typografie
Seite neu laden Überschriften: Schriftgröße und vertikale Abstände

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.10.2010, 16:25
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.391
AndreasB wird schon bald berühmt werden
Standard Überschriften: Schriftgröße und vertikale Abstände

Hallo,

mich interessieren bewährte Systeme zur Festlegung der Schriftgrößen der Überschriftenebenen 1-5 relativ zur Schriftgröße des Fließtextes.
Weiterhin geht es um die Festlegung der Abstände vor und nach den Überschriften. Und um die Festlegung der Zeilenhöhen.
Alle drei Gestaltungsmöglichkeiten sollen gut zusammenpassen.
Es geht also um Proportionen.
Dabei soll auch die Reihenfolge berücksichtigt werden:
Folgt Fließtext direkt hinter einer Überschrift, oder folgt eine Überschrift.

Da die Webseite skalieren soll, müssen alle Größen in relativen Einheiten angegeben werden.

Über Hinweise auf empfehlenswerte Infos zum Thema freue ich mich. Danke.

Auch von Euch als wohlgelungen angesehene Webseiten helfen mir weiter.
Wichtig ist dabei, wie oben erwähnt, dass es nicht nur zwei, sondern möglichst 5 Überschriftenebenen gibt.
(Ja, das kommt selten vor, aber mir geht es auch um diesen Fall. Meistens genügen 2-4 Ebenen.)
__________________

Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.10.2010, 18:07
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Richard Rutter hat sich in seiner Webtypography des Themas angenommen; Stichwort: Vertikaler Rhythmus.

Add and delete vertical space in measured intervals
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.10.2010, 18:31
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.391
AndreasB wird schon bald berühmt werden
Standard

Danke für Deinen Hinweis.

Richard Rutter schreibt:
Zitat:
As stated earlier, each line on this page is 18 px in height.
Er will offenbar dieses Merkmal der Registerhaltigkeit, welches für Gedrucktes ohne Frage ein vernünftiges Merkmal ist, auch auf Webseiten erhalten.

Das scheint mir nicht sinnvoll.
__________________


Geändert von AndreasB (07.10.2010 um 18:35 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 07.10.2010, 18:54
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Was spricht gegen Registerhaltigkeit bei Websites?
Mit Zitat antworten
  #5 (permalink)  
Alt 07.10.2010, 19:15
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.391
AndreasB wird schon bald berühmt werden
Standard

Zitat:
Zitat von EvT Beitrag anzeigen
Was spricht gegen Registerhaltigkeit bei Websites?
Die Einengung.

Mir geht es jedenfalls zur Zeit um ein Proportionen-System, welches davon unabhängig ist.

Sobald man später mal mit CSS3 Spaltensatz herumspielt kann man immer noch andere Wege gehen.

Zu Schriftgrößen schreibt Rutter, ohne aber auf andere Reihen Bezug zu nehmen oder verschiedenen Reihen zu vergleichen:
Zitat:
p 12
h4 14
h3 18
h2 24
h1 36
Mit Faktoren entspräche das in em:

Code:
 p 1.00em
h4 1.17em (14/12)
h3 1.50em (18/12)
h2 2.00em (24/12)
h1 3.00em (36/12)
Selber schätze ich es, wenn die niederrangigste Überschrift, wenn sie fettes Gewicht hat, etwa 0.94em erhält.
So reduziert man den Grauwert ein wenig. Das wirkt dezenter.
Eine 1em in fettem Gewicht empfinde ich als übertrieben.
__________________


Geändert von AndreasB (08.10.2010 um 17:10 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 07.10.2010, 19:51
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Eine Einengung kann ich hier nicht erkennen, sondern empfinde Registerhaltigkeit als eine Erweiterung meiner gestalterischen Möglichkeiten, auf die ich ungern verzichten würde.

Mark Boulton hat sich an den seiner Meinung nach zu hohen Zeilen der Marginalspalte in Rutters Beispiel gestört und die Technik des Incremental Leading entwickelt, die er für Nebenspalten und Boxouts geeignet empfiehlt, "that aligns to the baseline grid, or vertical rhythm. It’s called incremental leading".

Ein Beispiel seines Ansatzes: Incremental leading
Mit Zitat antworten
  #7 (permalink)  
Alt 07.10.2010, 20:28
Benutzerbild von laborix
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.12.2005
Beiträge: 1.494
laborix ist ein sehr geschätzer Menschlaborix ist ein sehr geschätzer Menschlaborix ist ein sehr geschätzer Mensch
Standard

Zitat:
Zitat von AndreasB Beitrag anzeigen
... Über Hinweise auf empfehlenswerte Infos zum Thema freue ich mich. Danke. ...
Eventuell könnte Yahoo! UI Library: Reset CSS für dich hilfreich sein (siehe etwas weiter unten auf dieser Seite den Abschnitt "See the Code").
YUI 2: Base CSS
__________________
Personal stuff
Mit Zitat antworten
  #8 (permalink)  
Alt 07.10.2010, 20:29
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.391
AndreasB wird schon bald berühmt werden
Standard

@EvT
Danke für die Hinweise zum Thema Marginalspalten. Durchaus interessant.

Aber mein Fokus liegt zur Zeit auf dem engen Thema, welches ich im Ursprungsposting beschrieben habe.

Dazu suche ich Inspiration.
__________________

Mit Zitat antworten
  #9 (permalink)  
Alt 07.10.2010, 20:49
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.391
AndreasB wird schon bald berühmt werden
Standard

Zitat:
Zitat von laborix Beitrag anzeigen
Eventuell könnte Yahoo! UI Library: Reset CSS für dich hilfreich sein (siehe etwas weiter unten auf dieser Seite den Abschnitt "See the Code").
YUI 2: Base CSS
Danke. Aber dort werden nur drei Größen für H1-3 genannt (18,16,14) ohne das zu begründen oder mit anderen Systemen zu vergleichen.
__________________

Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 08.10.2010, 01:12
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Hallo Andreas

eine gute Annäherung für Print und überhaupt sehr lehrreich wäre sicherlich Josef Müller-Brockmanns "Grid systems for graphic design". Hat Bibelstatus unter Gestaltern. Eine sehr kurze historische Darstellung vertikaler Hierarchien ( für print, versteht sich) gibt Mark Boulton:

Five simple steps to better typography ? Part*4 | Mark Boulton

ebenso wie seine Umsetzung fürs web. Letztlich kommst Du auch fürs Web nicht ohne eine Art Raster aus, wie sonst lassen sich auf nachvollziehbare und harmonische Weise Bezüge herstellen. Konsistent wird so ein System aber nur dann sein, wenn Du, verkürzt gesagt, die gleiche Schrift verwendest (soweit klar).
Ein "catch-all" gibt es meines Wissens nicht, aber eine Menge "catch-22".

Die meisten dieser vertikalen Raster zeichnen sich dadurch aus, dass sie iterierend auf den goldenen Schnitt kommen, bzw. diesem nahekommen: 10/16 11 (12)/18, 14/24, siehe auch Modulor und damit verwandt die Fibonaccifolge.
Es ist also kein lineares Proportionensystem. Diese Erkenntnis stellt vermutlich die einzige Konstante dar.

Die Wahl der Zeilenhöhe und Durchschüsse dürfte von der Laufweite der einzelnen Schrift abhängig sein und auch abhängig von deren Höhe, siehe z.B. Khoi Vinh, dem Art Director der New York Times oder von der Dicke (nicht Dickte). Letztlich spielen viele Faktoren eine Rolle, so dass es den bereits erwähnten "catch all" nicht gibt.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
vertikale Abstände im IE6 vs. FF - wo liegt der Fehler? Krischu CSS 2 20.05.2007 11:32
Schriftgröße in verschiedenen Browsern kadees CSS 6 16.11.2006 13:25
WCAG 1.0 Level A Konformität und Schriftgröße? andreas333 Barrierefreiheit 1 15.11.2006 17:04
Abstände zw. kleinen Grafiken weg bekommen? marcee CSS 12 03.06.2006 16:03
Unterschiedliche Abstände Geronimo CSS 15 05.05.2006 23:24


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:49 Uhr.