Schriftgrösse global ändern – der Responsive-Trick für Faule

9. Februar 2021 | CSS-Stylesheet

Die Grösse der Schriftarten Ihrer Website sind vielleicht untereinander stimmig; Ihnen scheint aber alles ein wenig zu klein – oder zu gross. Nun graust Ihnen, jede einzelne Schriftarteinstellung zu suchen und anzupassen? Ist oft auch gar nicht nötig. Das geht mit einem Mini-Code im CSS global. Und was der Font-Trick für Responsive Designer bedeuten kann, sagen wir auch gleich.

Die Codezeile könnte kürzer fast nicht sein. Sie fügen Sie in das CSS-Stylesheet Ihrer Website ein unter Design/Customizer/Zusätzliches CSS:

body { font-size:80% !important; }

Der Code oben setzt alle gewohnten Schriftgrössen  (z.B. Body, Sidebar und Footer) auf der gesamten Website auf 80 % des ursprünglichen Werts. Ob das eine sinnvolle und lesbare Verkleinerung ist, müssen Sie individuell entscheiden; der Font-Stil ist hier ein entscheidender Faktor.

Ich habe aber einen Hintergedanken und setze diesen unter den Titel:

Responsive Fonts für Codefaule

Weil: Eigentlich sind meine Fontgrössen untereinander ganz OK abgestimmt; sie sind aber für die kleinen Anzeigen der Mobilgeräte zu gross. Darum verwende ich als Anwendungsbeispiel einen ergänzten, umfangreicheren Codeschnipsel im CSS-Stylesheet. Enthalten sind Bedingungen, welche sich an der Anzeigebreite orientieren, sowie der oben vorgestellte CSS-Hack in jeweils angepasster Form:

/* Grosse Bildschirme über 1405px */
@media only screen and ( min-width: 1406px ) { 
    body { font-size:110% !important; }
}
/* Laptops & Desktops 1101-1405px */
@media only screen and ( min-width: 1101px ) and ( max-width: 1405px) { 
    body { font-size:100% !important; }
}
/* Tablets in Landscape-Modus 981-1100px */
@media only screen and ( min-width: 981px ) and ( max-width: 1100px ) { 
    body { font-size:90% !important; }
}
/* Tablets in Portrait-Modus 768-980px */
@media only screen and ( min-width: 768px ) and ( max-width: 980px ) {
    body { font-size:80% !important; }
}
/* Smartphones in Landscape-Modus 480-767px */
@media only screen and ( min-width: 480px ) and ( max-width: 767px ) {
    body { font-size:70% !important; }
}
/* Smartphones im Portrait-Modus bis 479px */
@media only screen and ( max-width: 479px ) {
    body { font-size:60% !important; }
}

Der Wermutstropfen

Einen Haken hat die Sache: Wenn Sie im Stylesheet bereits kräftig mit dem CSS-Zusatz

!important

arbeiten, kapituliert der hier beschriebene CSS-Code kläglich. Der !important-Code lässt sich von einem weiteren !important nicht zuverlässig übersteuern. Und !more important kennt CSS leider (noch) nicht.

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.









Vielen Dank.

Pin It on Pinterest

Share This