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

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