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 Slide

  2. RESPONSIVE
    TYPOGRAPHY

    View Slide

  3. RESPONSIVE
    TYPOGRAPHY 2

    View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. RESPONSIVE
    TYPOGRAPHY 2

    View Slide

  9. WEB
    TYPOGRAPHY 2

    View Slide

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

    View Slide

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

    size

    View Slide

  12. 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 Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. View Slide