22.06.2024 12:23
In Rollenspielen steht das Lesen und Schreiben von Texten - zumeist in Romanform - im Fokus. Das bedeutet auch, dass diese Texte möglichst lesbar sein sollten. Dazu gehört allem voran die Schriftgröße, aber auch die Textausrichtung kann dem Auge schmeicheln.
Hier kommt es nicht auf die Größe per se an, sondern auf die Einheit, die man im CSS angibt. Geben wir die Schriftgröße in Pixeln (px) an, ist sie fest und für jeden gleich. Wollen wir das? Nur bedingt.
Idealerweise ermöglicht man, dass Leute über ihre Browsereinstellungen die Schriftgröße nach Belieben anpassen können und das geht nicht mit Pixeln. Dafür haben wir die Einheit rem - "root-em". Hier wird die Schriftgröße relativ zum root-Element gesetzt.
Browserstandard ist 16px. D.h. 1rem entspricht 16px, wenn wir nichts an unseren Einstellungen geändert haben. Mögen wir es kleiner, können wir das also individuell in unseren Browsereinstellungen anpassen, genauso wie andere sich die Schriftgröße anpassen können.
1.5rem sind dann 20px, denn wir nehmen hier die 16px mal 1,5. 2rem sind demnach also 32px usw.
Haben wir besonders große Schrift, die einen bestimmten Platz ausfüllen soll, können wir ruhig bei der Einheit px bleiben. Auch bei anderen Textelementen, die nicht wirklich gelesen werden sollen und nur gestalterische Elemente sind, kann man bei absoluten Angaben bleiben.
Da es in unserem Hobby nach wie vor etabliert ist, nicht allzu große Schriften zu wählen, kann ich durchaus verstehen, statt der 1rem vielleicht nur 0.9rem anzugeben. Ich würde allerdings empfehlen, dafür media-queries einzusetzen und die Schrift bei Auflösungen von über 1920px Breite auf 1rem zu setzen.
Firefox: Allgemein > Sprache und Erscheinung > Schriftarten & Farben > wahlweise rechts auf Erweitert > rechts unter Mindestschriftgröße
Chrome: Darstellung > Schriftgröße oder wahlweise Darstellung > Schriftart anpassen > Mindestgröße
Das Gute an dieser Einstellung ist, dass man so nur die Schriftgröße anpasst. Man muss also nicht in die Seite zoomen und dabei auch alle anderen Elemente vergrößern, sondern verändert wirklich nur die Schriftgröße.
Beliebt ist die Verwendung von Blocksatz, was ich auch persönlich sehr gerne mag und sowohl ästhetisch ansprechender finde, als auch beim Lesen angenehmer, weil es nicht so unruhig wirkt.
Ein Nachteil beim Blocksatz ist, dass zwischen den Wörtern größere Abstände entstehen können. Das sieht manchmal nicht nur doof aus, es wirkt auch irgendwie unordentlich. Das lässt sich aber auch mit CSS beheben, denn die meisten gängigen Browser können Worte einem Algorithmus entsprechend korrekt umbrechen, um gleichmäßige Abstände zu behalten.
Auch wenn manche Browser die Sprache korrekt erkennen mögen, würde ich vorsichtshalber immer die Sprache beim html-Element setzen:
Ich würde die Silbentrennung übrigens nicht überall einsetzen, denn gerade bei gestalterischen Elementen kann es sein, dass das doof aussieht. Entsprechend würde ich also die Elemente, in denen die Posts und Infotexte sind, mit der Silbentrennung versehen und es nicht beim body-Element tun.
Schriftgröße
Hier kommt es nicht auf die Größe per se an, sondern auf die Einheit, die man im CSS angibt. Geben wir die Schriftgröße in Pixeln (px) an, ist sie fest und für jeden gleich. Wollen wir das? Nur bedingt.
Idealerweise ermöglicht man, dass Leute über ihre Browsereinstellungen die Schriftgröße nach Belieben anpassen können und das geht nicht mit Pixeln. Dafür haben wir die Einheit rem - "root-em". Hier wird die Schriftgröße relativ zum root-Element gesetzt.
Browserstandard ist 16px. D.h. 1rem entspricht 16px, wenn wir nichts an unseren Einstellungen geändert haben. Mögen wir es kleiner, können wir das also individuell in unseren Browsereinstellungen anpassen, genauso wie andere sich die Schriftgröße anpassen können.
Code:
font-size: 1rem;1.5rem sind dann 20px, denn wir nehmen hier die 16px mal 1,5. 2rem sind demnach also 32px usw.
Haben wir besonders große Schrift, die einen bestimmten Platz ausfüllen soll, können wir ruhig bei der Einheit px bleiben. Auch bei anderen Textelementen, die nicht wirklich gelesen werden sollen und nur gestalterische Elemente sind, kann man bei absoluten Angaben bleiben.
Da es in unserem Hobby nach wie vor etabliert ist, nicht allzu große Schriften zu wählen, kann ich durchaus verstehen, statt der 1rem vielleicht nur 0.9rem anzugeben. Ich würde allerdings empfehlen, dafür media-queries einzusetzen und die Schrift bei Auflösungen von über 1920px Breite auf 1rem zu setzen.
Code:
@media (min-width: 1930px) {
body {
font-size: 1rem;
}
}Browsereinstellungen
Firefox: Allgemein > Sprache und Erscheinung > Schriftarten & Farben > wahlweise rechts auf Erweitert > rechts unter Mindestschriftgröße
Chrome: Darstellung > Schriftgröße oder wahlweise Darstellung > Schriftart anpassen > Mindestgröße
Das Gute an dieser Einstellung ist, dass man so nur die Schriftgröße anpasst. Man muss also nicht in die Seite zoomen und dabei auch alle anderen Elemente vergrößern, sondern verändert wirklich nur die Schriftgröße.
Textausrichtung
Beliebt ist die Verwendung von Blocksatz, was ich auch persönlich sehr gerne mag und sowohl ästhetisch ansprechender finde, als auch beim Lesen angenehmer, weil es nicht so unruhig wirkt.
Code:
text-align: justify;Silbentrennung
Ein Nachteil beim Blocksatz ist, dass zwischen den Wörtern größere Abstände entstehen können. Das sieht manchmal nicht nur doof aus, es wirkt auch irgendwie unordentlich. Das lässt sich aber auch mit CSS beheben, denn die meisten gängigen Browser können Worte einem Algorithmus entsprechend korrekt umbrechen, um gleichmäßige Abstände zu behalten.
Code:
hyphens: auto;
-webkit-hyphens: auto;Auch wenn manche Browser die Sprache korrekt erkennen mögen, würde ich vorsichtshalber immer die Sprache beim html-Element setzen:
Code:
<html lang="de">Ich würde die Silbentrennung übrigens nicht überall einsetzen, denn gerade bei gestalterischen Elementen kann es sein, dass das doof aussieht. Entsprechend würde ich also die Elemente, in denen die Posts und Infotexte sind, mit der Silbentrennung versehen und es nicht beim body-Element tun.