Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive typography 2

Responsive typography 2

About line boxes, font-size relations, the CSS `clamp()` function, and the collaboration of designers and developers

Codepen and resources see https://noti.st/gunnarbittersmann/325owX/responsive-typography-2

Gunnar Bittersmann

April 04, 2023
Tweet

More Decks by Gunnar Bittersmann

Other Decks in Design

Transcript

  1. RESPONSIVE
    TYPOGRAPHY

    View full-size slide

  2. RESPONSIVE
    TYPOGRAPHY

    View full-size slide

  3. RESPONSIVE
    TYPOGRAPHY 2

    View full-size slide

  4. RESPONSIVE
    TYPOGRAPHY 2

    View full-size slide

  5. WEB
    TYPOGRAPHY 2

    View full-size slide

  6. Alexanderplatz
    baseline
    ascent
    cap height
    mean line
    descent
    x-height

    View full-size slide

  7. Älexanderplatz
    baseline
    ascent
    cap height
    mean line
    descent
    x-height
    font

    size

    View full-size slide

  8. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
    velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
    cupidatat non proident, sunt in culpa qui of
    fi
    cia deserunt mollit anim id
    est laborum.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
    enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
    culpa qui of
    fi
    cia deserunt mollit anim id est laborum.
    10
    25

    View full-size slide