[TUT / TOOL] Typografie in CSS

This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

  • Ik zie het heel vaak gebeuren dat een website er goed uitziet op de typografie na, vandaar deze korte tutorial/tool :)

    Om snel en makkelijk je typografie met name line-height op orde te hebben kun je het beste de gulden snede gebruiken. Deze verhouding wordt zowel bij planten, dieren, de vorm van het sterrenstelsel en zelf jouw eigen DNA gebruikt en is ook toe te passen in CSS.

    Wiskundig wordt deze gulden snede vaak aangeduid met de Griekse letter phi, waarbij de volgende formule hoort:
    A/B = (A + B) / A

    Wanneer je de variable A en B vervangt voor een getal zal je altijd op het getal 1,61803398874989... uitkomen dit getal gaan we daarom ook gebruiken in je CSS.

    Natuurlijk gaan we dit niet helemaal berekenen en daarom wil ik laten zien/delen hoe je dit kan doen met de volgende tool: Modular Scale

    Standaard heeft een browser een lettertype grootte van 16 pixels alleen werkt 10 pixels het beste voor de meeste fonts.
    Het is daarom zaak als eerste de font-size van het html document naar 10 pixels zet.

    Source Code

    1. html {
    2. font-size: 62.5%;
    3. }
    4. body {
    5. font-size: 1.4em; /* Dit is 14 pixels gulden snede bij 10 pixels */
    6. line-height: 1.618em; /* Gulden snede */
    7. }


    Vervolgens kun je d.m.v. de tool al je font groottes uitrekenen, waarbij de "important number" altijd op de size van je body moet komen te staan in mijn geval 14 pixels.

    Mochten er nog vragen/opmerkingen/suggesties zijn kun je deze vermelden in een reactie, ik hoop dat jullie er allemaal veel aan hebben.
    Dit was mijn spreekbeurt, zijn er nog vragen?

    832 times read

Comments 2

  • M.Beers -

    @Koen IctScripters past dit grotendeels gewoon toe (de meta data van de reacties bijv niet...), maar heel veel sites ook niet!

    Het 960 grid model is o.a. gebaseerd op phi een van de redenen waarom het momenteel altijd gebruikt word

  • K.Rens -

    Wow, super, wist ik zelf niet.
    Achteraf gezien logisch, maar nog nooit bij stil gestaan.

    Alles in de natuur valt terug op pi, dus waarom zouden we dit ook niet doen bij sites. :)
    Past Ictscripters dit toe? Ik vermoed van niet...