Eine Formel für responsive Schriftgrößen

 (jameshfisher.com)
28 Punkte von xguru 2024-03-22 | 3 Kommentare | Auf WhatsApp teilen
  • Viele Websites wie die New York Times, Medium und Substack verwenden Breakpoints (wie 768px) und ändern daran orientiert die Schriftgröße (1.125 rem und 1.25rem)
  • Mit calc in CSS lassen sich ähnliche Werte schreiben: calc(1.0625rem + 0.2604vw)
  • Wenn man das rundet, kann man es als 1rem + 0.25vw ausdrücken. Deshalb verwende ich inzwischen auf den meisten Websites das folgende CSS
:root {  
  font-size: calc(1rem + 0.25vw);  
}

Verwandte Beiträge

3 Kommentare

 
yanggitak 2024-03-25

Wenn man es auf dem PC genauso umsetzen will wie im Designentwurf, sollte dann nicht auch eine CSS-Variable, die die Breite der Scrollbar abzieht, in die Formel aufgenommen werden? Soweit ich weiß, basiert die vw-Einheit auf der Breite einschließlich der Scrollbar.

Wenn – wie bei einem durchgehenden Bild – auch die Abstände der umgebenden Elemente im gleichen Verhältnis zu- und abnehmen sollen, dürfte auch die Methode zur Schriftgrößeneinstellung auf der untenstehenden Seite hilfreich sein. Bei einem Galaxy Fold (320px) oder hochauflösenden Monitoren scheint es außerdem sinnvoll zu sein, die Werte mit Breakpoints passend zu begrenzen.
https://amerimnos.github.io/coding-playground/reponsive-css-trick-vw/
 
cometkim 2024-03-22

Das ist zwar eine nützliche Näherung, ersetzt aber nur schwer vollständig die Breakpoints, die in der Praxis für Fluid Typography verwendet werden.

In der Regel wird clamp(min_rem, calc_relative_vw, max_rem) je nach Lesbarkeit des Inhalts und Form des Containers unterschiedlich pro Breakpoint angewendet; wenn man stattdessen mit einer einzelnen Formel arbeitet, wird es schwieriger, auf unübliche Formfaktoren zu reagieren.

Zum Beispiel Android-Popup-Fenster, 21:9-Monitore oder Umgebungen wie HMDs
 
nemorize 2024-03-23

Mit Android-Pop-ups oder so etwas wie HMD kenne ich mich nicht besonders gut aus..
Wäre es bei Formaten wie 21:9 nicht okay, auch vh mit einzubeziehen?
So in der Art von calc(1rem + min(1vw, 1vh) * 0.25).