Was ist die beste Schriftgröße für eine Webseite? Und wie man Schriftgrößen mit CSS ändert

Ich werde versuchen, diesen Leitfaden für jeden, der eine Webseite unterhält, nutzbar zu machen, unabhängig davon, ob die Website mit einem visuellen Webeditor (d. h. einem WYSIWYG-Web-Editor) oder direkt in HTML und CSS erstellt wurde. Er sollte auch dann anwendbar sein, wenn Sie einen Blog erstellt haben und den einen oder anderen Absatz oder Text in einer größeren oder kleineren Schriftart unterbringen möchten.
Wenn Sie einen visuellen Web-Editor verwenden, habe ich für viele von ihnen spezielle Anleitungen, wie man HTML Schriftgrößen ändert (neben anderen Dingen). Diese Anleitungen sind einfacher zu befolgen, da sie die grafische Benutzeroberfläche des Web-Editors verwenden, um dies zu erreichen. Anleitungen für Expression Web, BlueGriffon, Dreamweaver und KompoZer finden Sie, wenn Sie den in diesem Satz angegebenen Links folgen. Sie führen direkt zu den Kapiteln zum Ändern von Schriftarten. Wenn Sie andere WYSIWYG-Web-Editoren verwenden, finden Sie das entsprechende Tutorial möglicherweise in meinem Hauptindex für Tutorials zu Web-Editoren.
Die CSS-Regel in aller Kürze
Die CSS-Regel, die einen Webbrowser dazu veranlasst, eine andere Schriftgröße zu verwenden, heißt “font-size”. Die Regel nimmt eine Messung in Prozent (“%”), “em”, Pixeln (“px”), Punkten (“pt”) und anderen (wohl weniger relevanten) Werten an.
Im Wesentlichen wird die Regel folgendermaßen formuliert.
Schriftgröße: 110% ;
Damit wird die Schrift um 10 % größer als die bisherige Größe (100 %). Wenn Sie die Größe auf (sagen wir) 80 % setzen, erscheint sie 20 % kleiner als bisher.
CSS ist zwar nicht pingelig, was die verwendeten Maßeinheiten angeht, aber Sie sollten sich daran halten, für Text auf einer Webseite entweder das Prozent (“%”) oder das “em” zu verwenden. Obwohl Sie wahrscheinlich mit Einheiten wie “pt” aus der Verwendung von Textverarbeitungsprogrammen wie Microsoft Word vertraut sind, sind solche Einheiten eigentlich für die gedruckte Seite gedacht. Für Webseiten, die auf vielen verschiedenen Bildschirmgrößen (einschließlich Mobiltelefonen) angezeigt werden können, sind “%” und “em” am besten geeignet. Übrigens: Wenn Sie nicht wissen, was “em” ist, verwenden Sie einfach “%”, wie im obigen Beispiel.

So ändern Sie die Schriftgröße einzelner Sätze oder Wörter auf einer Webseite
If you only want to change the size of the words in a particular paragraph, the quick and dirty way is to set font-size directly in the HTML tag for the paragraph in question.

Use the above code in place of the “

” tag that you find just before the words in your paragraph.
If you only want to change a word or phrase in your paragraph, put the rule in a . For example, let’s say that you have the following paragraph in HTML.

You can increase or decrease the size of individual words or phrases in a single paragraph with CSS.

If you want the word “increase” to be 20% larger than the default size, and the word “decrease” to be 20% smaller, modify the above so that it becomes like this:

You can increase or decrease the size of individual words or phrases in a single paragraph with CSS.

So ändern Sie die Schriftgröße einer ganzen Webseite
If you want to change the font size for the whole page, you will need to have access to your page’s style sheet. This is probably easily done for people who have created a website using a web editor (whether a visual one or just a plain text editor).
For example, thesitewizard.com’s stylesheet includes the following lines, which specifies the font and its size. Die Auswirkungen dieser Regeln sind in diesem Artikel selbst zu sehen, einschließlich dieses Absatzes, den Sie gerade lesen.
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em ;
}
Sie wirkt sich auf alles auf der Webseite aus, da die Regel auf den body-Selektor gesetzt wird, der der allumfassende Container ist, in dem der gesamte Text, die Bilder und was auch immer auf einer Webseite platziert wird.
(Technisch gesehen ist es nicht notwendig, eine Schriftgröße von 100% oder 1em festzulegen, da dies die Standardeinstellung ist. Ich habe die obige Regel eingefügt, weil sie einmal, im Rahmen eines Experiments, 1,1em lautete. Ich habe sie auf 1em zurückgesetzt, als ich feststellte, dass sie nicht wirklich notwendig war. Es kann aber sein, dass ich sie in Zukunft wieder auf 1,1em ändere).
Wer sich ein wenig mit CSS auskennt, kann die Schriftgröße auch für eine Klasse oder ID festlegen, so dass alles, was zu dieser Klasse gehört oder diese ID hat, mit der angegebenen Schriftgröße angezeigt wird.
Mit dem folgenden CSS wird zum Beispiel die Schrift für jedes Element mit der Klasse vitalstoff doppelt so groß wie der Text drum herum.
.vitalstuff {
font-size: 200% ;
}
Wird es z. B. für einen Absatz wie den folgenden verwendet, wird der gesamte darin enthaltene Text doppelt so groß sein.

