‘Typography’ Videos

  • Vertical rhythm: efficiency in WordPress theme layout

    WordCamp Kathmandu (काठमाडौँ) 2022Speaker: Ashish Rai

    October 1, 2022 — Learn about the design concept of vertical rhythm. This approach seeks to create asymmetrical balance between the vertical lines in design typography.

    Gain insight for choosing a proper font size, line-height, and margin/padding to balance layouts. Find out how a simple trick and a tiny bit of math has a significant impact on design aesthetics.

  • Block theme builders: choosing and using fonts

    Speakers: Damon Cook, Sarah Snow

    September 15, 2022 — What goes into deciding which font(s) to use? Where might you get your fonts? How do you hook your font up within a block theme? What are variable fonts, and should you use them?

    In this workshop we will explore:

    – Some considerations for choosing a font
    – Where to find fonts and how to download and convert to proper formats
    – A brief overview of variable fonts and when to consider using them
    – How to hook up a font in a block theme (hint: theme.json)
    – Discuss the future of fonts in WordPress full site editing

    Presentation Slides »

  • Stefano Minoia: Accessible Typography

    WordCamp Santa Clarita 2021Speaker: Stefano Minoia

    August 23, 2021 — Making website content legible for people with disabilities requires some extra attention. Learn how to make informed decisions about displaying website text in a way that makes it easier for people with disabilities to more easily engage with a website.

    Presentation Slides »

  • Typografie für Websites

    WordPress Meetup PotsdamSpeaker: Frank Spade

    June 12, 2021 — Bei unserem April-Meetup wollen wir uns mit Typografie für Websites beschäftigen! Oft werden Inhalte nach gut dünken formatiert, ohne überprüfbare Regeln zu haben. Das kann dazu führen, dass z. B. mehrere verschiedene Arten Telefonnummern zu formatieren, auf einer Seite zu finden sind.
    Wir sehen uns Schriften und Formatierregeln an, betrachten die semantische Gliederung eines Textes durch Überschriften und schauen uns kritische Zeichen an, die oft falsch eingesetzt werden. Ein kurzer Einblick in einfache Schreibweisen und das Urheberrecht sowie empfohlene Genderformen und hilfreiche Plugins werden besprochen. Zum Abschluss gibt es einen kleinen Test, bei dem das Gelernte angewendet werden kann.
    Referent ist Frank Spade, Informationswissenschaftler, Webdesigner und Lektor aus Potsdam.

  • Scott Kellum: Practical Responsive Typography

    WordCamp Boston 2019Speaker: Scott Kellum

    October 22, 2020 — Every great design starts with great typography. We have the tools to make our layouts responsive, so isn’t it time we do that for our type? This talk explores how text reacts to a responsive context, how to manage how your typography within this context, and new technologies you can take advantage of to optimize the user experience.

    Presentation Slides »

  • ¿Cómo elegir la tipografía para un proyecto web?

    WordPress Meetup San JoséSpeaker: Marco Berrocal

    August 16, 2020 — Cuál es el proceso para elegir tipografías en un proyecto Web y como integrarlos a su tema de #WordPress utilizando ya sea plugins o utilizando el API.

  • Giulia Laco: Variable Fonts, the future of typography has already begun

    WordCamp Milano 2019Speaker: Giulia Laco

    December 21, 2019 — Variable fonts represent an innovation that is changing the history of typography and web design. Excellent for optimizing performance and responsive design, the format has a great potential for optimal typography and creative use. In a single file a typographic arsenal waiting to be used.

  • Joyanna Hirst: Typography and Fluid Design

    WordCamp Asheville 2019Speaker: Joyanna Hirst

    August 6, 2019 — Typography is a pillar of good design. Good typography is legible. We’ll go over some of the design fundamentals for typography. Then, we’ll go over the concepts of fluid typography and using dynamic units to set your typestyles.

    Takeaways:
    Typography basics for legibility
    Fluid web design
    Differences in web and print typography

  • Hemant Kumar: Importance of Colors and Typography in modern webpage design

    WordCamp Kathmandu 2019Speaker: Hemant Kumar

    June 5, 2019 — Colors and Typography play vital roles in modern web design and have a great impact on the audience. The Color, font and text all come together to make the brand distinct in the eyes of the user. Informed decision of color palette and typefaces for a website transforms into faster brands acceptance.

  • Ana Cirujano: Fuentes variables: el futuro de la tipografía web

    WordCamp Granada 2018Speaker: Ana Cirujano

    December 11, 2018 — La tipografía es una disciplina del diseño gráfico que estudia la composición de los textos en armonía con las imágenes y otros elementos. Tradicionalmente, en diseño editorial, los tipógrafos se han ocupado de conseguir composiciones perfectamente equilibradas y legibles, para que el lector las percibiera como agradables y fáciles de leer. Durante años ha sido muy difícil conseguir esto mismo en diseño web, ya que la tecnología no lo permitía.

    En los últimos años y gracias a tecnologías como OpenType o las webfonts, se mejora mucho el panorama, pero no se consiguen grandes avances, ya que se valora más la velocidad de carga de la web que su aspecto visual.

    Hoy, utilizando fuentes variables, podemos conseguir que los textos de una web se adapten al contexto del lector o usuario, para que sean más legibles y atractivos, consiguiendo un gran rendimiento, sin sacrificar la velocidad de carga de la web.

    Las fuentes variables cambian sus propiedades —como el ancho o el peso, por ejemplo— ¡utilizando un único archivo!

    Se espera que las fuentes variables sean totalmente utilizables en los navegadores a lo largo de este año, por lo que veremos cómo se utilizan en WordPress (código CSS) y qué ventajas tienen respecto a las demás fuentes. También veremos ejemplos reales de aplicación de fuentes variables y cómo se crea una fuente variable.

    Presentation Slides »