font-weight in Browsern

[nordi]

Hallo liebe Community,

ich habe mal eine Frage zum font-weight. Ich arbeite mit der Schriftart Helvetica. Mir wurde ein Design vorgegeben, wo mit der Schriftart Helvetica Neue gearbeitet wurde. Einmal mit Helvetica neue Light und einmal mit der normalen. Ich habe ihr angeboten, da man Helvetica Neue aus Lizenzgründen nicht nehmen kann, mit Helvetica zu arbeiten, da dies eine Systemschriftart ist (meines Wissens nach). Nun wollte ich den "Light" und "Normal" Satz mit font-weight imitieren, doch jeder Browser interpretiert die Werte irgendwie anders. Font-weight "bold" ist definitiv zu dick, daher würde ich gerne eine etwas schlankere Variante von bold verwenden.

Die beste Variante, die ich bis jetzt gefunden habe, ist diese hier:

p {
	font-size: 10pt;
	line-height:20px;
	font-weight:lighter;
	
}

.headline {
	font-weight:bolder;
	margin-top:5px;
}

Habt ihr eine Idee, wie man die Schriftart wirklich nur einen "Ticken" fetter bekommt als das "normale" Schriftgewicht? Wäre sehr dankbar!

 

[chmee]

(A) Helvetica ist womöglich unter Mac ein nutzbarer Systemfont, unter Win wird dafür Arial benutzt, ein Nachbau. Deswegen generische Familien - http://web.mit.edu/jmorzins/www/fonts.html#sans-serif

(B) Sollen es wirklich bekannte Fonts fürs Web sein, dann muß man mit irgendwas rechnen, entweder ein Banner oder Kosten - siehe http://webfonts.fonts.com/en-US/Project/ChooseFonts?ViewDetails=T&ViewFontID=710294

(C) bold ist dünner als bolder. Ausprobieren.

font-weight:bold;

http://jsfiddle.net/q5N2u/1/

mfg chmee

 

[nordi]

Hi Chmee,

danke schonmal für die Antwort. Ich hab deinen Code ein wenig angepasst, damit du siehst, wie es bei mir ausschaut:

<div class="ansicht">arial normal</div>
<div class="ansicht dick">arial in dick</div>
<div class="ansicht dicker">arial in dicker</div>
<div class="ansicht">
<p>Test <p class="dicker">Test</p></p>
</div>

.ansicht{
    font-family:Helvetica,sans-serif;
    font-size:10pt;
    border:1px solid #eee;
    margin:20px;
    padding:20px;
}
p{ font-weight:lighter;}
.dicker{ font-weight:bolder;}
?
?

Du siehst, dass hier das Schriftgewicht nur ein wenig dicker wird durch bolder. Wenn du die Klasse .dicker auf "bold" setzt, wird bold dicker dargestellt als bolder..

 

[chmee]

Was/wie im Browser dargestellt wird, ist mir leider nicht soo bekannt. In Deinem Fall lohnt es sich vielleicht, entweder auf absolute Dicken zuzugreifen (300,400,700 etc) (soweit sie vorhanden sind! Da schätze ich den Fehler ein..) oder die Webfonts in ihren Schnitten zu benutzen.

http://jsfiddle.net/q5N2u/6/

mfg chmee

 

[wollmaus]

(C) bold ist dünner als bolder. Ausprobieren.

font-weight:bold;

http://jsfiddle.net/q5N2u/1/

mfg chmee

bold ist nicht dünner als bolder, oder besser gesagt: bolder ist nicht gezwungenermasse dicker als etwas anderes, mit einer Ausnahme: Es ist(sofern vom Browser darstellbar) dicker als die vom Elternelement geerbte Dicke:

The 'bolder' and 'lighter' values select font weights that are relative to the weight inherited from the parent

http://jsfiddle.net/FrcBB/

Soweit zur Theorie, in der Praxis ist dies von vielen Faktoren abhängig, z.B. erbt ein Blockelement keine font-weight seines Elternelements, es erbt sie höchstens vom body.

 

[threadi]

bold und bolder könnten auch gleich Dick sein. Das hängt wie schon gesagt auch von anderen Faktoren wie z.B. der Schriftart selbst und der Schriftgröße ab. Der IE mit seinem ClearType haut dann nochmal eine Portion Ungewissheit drauf :|

 

[chmee]

Danke threadi.

@wollmaus
Genau, soweit die Theorie. Elternelement(e) ohne font-weight-Beschreibung führt dazu, dass das Element an sich mit 100% (oder standardwert) betrachtet wird. Mein Beispiel oben "sollte eigentlich" funktionieren. Und die Vererbung/Vermischung von Eigenschaften auf Kindelemente ist selbstredend, wenn relative Werte benutzt werden. Ich schrieb, wie es auch threadi nochmal angesprochen hat, dass es eher mit dem Font an sich zu tun haben müsste.

(A) Wir wissen doch, dass zB Windows zur Normalschrift (weight:300) noch eine dicke Schrift simulieren kann, der Dick-Knopf in Texteditoren - im Browser möglicherweise alles größer font-weight:400?

(B) Alle anderen Zwischendicken (zB bold bzw font-weight:400) kann Windows nicht selbst generieren, (bzw zeigt sie entweder als native oder die eine umgerechnete Dicke an) und müssten somit als Schrift-Schnitt vorliegen. So kommt es zu der problematischen Einschätzung, wie font-weight funktionieren sollte, es aber nicht tut.

(C) Typografisch betrachtet ist die techn. Simulation/Generierung einer weiteren Dicke eh zu 99% Mist. Eine "dicke" Helvetica Bold sieht nunmal anders aus als eine Helvetica Black.
http://www.linotype.com/de/526/helvetica-schriftfamilie.html

mfg chmee