Antworten auf deine Fragen:
Neues Thema erstellen

Schriftgröße und Art was ist Standard

elo63

Nicht mehr ganz neu hier

Hallo,

meine Frage welche Schriftartbundel sollte man nehmen, und welche größe.

Was entspricht font-size: small in px eigentlich.

Dachte das ganze body in css auf 16px stellen, wie findet Ihr das.

Oder sonst noch tipps zu diesen Thema.

Danke


elo63
 

tester33

Nicht mehr ganz neu hier

AW: Schriftgröße und Art was ist Standard

Hi,
ich kann auch nur wiederholen was leveler und sinus2k gesagt haben. schau dir die Styles von anderen Seiten an.
Grundsätzlich würde ich dir folgende drei Schriften empfehlen:
Arial, Helvetica, sens-serif
dies sind die drei klassischen Schriften.

MfG
Simon
 

Myhar

Hat es drauf

AW: Schriftgröße und Art was ist Standard

Standardmäßig beträgt die Schriftgröße 16px in jedem Browser. Diese kann jedoch durch den Benutzer umgestellt werden, damit er seine für ihn passende Standardschriftgröße hat.
Viele Webseitenprogrammierer stellen aber gerne fixe Schriftgrößen ein (zB 12px) und überschreiben somit die Schriftgröße der User. Ich denke, die meisten Benutzer sind einfach zu unwissend um die Schriftgröße selber anzupassen.
Ich zumindest empfinde 12px als Standardschriftgröße etwas zu klein und würde die 16px bevorzugen (schließlich picke ich ja nicht dauernd knapp vor dem Monitor ;-) ) Leider wollen viele Leute gerne so eine kleine Schriftgröße, dann muss ich sie eben vergrößern :-D
Ich definiere . Dadurch ist der Text skalierbar und passt sich den Eisntellungen des Benutzers an.
Ich definiere trotzdem body {font-size: 62.5% } , dann sind nämlich 1em = 10px. Und 12px = 1.2em etc. in Browsern mit Standardeinstellungen.

Erst Anfang Mai habe ich von rem gelesen, das kann man wohl auch sehr gut verwenden wenn man ältere IE nicht mehr unterstützen muss/will.

L. G.
 

jackprince

xHTML & CSS Junkie

AW: Schriftgröße und Art was ist Standard

Schriftgröße

empfehle ich etwas nach folgendem Muster:
Die Grundschriftgröße der Seite auf "10px".

HTML:
html, body {
 font-size: 10px;
}


Damit hast du eine gute Basis für relative Größenangaben.
Das bedeutet wenn du ein relativ Flexibles Layout baust,
was sich z.B. in Relation zur vom Benutzer gewählten Schriftgröße
verändert, so kannst du beim Umsetzen besser Rechnen.

Sowohl beim layouten der Groben Struktur als auch bei Zeilenhöhen,
Abständen etc.

Bsp.
Du möchtest einen Textabsatz möglichst gut per CSS lesbar machen etc.
Ausgehend von den 10px laut der Angabe oben und angenommen es wird
an keiner Stelle überschrieben.


HTML:
p {
  font-size: 1.2em;
  line-height: 1.4em; 
 /* 120% der Schriftgröße ist meist ein guter Wert für die Zeilenhöhe im Fließtext.
    Das variiert je nach Schriftart. 
*/
}
Für die Absatzbreite muss man auch wiederum probieren, je nach Schriftart. Aber gut Lesbar sind Absätze mit ca. bis zu 90 Zeichen pro Zeile. Absatzlänge variiert.

Schriftart

Auch das variiert wieder je nach Länge des Textabsatzes, Position, Schriftgröße etc.
Grob gesagt gibt es zwei Varianten zwischen denen du dich entscheiden kannst.



  • Schriften mit Serifen (sowie die schriftart für diesen Text)


  • Schriften ohne Serifen (so wie die Schriftart für diesen Text)

Und auch hier variiert es wieder je nach Einsatz
, welche Schrift die bessere Wahl ist.
Serifen-Schriften, liest man zumeist langsamer als serifenlose Schriften.
Möchte man also bewusst das ein Text mit mehr Aufmerksamkeit (da langsamer) gelesen wird, kann man z.B. bewusst eine Schrift mit Serifen einsetzen.


Serifenlose (sans-serif) Schriften hingegen sind auch in kleineren Schnitten oft noch besser lesbar als Schriften mit Serifen.

Auch ist die Zielgruppe der Seite bzw. der Zweck der Seite nicht ohne Belang.

Überschriften mit Serifen wirken natürlich nicht so Modern wie serifenlose Schriften die vielleicht noch schmal geschnitten sind.


Bsp.:

ModernCompany

oder doch

ModernCompany

____________________________

Ich hoffe ich konnte ein paar Ansätze vermitteln. Falls ich was durcheinander
gebracht habe, darf man mich gern korrigieren. Aber dann bitte nicht mit
persönlichen Eindrücken sondern Belegen. ;)

Edith: entschuldige das Schriften durcheinadner, der Editor scheint nicht ganz rund zu laufen. :/
 
