Skip to main content
beyond tellerrand // BERLIN 2019

Logo of beyond tellerrand // BERLIN 2019 beyond tellerrand // BERLIN 2019

13th to 16th November 2019

in Berlin, Germany

Part of the beyondtellerrand series

beyond tellerrand // BERLIN 2019 Sessions

  1. Session image for Full-Day Workshop: Modern CSS, Dynamic Typography, and Variable Fonts

    Full-Day Workshop: Modern CSS, Dynamic Typography, and Variable Fonts

    Come take a deep dive into the most fundamental part of the interface between your site and your viewers: the type. We’ll dig into the concepts of responsive type and typography, how to make it fast, and how to use modern web development techniques and technologies to make your typography work better and be more engaging than you ever thought possible. We’ll also explore how classic typographic techniques translate to the web, and how those techniques can inform how the web develops in the future.

    This workshop provides an introduction to responsive typography and variable fonts (a new development in type technology) and couples with modern CSS (and a little JS) techniques to create scaling typographic systems.

    We'll also cover:

    • New capabilities with CSS Custom Properties, calculations, light mode media queries, and more
    • How to give the best reading experience
    • How to implement variable fonts well for improved user experience and performance
    • Look at editorial design and user interface enhancements leveraging some of the unique new features enabled in variable fonts
    • Explore a range of accessibility features that can be enabled and exposed for users to give them more control over their own experience
    • Spend time looking at what the W3C is working on to make serving fonts even faster (and how those two things will change the web in significant ways)

    During the Workshop

    We’ll work through several examples to incorporate proper font loading management, variable fonts, scaling typography, and various other techniques we cover into your own demo project. Each part will be added into the demo so by the end of the day you’ll have all the techniques layered together. As time allows we’ll also discuss some of your own real-world projects and look at how these techniques could be brought into your own production workflow.

    After This Workshop You Will

    • Know what variable fonts are and how do they impact performance and UX
    • Know how to use CSS Custom Properties, calc(), and variable fonts together in a scaling typographic system
    • Be able to use @supports to put variable fonts in production today (along with some other newer CSS techniques where they are supported)
    • Understand ways in which accessibility is aided by typography, and how adding some simple user controls can make your site or app even more accessible
    • Know how to load web fonts faster, and get content on screen even faster than that

    This Workshop Is For

    Developers who frequently have to make design decisions about layout, typography, and other design elements in the context of creating responsive front-ends. They will learn about typographic fundamentals and better understand how and why typography should change across screen sizes and use cases. They'll also learn techniques to improve overall and perceived performance, reduce render blocking, and mitigate the negative impact of unstyled text during the loading process.

    Designers may or may not know much about typography or even how much of that knowledge can be applied to the web. During this workshop they'll learn much more about what can be done, and why they might want to do so. They will also learn about how to improve their design and resulting user experience by taking advantage of the capabilities of variable fonts. With a better understanding of the technical possibilities, they will be better able to work with their own designs in code and to have better conversations with developers about what they are trying to accomplish.

    What You’ll Need

    • A basic understanding of HTML and CSS
    • You own laptop computer with Firefox browser installed (at minimum, good to have Chrome and others as well)
    • A code editor and web serving environment (like MAMP or similar)
    • OR
    • A CodePen Account (free of charge, only required for the time of the workshop)

    When and Where Is the Workshop Taking Place?

    On Wednesday, November 13th, from 10am (10:00) to 5pm (17:00). Venue TBA

  2. Session image for Full-Day Workshop: Letterpress Printing at p98a

    Full-Day Workshop: Letterpress Printing at p98a

    Get your hands dirty and explore the fundamentals of letterpress. Theoretical and mostly practical work is waiting for you. Erik Spiekermann and Jan Gassel opened this lovely space p98a in Berlin a few years ago. It is wonderful to experience working with letterpress and everybody who attended the always sold-out workshop each year, loved it.

    This workshop is for everybody who is interested in typography and letterpress. For everybody who always wanted to know how letterpress actually is working. Or simply for anyone who wants to work with their hands and leave with something they produced during the workshop. You don’t need to come prepared with anything – a basic understanding for design, proportion and type helps though. But maybe you already want to make up your mind about a word or a sentence you want to print. This often is the part where people spend a lot of time at, before they actually start printing.

    During the Workshop

    You'll work in four groups of three people maximum, each with their own press to work on. Experience letterpress printing as it has been done 50 years ago with original type from that era and meet Erik in his working environment ;)

    When and Where Is the Workshop Taking Place?

    On Saturday, November 16th, from 10am (10:00) to 5pm (17:00) at (link: http://p98a.com text: p98a), Potsdamer Strasse 98a, 10785 Berlin