Schriftgrößen in Chrome/Firefox mobil/Desktop

[unixasket]

Hallo,

ich versuche auf einer Seite die Schriftgrößen jeweils passend für Desktop und Mobil hinzubekommen, so dass der Text normal lesbar ist. Problem: Chrome und Firefox interpretieren das jeweils völlig unterschiedlich. Definiere ich gar keine Schriftgrößen oder definiere ich für <p> (und ähnliche Elemente) einfach 1em, dann funktioniert dies sowohl im Firefox für Android, als auch im Firefox Desktop relativ gut. In Chrome (bzw. Brave, aber das ist ja die gleiche Rendering Engine) hingegen nur auf dem Desktop. Unter Brave für Android wird die Schrift so klein, dass sie fast nicht mehr zu lesen ist.

Ich möchte gar nicht die Schriftgröße pixelgenau überall festlegen, aber ich möchte es eben so haben, dass die Größe für die meisten Nutzer auf jeweils Ihrem Gerät akzeptabel ist. Wie bekommt man das hin?

Beispiel kann ich leider nicht zeigen, da die Seite nicht öffentlich ist.

[Gunnar Bittersmann]

@@unixasket

[…] Desktop relativ gut. In Chrome (bzw. Brave, aber das ist ja die gleiche Rendering Engine) hingegen nur auf dem Desktop. Unter Brave für Android wird die Schrift so klein, dass sie fast nicht mehr zu lesen ist.

Das hört sich so an, als ginge der Browser davon aus, dass die Webseite 960px breit wäre und er sie so verkleinert, dass sie in den Viewport auf dem Smartphone passt.

Du hast die für responsives Design nötige Angabe nicht gemacht?

🖖 Live long and prospert

[unixasket]

Du hast die für responsives Design nötige Angabe nicht gemacht?

Doch, die viewport Angabe habe ich gemacht. Sonst wäre die Schrift auch noch kleiner.

[MrMurphy]

Eine sinnvolle Schriftgröße ist unabhängig von der Fenstergröße.

Zur "optimalen" Schriftgröße gibt es seit Jahrzehnten immer wieder Untersuchungen und Umfragen von Usern, also den Besuchern.

Demnach reicht eine Schriftgröße für alle visuellen Endgeräte und die sollte etwas größer sein als die von den meisten Browsern vorgegebene Schriftgröße.

Wenn man sich auskennt eventuell noch bestimmte Schriftarten. Dunkle Schrift auf hellem Hintergrund. Für die Änderung der Schriftgröße durch die Besucher sollte keine Barriere erstellt aufgebaut werden. Dann noch etwas mehr Zwischenraum und gut ist.

Die meisten anderen Vorschriften (äh, Tips) kannst du schlicht vergessen.

[Der Martin]

Hallo,

Demnach reicht eine Schriftgröße für alle visuellen Endgeräte und die sollte etwas größer sein als die von den meisten Browsern vorgegebene Schriftgröße.

d'accord - die in den meisten Browsern und Desktop-GUIs voreingestellte Schrift ist mir in der Regel auch zu klein. Aber deswegen justiere ich sie in den Grundeinstellungen des Systems oder Browsers etwas größer. Und dann gibt's keine Notwendigkeit mehr, dass der Webautor das auch noch tut.

Wenn man sich auskennt eventuell noch bestimmte Schriftarten. Dunkle Schrift auf hellem Hintergrund.

Genau das habe ich in den letzten Monaten für mich als kontraproduktiv herausgefunden. Nachdem die Diskussionen über "Dark Mode" immer mehr um sich griffen, hab ich auf meinem Geschäfts-Notebook als Experiment mal Windows komplett auf Dark Mode umgeschaltet.

Und ich war überrascht: Wow, da kann man ja die Schriften, Symbole und Konturen auf einmal viel besser erkennen! Und weniger ermüdend für die Augen ist es außerdem noch!

Es sollte aber klar sein, dass das ganz individuelle Eindrücke sind, und man sollte bitte auf keinen Fall eine bestimmte Ansicht, die man selbst gut findet, seinen Webseiten-Besuchern aufs Auge drücken (no pun intended).

