Matthias Weber: Wie realtive Schriftgröße angeben

Hallo zusammen!

Ich will für eine Seite nun mal relative Schriftgrößen benutzen. Und zwar möchte ich eigentlich nur EINE Angabe im <body> machen und nur für Elemente, wo sich die Größe auch ändern soll, die jeweilige Angabe machen.

body,table,input,textarea {
 font-family: Verdana, Arial, Helvetica, Sans-Serif;
 font-size: 0.9em;
}

Mit dem em hab ich jetzt das Problem, dass der IE das gerne noch für input und textarea angegeben hätte, der Opera allerdings nicht und somit nochmal 0.9 kleiner macht.

Nehme ich ex ist alles bei beiden Browsern unterschiedlich groß.

Also mittlerweile halte ich nicht mehr viel von relativen Angaben ;)

Stand schonmal jemand vor so einem Problem?

Gruß
Matthias

  1. Hi,

    Ich will für eine Seite nun mal relative Schriftgrößen benutzen. Und zwar möchte ich eigentlich nur EINE Angabe im <body> machen und nur für Elemente, wo sich die Größe auch ändern soll, die jeweilige Angabe machen.
    body,table,input,textarea {
    font-size: 0.9em;

    Du willst also dem User grundsätzlich eine 10% kleinere Schrift vorsetzen als der User für sich als optimal eingestellt hat?
    Warum?
    Wenn Dir die Schrift bei 1em zu groß ist, dann solltest Du in Deinem Browser eine andere Schriftgröße voreinstellen.

    cu,
    Andreas

    --
    Der Optimist: Das Glas  ist halbvoll.  - Der Pessimist: Das Glas ist halbleer. - Der Ingenieur: Das Glas ist doppelt so groß wie nötig.
    http://mud-guard.de/? http://www.andreas-waechter.de/ http://www.helpers.de/
    1. Du willst also dem User grundsätzlich eine 10% kleinere Schrift vorsetzen als der User für sich als optimal eingestellt hat?
      Warum?
      Wenn Dir die Schrift bei 1em zu groß ist, dann solltest Du in Deinem Browser eine andere Schriftgröße voreinstellen.

      cu,
      Andreas

      Hmm, ok ich ich glaub ich hab's erst jetzt verstanden. Also ich nehme für meine Seite als Standard Größe immer 1em. Richtig? Und die berechnet sich aus den Einstellungen des Browsers. Und für <h1> etc. mach ich dann größer oder auch mal kleiner.

      Ich hatte im Hinterkopf immer nur das temporäre ändern der Schriftgröße und wollte es erstmal überall gleich machen, so dass jemand bei Bedarf größer stellen kann.

      Dann fällt ja auch mein Problem mit der unter den Browsern unterschiedlichen Vererbung für z.B. <input> weg, da 1*1=1.

      Danke für den Denkanstoß ;)

      Matthias

      1. Nein, ich ziehe meine Aussage wieder zurück ;)

        Wie kann man denn so für den "normalen" Anwender ein harmonisches Verhältnis zwischen Seitenlayout, Bildern und Schriftgröße erstellen?

        Ich hatte leider eben noch für <html> 8pt und <body> dann 1em angegeben, aber dann kann der IE ja schon nicht mehr vergrößern.

        Gibt es keinen Kompromiss zwischen Design und individueller Usability?

        Matthias

        1. Moin!

          Wie kann man denn so für den "normalen" Anwender ein harmonisches Verhältnis zwischen Seitenlayout, Bildern und Schriftgröße erstellen?

          Wenn ich dein Problem richtig verstanden habe, solltest du einmal darüber nachdenken,
          die Größe des _umgebenden Elements_ in em anzugeben!?

          Gruß

          Der Hans

          --

          wieder online: http://www.discofoxtanzen.de
  2. Hallo,

    body,table,input,textarea {
    font-family: Verdana, Arial, Helvetica, Sans-Serif;
    font-size: 0.9em;
    }

    Mit dem em hab ich jetzt das Problem, dass der IE das gerne noch für input und textarea angegeben hätte, der Opera allerdings nicht und somit nochmal 0.9 kleiner macht.

    Das Problem umgehst Du, indem Du für die dem <input>- und <textarea>-Elementen umgebenden Elemente (z.B. Form, oder auch Container wie <div> oder <table>, und eben auch <body>) keinerlei Schriftgrössenangaben (ausser eventuell "font-size:100%") machst.

    Nachteil: Dein Plan, die Schriftgrösse über <body> anzusprechen fällt flach und Du musst die Elemente anders (z.B. einzeln) ansprechen.

    Beispiel:

    <body>
        <table><tr>
          <td>
            <form>
              <input>
            </form>
          </td>
          <td>
            <p>Lalala</p>
          </td>
          <td>
            <blockquote>Lalala</blockquote>
          </td>
        </tr></table>
      </body>

    Statt diesem:

    body{
      font-size:1em;
      }

    table,input{
      font-size:0.9em;
      }

    schreibst Du jenes:

    body{
      font-size:100%;
      }

    input,p,blockquote{
      font-size:0.9em;
      }

    Das "100%" im <body> kannst Du möglicherweise auch weglassen. Es bietet sich übrigens manchmal an, statt "em" "%" zu verwenden, da "em" mindestens vom IE 5 (und vielleicht auch 6?) quasi multipliziert wird.

    Beispiel:

    <span style="font-size:1em">
          <span style="font-size:1em">
              <span style="font-size:1em">
                text
      </span></span></span>

    und

    <span style="font-size:100%">
          <span style="font-size:100%">
              <span style="font-size:100%">
                text
      </span></span></span>

    Verändere bei beidem mal die Schreiftgrössen-Anzeige im IE und vergleiche. Das erste Beispiel wird sehr viel extremer wachsen und schrumpfen als das zweite.

    Übrigens: Ein in absolut gleiches Aussehen in allen Browsern (bei "normal" eingestellter Schriftgrösse) wirdst Du warscheinlich nicht erreichen können, daher empfiehlt es sich, das Layout flexibel genug zu halten, dass es bei anderen Schriftgrössen nicht nur lesbar bleibt, sondern auch noch akzeptabel aussieht.

    Nette Grüsse,
    stefan

    1. Danke Dir für Deine Hilfe. Hab's jetzt ganz gut hinbekommen und man kann auch im IE die Schrift vergrößern ohne von riesigen Buchstaben erschlagen zu werden ;)

      Gruß
      Matthias

  3. Hallo Matthias,

    Mit dem em hab ich jetzt das Problem, dass der IE das gerne noch für input
    und textarea angegeben hätte, der Opera allerdings nicht und somit nochmal
    0.9 kleiner macht.

    Wie Opera dazu kommt, habe ich mal vor Ewigkeiten versucht zu erklären.
    Vielleicht hilft es Dir ja.

    </archiv/2003/1/35308/#m192528>

    Stand schonmal jemand vor so einem Problem?

    Nicht daß der IE nochmal das ganze seperat für input und textarea will.
    Da ich Anhänger der 1em-Schule bin, kann ich Dir wie wahsaga nur zu der
    Angabe 1em für body, input und textarea raten. Meiner Erfahrung nach
    verhält sich 1em übrigens genauso wie 100%.

    Tim