Skalierbare Schriftgrößen und Zeilenhöhe

Worti

Hallo an alle,

ich habe ein CSS-Problem. Wir wissen ja alle, dass richtiger Text im Header besser ist als ein Bild. Also habe ich mir die Frage gestellt, ob es nicht eine Möglichkeit der dynamischen Schriftgröße gibt. Das Problem habe ich gelöst:

Code

#Text {
  grid-column: 2 / 3;
  grid-row: 1 / 2;  
  font-family: 'Serifen', verdana, arial;
  background: #282828;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

span.white {
  font-size: clamp(0.9em, 5vw, 5em);
  color: #ffffff;
}

span.orange {
  font-size: clamp(0.45em, 2.5vw, 2.5em);
  color: #ff9933;
  line-height: 0.8cap;
}

Alles anzeigen

Dann habe ich die Zeilenhöhe in der orangenen Schrift angepasst. In voller Breite sieht es sehr gut aus, aber wenn man den Browser zusammenschiebt, dann wird die Zeilenhöhe immer größer, bis es komplett doof aussieht.

Kann mir jemand einen CSS-Schubs geben, damit auch in der schmalen Ansicht die Zeilenhöhe auf 0.8 bleibt?

Danke im Voraus sagt

Markus

bembelimen

Leicht Off-Topic, aber vielleicht kannst du dir hier Inspiration holen: https://getbootstrap.com/docs/5.0/getting-started/rfs/ (besonders das verlinkte GitHub-Repo)

Worti

Hallo bembelimen,

Danke für Deine Antwort. Ich möchte aber nicht über Viewports gehen. Es soll komplett dynamisch sein. Mit der Text-Size klappt das sehr gut. Nur die Line-Height spielt nicht mit.

Korrektur über das wann die Line-Height nicht mehr mit spielt: Es ist ab ca. Hälfte der Voll HD Breite.

Ich habe die CSS ein wenig angepasst, damit es nicht mehr ganz so doof aussieht:

Code

#Text {
  grid-column: 2 / 3;
  grid-row: 1 / 2;  
  font-family: 'Serifen', verdana, arial;
  background: #282828;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#Text p {
  margin: 0;
}

span.white {
  font-size: clamp(0.9em, 5vw, 5em);
  color: #ffffff;
}

span.orange {
  font-size: clamp(0.9em, 2.5vw, 2.5em);
  color: #ff9933;
  line-height: 0.8;
}

Alles anzeigen

Oder kann man die line-heigt nicht dynamisch anpassen?

Gruß

Markus

CurlY BracketS

Eine Alternative zu responsiven Textgrössen zeigt Kevin Powell ind diesem Video - vielleicht hilft das weiter, bei ihm gibt es mit Line-heights keine Probleme.

Externer Inhalt www.youtube.com

Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.

Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.

Worti

Hallo CurlY BracketS,

danke für den Link. Ich habe folgendes geändert:

Code

span.orange {
  font-size: clamp(0.9rem, 2.5vw + 0.1rem, 2.5rem);
  color: #ff9933;
  line-height: 0.8;
}

Es macht aber immer noch den Fehler im line-height.

Danke und Gruß

Markus

Worti

Ich denke, dass es dem Kunden gefallen wird. Er ist in der Beziehung recht unkompliziert.

Danke nochmals an alle.

Gruß

Markus

Tags