Lasst ihnen die Freiheit, Schriften zu skalieren, zwischen Light und Dark Mode zu wechseln oder sogar per User-Stylesheet ganz individuelle Gestaltungsregeln anzuwenden. Das Web ist ein extrem inhomogenes Medium. Milliarden von Nutzern mit Tausenden von verschiedenen Endgeräten können nicht alle die gleichen Präferenzen haben.

Einen schönen Tag noch
 Martin

[Felix Riesterer]

Lieber unixasket,

Problem: Chrome und Firefox interpretieren das jeweils völlig unterschiedlich.

hast Du denn dafür gesorgt, dass die Schriftgrößen für das Wurzelelement und den Body explizit in Pixeln angegeben sind? Wenn Du Dich da auf die Voreinstellungen der Browser-Stylesheets verlässt, könnte das die Unterschiede erklären.

Liebe Grüße

Felix Riesterer

[Rolf B]

Hallo unixasket,

gibt es für Brave/Android Entwicklerwerkzeuge? Bspw. als Remote-Debugging mit Hilfe eines Desktop-Brave (so macht es Chrome).

Zu klären wäre, ob Brave das Problem ist oder deine Seite.

Wie verhalten sich denn andere Seiten unter Brave? Z.B. unser Wiki oder das Forum?

Wie verhält sich eine Simpel-Testseite, die die meta viewport Angabe enthält, und in der Du ein p mit 1rem Schriftgröße und ein p mit 16px Schriftgröße gegenüberstellst?

Rolf

[Francescosnow]

Haben Sie es gelöst, teilen Sie es mir bitte mit

[Matthias Scharwies]

Guten Morgen!

Haben Sie es gelöst, teilen Sie es mir bitte mit

Da der Threadersteller keinen Link zu einem Online-Beispiel zur Verfügung gestellt hat,
können wir nur spekulieren.

Gunnar hat auf die Meta-Angabe im Grundgerüst hingewiesen:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel</title>
  </head>
  <body>
    <!-- Sichtbarer Dokumentinhalt im body -->
  </body>
</html>

Im Stylesheet würde ich nur dies festlegen, Nutzer können die Schriftgröße in den Einstellungen ihres Browsers anpassen:

body {
  font-size: 1rem; /* Minimum, evtl. 1.125rem */
  max-width: 65ch;
  margin: 0 auto;
  padding: 1rem;
}

/* evtl. mal zum Vergleich so ausprobieren, nach Rolf */
p.fixed {
  font-size: 16px; 
} 

p.fixed kann man mal ausprobieren und dann wieder löschen.

Herzliche Grüße
Matthias Scharwies

[Francescosnow]

Guten Morgen!

Haben Sie es gelöst, teilen Sie es mir bitte mit

Da der Threadersteller keinen Link zu einem Online-Beispiel zur Verfügung gestellt hat,
können wir nur spekulieren.

Gunnar hat auf die Meta-Angabe im Grundgerüst hingewiesen:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel</title>
  </head>
  <body>
    <!-- Sichtbarer Dokumentinhalt im body -->
  </body>
</html>

Im Stylesheet würde ich nur dies festlegen, Nutzer können die Schriftgröße in den Einstellungen ihres Browsers anpassen:

body {
  font-size: 1rem; /* Minimum, evtl. 1.125rem */
  max-width: 65ch;
  margin: 0 auto;
  padding: 1rem;
}

/* evtl. mal zum Vergleich so ausprobieren, nach Rolf */
p.fixed {
  font-size: 16px; 
} 

p.fixed kann man mal ausprobieren und dann wieder löschen.

Herzliche Grüße
Matthias Scharwies

danke, ich werde es versuchen

[Rolf B]

Hallo Francescosnow,

der Versuch ist aufgefallen und der im Zitat versteckte Spamlink wurde gelöscht. Wäre ohnehin ein wertloser nofollow gewesen.

Als alter Käferfahrer fällt mir dazu nur ein: „Du denkst wohl, wir sind blöd. Sind wir aber nicht!“

Rolf