Ankündigung

Einklappen
Keine Ankündigung bisher.

Schriftgröße für responsives design

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Schriftgröße für responsives design

    Hallo,
    ich probiere gerade meine Website responsive anzupassen.
    Zuerst wollte ich die Schriftgröße H1 ändern.
    Vorher hatte ich schon den Body mit max-width 1116px gesetzt.
    Die Umrechnung 1116 auf die gewünschte 40px für die Überschrift
    brachte mir 3.584229390681%, die ich als font-size eingebe.
    Aber nun zeigt er mir die Schrift winzig.
    Wo habe ich hier einen Denkfehler, muss ich eine andere Basis als Rechenbezug ansetzen?
    Viele Grüße
    Gerhard

  • #2
    Hallo

    Du hast zwei grundsätzliche Denkfehler.

    Prozent kann sich auf viele Grundwerte beziehen. Für Schriftgrößen hat sich eine Angabe in Prozent nicht bewährt, weil es zu viele Nachteile gibt. Siehe zum Beispiel

    http://www.thestyleworks.de/basics/percentage.shtml

    Zudem ist es nicht benutzerfreundlich die Schriftgröße von der Fensterbreite oder umgebenden Elementen abhängig zu machen.

    Die Schriftgröße sollte so gewählt werden, dass sie von den Usern bequem gelesen werden kann. Das ist in der Regel etwas größer als die Browservorgabe von 16px.

    Auf kleinen Bildschirmen sollte die Schrift eher noch etwas größer gewählt werden. Die einzelnen Pixel sind bei solchen Geräte meist kleiner als üblich und häufig werden solche Geräte mobil benutzt, zittern also beim Lesen in Fahrzeugen oder wenn sie in der Hand gehalten werden.

    Gruss

    MrMurphy

    Kommentar


    • #3
      Hallo, ja, da hatte ich die falsche Basis als Bezug genommen, muss das nochmals probieren.
      Ich Taste mich da auch erst mal langsam heran, ist auch ein komplexes Thema, Schrift ist nur mal ein kleiner Test gewesen.
      Aber so wie ich es in einem Video für das Thema gesehen habe, ist die Schriftgröße auch mit % anzupassen,
      Sonst wird bei kleinen Bildschirmen die Schrift in Relation zu den den anderen Elementen zu groß.
      Du hast aber recht, auch bei kleinen Bildschirmen sollte Schrift gut lesbar und groß genug sein.
      Viele Grüße
      Gerhard

      Kommentar


      • #4
        Hallo

        Mein Tip: Lass die Finger von Anleitungen die die Schriftgröße in Prozent bestimmen.

        Prozentangaben bei der Schriftgröße sind zwar von den Regeln her zulässig, in der Praxis haben sie jedoch zu viele Nachteile.

        Aktuell und zukünftig hat sich die Einheit rem für die Schriftgröße bewährt, auch im Zusammenspiel mit Responsive Design. Zumal die Einheit rem vor einigen Jahren grade auch für die Schriftgröße entwickelt wurde.

        Gruss

        MrMurphy

        Kommentar


        • #5
          Hallo, jetzt bin ich dabei den Text umzustellen und habe das mit REM mal probiert.
          Hier als Beispiel: H1

          h1 {
          color: #CD5B45;
          font-size: 2.5rem; /* 40px */
          white-space: nowrap;
          }

          Dann hatte ich Bildschirmgröße getestet, da hatte ich erwartet, dass auch die Schrift kleiner wird.

          Die Schriftgröße blieb aber gleich, an welcher Ecke muss ich da suchen?

          Außerdem ist mir wichtig, dass die Schrift nicht zu klein wird, wie wird die Minimalgröße der Schrift bestimmt?

          MfG
          Gerhard

          Kommentar


          • #6
            Hallo, noch eine Ergänzung zu meinen zwei obigen Fragen (Antwort vorher)
            Ich habe mal bei caniuse geschaut.
            So wie ich das verstehe, wird das beim IE erst ab Version 11 unterstützt.
            Dann wird es aber problematisch das schon einzusetzen, weil zu neu?

            Mfg
            Gerhard
            Angehängte Dateien

            Kommentar


            • #7
              Hallo

              Entschuldigung. Ich habe dein Grundlagenwissen leider überschätzt. Lass die Finger besser von rem, da du damit offensichtlich überfordert bist.

              Gruss

              MrMurphy

              Kommentar


              • #8
                Hallo, Du hast recht, ich arbeite mich noch ein.
                Hatte aber die Anweisung auch für @medie screen falsch eingebunden.
                Dann noch H1 geändert.
                und schon geht es wie gewollt.
                mfg
                Gerhard

                Kommentar


                • #9
                  Hi ST747,
                  du kannst auch px weiterhin für die Schriftgröße im Responsive Webdesign verwenden. Und zwar kannst du mithilfe von Media Queries Regeln aufstellen, bei welcher Auflösung und welchen Endgeräten die passende Schriftgröße angezeigt werden soll. Warum mit Media Queries und px? Wenn sich die Darstellung der Seite ändert durch unterschiedliche Endgeräte, ist man nicht zwangsläufig verpflichtet einen Text kleiner in der Schriftgröße darzustellen. Manchmal mache ich das Umgekehrt indem Fall bei Überschriften - diese werden bei mir auf kleineren Endgeräten größer als auf der PC-Version angezeigt. Neben den Effekt, dass bei mir bestimmte Elemente ausgeblendet werden und neue dazu kommen, macht das viel aus. Es verändert sich auch das Leseverhalten, sodass bestimmte Texte kurzgefasst werden können oder eine Extra mobile Variante dargestellt wird. Jenachdem wie hochwertig die Seite aufgebaut ist, kann man vieles kombinieren.
                  PS: Wenn euch mein Post gefallen hat, dann lasst mir ein "Daumen hoch" da!

                  Kommentar


                  • #10
                    Hallo, aha, das geht auch, ich stelle gerade auf % um, behalte mir aber später das rem mal im Auge.
                    Meine Anwendung soll auch einfach gestrickt sein.
                    Ich teste noch die verschiedenen Möglichkeiten, habe aber schon gemerkt,
                    Media Queries müssen da mit eingebunden werden.
                    Das hatte ich zwar schon gemacht, aber nicht richtig und nicht für H1.
                    Mit meiner derzeitigen Lösung mache ich den Breckpoint (mit MQ) bei verschiedenen
                    Bildschirmgrößen.Das ist eigentlich schon der Ansatz wie Du es oben beschreibst,
                    nur mache ich es mit %.

                    Ursprünglich dachte ich da ganz einfach und hoffte das mich CSS da versteht.
                    Ich hatte nur bei h1 auf & umgestellt und dachte, o.k. 50% für die Überschrift
                    sind halt bei einen kleinen Gerät zwar auch 50% aber entsprechend kleiner.
                    Damit das dann aber bei einem sehr kleinen Gerät nicht zu klein wird,
                    dachte ich, es gibt so etwas wie MIN für diese kleinste gewünschte Schriftgröße.
                    Aber das geht nun nicht so und ich hatte mich auch anfangs etwas gewundert,
                    dass ich für die Gestaltung in CSS ein H1 beschreibe und dann das H1 innerhalb
                    von CSS nochmals mit MQ beschreibe, dachte das geht alles nur mit einem H1.
                    Das ist ja schon fast eine Gestaltung der Gestaltung wenn man da zweimal anpacken muss.
                    Aber das alles ist halt auch eine Sache der Entwicklung der verschiedenen Geräte.
                    O.K. CSS ist anders und MQ sind dafür vorgesehen.
                    Das schaue ich mir jetzt genau an.

                    Viele Grüße
                    Gerhard






                    Kommentar

                    homepage-forum.de - Hilfe für Webmaster! Statistiken

                    Einklappen

                    Themen: 56.632   Beiträge: 428.455   Mitglieder: 28.301   Aktive Mitglieder: 45
                    Willkommen an unser neuestes Mitglied, phl92.

                    Online-Benutzer

                    Einklappen

                    150 Benutzer sind jetzt online. Registrierte Benutzer: 5, Gäste: 145.

                    Mit 3.502 Benutzern waren am 23.01.2020 um 17:20 die meisten Benutzer gleichzeitig online.

                    Die neuesten Themen

                    Einklappen

                    Die neuesten Beiträge

                    Einklappen

                    Lädt...
                    X