Zuletzt bearbeitet:

Myhar

Hat es drauf

AW: Schriftgröße und Art was ist Standard

HTML:
html, body {
 font-size: 10px;
}

Genau das würde ich nicht machen. Dabei wird dem User komplett die Kontrolle entzogen, wie groß die Schriften auf deiner Seite dargestellt werden. Hat ein Benutzer 18px als Standardschriftgröße eingestellt (weil er vielleicht nicht so gut sieht oder einfach nur ein angenehmeres Schriftbild dadurch hat oder ...) dann ignorierst du das komplett und überschreibst es mit den von dir gewählten 10px.

Ich würde hier wirklich die Methode mit
HTML:
html{font-size:62.5%}
bevorzugen. Auch mit der Methode ist 1em=10px so wie bei deiner Methode, jedoch nur in Browsern mit Standardschriftgröße. Hat ein User eine größere/kleinere Schrift eingestellt, so wird der Text in Relation dazu auch vergrößert/verkleinert dargestellt und der Benutzer nicht vollkommen ignoriert.

L. G.
 

jackprince

xHTML & CSS Junkie

AW: Schriftgröße und Art was ist Standard

Kurz gesagt weder falsch noch ganz richtig.

Wie gesagt, die 10px sind für den Body als Grundwert gedacht.

Und der Browser skaliert mit
"[strg] + [+]"
bzw.
"[strg] + [-]" so oder so.

Und mit "[strg] + [0]" wird wieder der Wert laut CSS genommen.
Schalte ich vor meine eigentliche CSS noch eine reset.css (gibts verschiedene Lösungen im Netz) so krieg ich alle Browser auf ein Grundlevel.

Und mit den 10px hab ich wie gesagt einen Wert mit dem ich überlegen/arbeiten kann.

Angenommen ich habe grob folgendes Markup

HTML:
<body>
<div id="head"></div>
<div id="middle">
 <div id="left">
    <!-- Menü und Co. -->
  </div>
 <div id="content">
  <div id="inner_content">
  <h1>Überschrift</h1>
  <h2>Unterüberschrift</h2>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>
 </div>
<br class="breaker" />
</div>
<div id="footer">...</div>
</body>
</html>
und dazu folgendes CSS

HTML:
<style>
html, body {
 font-size: 10px;
 margin: 0;
 padding: 0;
}

#head {
 height: 8em;
 margin: 1.5em 2em 1em 2em;
 padding: 0.8em;
}

#left {
  float: left;
  width: 13em;
  padding: 1em;
}

#content {
 float:left;
 padding: 1.6em;
 width: 50em;
}

#inner_content h1 {
    font-size: 2em;
    }
#inner_content h2 {
    font-size: 1.8em;
    }

#inner_content p{
  padding: 0.5em;
  font-size: 1.6em;    
}
.breaker {
    display: block;
    clear: both;
    }

Wie man sieht, ist es so das Höhen und Breiten nicht fest sondern relativ zur Schriftgröße sind. Was mir erlaubt mein Layout an die Schriftgröße anzupassen
und nicht einfach nur prozentual zum Viewport des Browers.

Ich kann als viel spezifischer Formatieren, dazu biete ich standardmäßig immer noch einen "switcher" an der per Mausklick die Schriftgröße skaliert ... das ist dann für die Leute die zwar einen PC an bekommen aber ihren Browser nicht bedienen können).

Würde man nicht an einer Stelle einen Festwert für die Schrift anlegen, so könnte man gelinde gesagt nie mit relativen Größenangaben für Layout arbeiten. Denn man hat nicht die geringste Ahnung was der Nutzer für eine Schriftgröße eingestellt hat.

Das schränkt mich und damit auch den Nutzer am Ende mehr ein als wenn er, sollte es ihm doch zu klein geschrieben sein, skalieren muss per [strg] + [+/-/mausrad drehen].
 

Myhar

Hat es drauf

AW: Schriftgröße und Art was ist Standard

Du hast meinen Einwand wohl nicht ganz verstanden ;-)
Ich freue mich ja, wenn Leute em verwenden und deine Methode ist um sehr vieles Zugänglicher als mit festen px Werten zu arbeiten. Jedoch habe ich nur kritisiert, dass DU als Programmierer die Schriftgröße vorgibst (mit 10px) und nicht die Schriftgröße her nimmst, die ICH als Benutzer ausgewählt habe.
Wie gesagt, wenn man für html{font-size 62.5%} definierst, dann hast du in einem Browser mit Standardeinstellungen auch deine 1em = 10px und kannst mit width=50em auf eine Breite von 500px kommen oder mit font-size: 1.2em hast du auch 12px. Jedoch ist der Unterschied zu deiner Variante folgender:
Angenommer, der Benutzer hat eine doppelt so große Schriftgröße als die Standardschriftgröße eingestellt, dann bekommt er die Webseite auch von Haus aus mit doppelt so großer Schrift dargestellt, was doch Benutzerfreundlicher ist als wenn er extra die Schrift vergrößern muss.
Außer der Basisschriftgröße muss kein Wert in % angegeben werden sondern es kann (und soll) dann trotzdem in em gearbeitet werden (So wie du es ja auch machst, jackprince)