Alles in diesem Absatz wird doppelt so groß sein wie der Rest der Seite.

Wenn Sie eine Blog-Software verwenden, müssen solche weitreichenden Änderungen an der gesamten Website entweder über die Benutzeroberfläche der Blog-Software oder über die Themen Dateien vorgenommen werden. Da die Methode hierfür von Programm zu Programm unterschiedlich ist, kann ich Ihnen keine allgemeine Methode nennen, die mit jeder Software funktioniert. Aber wie ich bereits erwähnt habe, wenn Sie nur einen oder zwei Absätze oder hier und da einen Satz ändern wollen, können Sie das mit der oben beschriebenen (fast) universellen Methode tun.

Was ist die ideale Schriftgröße für eine Webseite?

Im Allgemeinen (und ich weiß, dass dies abgedroschen klingt, aber seien Sie nachsichtig mit mir) ist die beste Schriftgröße für eine Webseite diejenige, bei der Ihr Text für alle Ihre Besucher gut lesbar ist. Das Problem mit dieser Aussage ist jedoch, dass die Sehkraft von Person zu Person unterschiedlich ist, je nach Alter, Genen, Umgebung und Situation. Was für einen jungen Menschen mit guter Sehkraft akzeptabel ist, ist es für eine Person in den Vierzigern (oder älter), deren Sehkraft sich im Zuge des Alterungsprozesses verschlechtert, vielleicht nicht.
Webbrowser ermöglichen es den Benutzern, die Schriftarten und -größen auszuwählen, die sie standardmäßig verwenden, wenn die Webmaster dies in ihrem Design nicht außer Kraft setzen. Daher sollten Sie, wenn möglich, die Wahl Ihrer Besucher respektieren, indem Sie die Schrift nicht unter 100% oder 1em verkleinern. Bei 100 % oder 1em wird Ihr Text in der Größe angezeigt, die Ihre Besucher gewählt haben, weil sie andere Größen zu klein finden. Wenn Sie die Schrift zu stark verkleinern, können sie Ihren Inhalt nicht mehr lesen.
Allerdings weiß nicht jeder, wie er die Standardschriftarten seines Browsers vergrößern kann. Und selbst diejenigen, die wissen, wie man es macht, machen sich manchmal nicht die Mühe. In der Praxis ist mein obiger Absatz also auch nicht ganz korrekt. Das heißt, selbst bei 100 % werden einige Ihrer Benutzer Schwierigkeiten haben, den Text zu lesen. Aber das liegt wahrscheinlich außerhalb der Kontrolle eines Webmasters. Sie können ja nicht jedem Besucher eine seitenlange Anleitung geben, wie er die Standardschriftgröße in seinem Browser einstellen kann. Das würde nicht nur Ihre Website unübersichtlich machen, sondern könnte auch als herablassend empfunden werden.
Natürlich können Sie die Schrift größer als 100% oder 1em machen, wenn Sie wollen. Das sollte für die Lesbarkeit kein Problem darstellen. Wenn Ihre Website einen hohen Anteil älterer Menschen hat, kann es sogar eine gute Idee sein, standardmäßig eine etwas größere Schrift zu verwenden, da diese Menschen alle schlechter sehen können (das ist einfach eine Tatsache).
Wie Sie wahrscheinlich schon vermutet haben, gibt es keine pauschale Antwort, die für alle gilt. Was ich jedoch sagen kann, ist, dass Sie versuchen sollten, Ihre Seite so zu gestalten, dass sie unabhängig von der HTML Schriftgröße, die Ihre Besucher in ihren Browsern verwenden, akzeptabel funktioniert. Ich weiß, dass manche Leute jeden Aspekt des Erscheinungsbildes ihrer Website kontrollieren wollen. Das sind wahrscheinlich die Leute, die “pt” oder “px” als Maßeinheit für ihre Schriftarten verwenden wollen, weil das die Schriftarten auf diese Größen fixiert.
Aber so funktioniert eine Website nicht. Webseiten funktionieren in allen möglichen Umgebungen, die sich der Kontrolle eines Webmasters entziehen: große Monitore, kleine Bildschirme, Mobiltelefone mit einer großen Bandbreite an Fenstergrößen und so weiter. Selbst auf einem großen Bildschirm (oder vielleicht sogar besonders auf einem) öffnet Ihr Besucher seinen Browser möglicherweise nicht einmal bis zur maximalen Breite des Bildschirms.
Ein guter Webdesigner ist sich dessen bewusst und versucht nicht, die Dinge künstlich einzuschränken, sondern sorgt dafür, dass sein Design in jeder Situation, in der es erscheint, funktioniert. Und es ist wirklich kontraproduktiv zu versuchen, Ihre Besucher daran zu hindern, die Schriftarten zu vergrößern, nur damit Sie Ihr schönes Layout bewahren können. In Wirklichkeit lehnen sich die Leute lieber zurück und lesen, was auf Ihrer Website steht. Der einzige Grund, warum sie sich überhaupt die Mühe machen, die Schriftgröße zu ändern, ist, dass sie nicht sehen können, was dort steht. Wenn Sie versuchen, ihnen das zu erschweren, weil Sie Ihr Design so sehr lieben, werden sie die Seite verlassen, weil sie nicht lesen können, was Sie zu sagen versuchen.