Ad Vergrößern: Strg + [+] vergrößert nicht den Text sondern zoomt die Webseite (in jedem neuen Browser) Wenn man Firefox hat kann man über "Ansicht -> Zoom -> Nur Text zoomen" einstellen, dass wirklich nur der Text skaliert wird. Drückt man danach Strg + Mausrad, dann wird wirklich nur der Text skaliert.
Im IE kann man über Seite -> Textgröße die Standardschriftgröße definieren. Hast du deine Schriftgröße für den body standardmäßig auf 10px gestellt, dann wird diese im IE immer* genommen, egal was bei Schriftgröße eingestellt ist. (*Ja, das Verhalten kann man auch ausschalten, jedoch weiß das fast keiner ;-) )

Ich hoffe, mein Kritikpunkt wurde nun richtig verstanden.

L. G.
 

jackprince

xHTML & CSS Junkie

AW: Schriftgröße und Art was ist Standard

Hab ich auch vorher schon verstanden, aber das ist vielleicht einfach eine Ansicht von mir das ich im web zwar Benutzerfreundlich bin und dem User das Leben leicht machen mag, mir aber schon noch ein paar Sachen aussuchen mag bzw. in meiner Hand behalte.
 

Myhar

Hat es drauf

AW: Schriftgröße und Art was ist Standard

Es tut mir leid, dann verstehe ich nicht, warum du das Bsp. gebracht hast. Das hatte dann doch nichts damit zu tun?

Das ist doch nicht benutzerfreundlich wenn man dem User die Entscheidungsfreiheit nimmt wie die Webseite dargestellt werden soll?
Meine Methode setzt die Schriftgröße ja auch auf 10px zurück und man kann dann 1:1 so wie bei deiner Methode weiterarbeiten.
Was an deiner Methode besser sein soll, habe ich jedoch noch nicht verstanden.
Ich verstehe nun mal einfach nicht, warum sehr viele Webdeveloper kaum/wenig Rücksicht auf die User nehmen, wo sie doch die Webseite benützen sollen.

Vielleicht kann man mir doch noch erklären, warum es Sinn hat, die Einstellungen des Benutzers zu ignorieren und seine eigenen Wünsche dem User auf zu zwingen.

Edit:
Du (jackprince) sagst: "[...]Sachen aussuchen mag bzw. in meiner Hand behalte".
Das ist doch das selbe wie ich es mache. Unsere Arbeitsweisen unterscheiden sich wohl nur in einem Detail voneinander: du definierst 10px und ich 62.5%. Den Rest würde ich genauso definieren wie du in deiner CSS Datei. Deshalb weiß ich nicht, wo bei deiner Vorgehensweise der Vorteil liegt.

L. G.
 
Zuletzt bearbeitet:

jackprince

xHTML & CSS Junkie

AW: Schriftgröße und Art was ist Standard

Bei meiner Methode hab ich erstmal 10px als Ausgangswert. Das ist ein verlässlicher Wert.
Geh ich da schon prozentual ran, kann es sein das ich eben keine 10px bekomme.

Anders gesagt der Nutzer kriegt bei mir da möglichkeit die Schrift größer zu machen wo es
Sinn macht, aber eben nicht den Grundwert.

Das mag an der Stelle nicht ganz benutzerfreundlichs ein, aber immer noch besser als ein Zeitung. da ändert sich garnichts ;)
 

Myhar

Hat es drauf

AW: Schriftgröße und Art was ist Standard

Aber wenn jemand keine 10px als Grundwert hat, dann sieht er die Seite eben etwas größer/kleiner in Relation zu dem, was du entworfen hast. Das ist ja nicht so schlimm.
Den Vergleich mit der Zeitung würde ich so sehen, dass man bei deiner Seite immer eine Lupe zum Betrachten braucht (schließlich ändert sich bei dir ja auch nichts)
Browser merken sich doch ein Zoom-Level was heißt, sofern der Benutzer deine Seite mehrmals besuchen soll muss er den Zoom jedesmal aufs neue einstellen.

Aber ich merke schon, dass du stur bist bei dem Thema und ich deine Argumente ehrlich gesagt beim besten Willen nicht nachvollziehen kann. Das ganze führt also wohl zu nichts aber vielleicht können andere User von der Diskussion was mitnehmen :)

L. G.
 

jackprince

xHTML & CSS Junkie

AW: Schriftgröße und Art was ist Standard

Man muss ja auch nicht bei jedem Thema 100% übereinstimmen.
Ich denke wir sind uns einig das schon eine größtmögliche Freiheit für den Nutzer
gegeben sein sollte.

Ich beschränke diese Freiheit eben an einer Stelle die ich vertreten kann.

Zum thema selbst, denke Ich das alle wichtigen Punkte erwähnt wurden und die Frage an sich beantwortet wurde.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.635
Beiträge
1.538.477
Mitglieder
67.559
Neuestes Mitglied
hanuta
Oben