Custom web fonts lend individuality and uniqueness to your web designs. In this online video tutorial you'll learn how to apply custom web fonts and responsive typography to your projects.
- [Voiceover] Since most of the content on most websites…will be text, I like to start a design process…with responsive typography.…The fonts you choose establish the mood and sentiment…of your content, and I like to work with the actual fonts…I will be using right off the bat.…This also gives me ample time to second guess my…font choices throughout the process and may well…result in some font changes along the way.…Sounds cumbersome?…Actually it's no different from the process…you'll likely use during your design application.…The only difference is, with properly marked up fonts,…swapping one font for another in CSS…is super easy.…
Okay, so to start with we need some actual fonts.…For this project I've chosen three fonts from Google fonts,…and you can see them here in the style tiles.…I have these three fonts lined up in my collection…on google.com/fonts; they are Playfair Display,…PT Sans Narrow, and Gentium Basic.…Because I'm not 100 percent sure what font…weights and styles I'll be using yet,…I'm going to add them all into my project…
In this course, Morten Rand-Hendriksen explains his approach to designing in the browser, which starts well before he even starts coding. He shows how to define the layout on paper and create a "language" for the site, and then builds a baseline document with HTML5. Then he uses CSS to guide the look of the site and the layout, using media queries and Flexbox to add responsive behaviors. In chapter 3, Morten improves the site's interactivity using CSS transitions and transforms. Finally, he reveals how to use these techniques to build WordPress themes in the browser.
Each step involves design strategies, best practices, and actual code examples that will turn the web browser into your new favorite design tool.
- Use the browser as a design canvas
- Draft layouts with pen and paper
- Modularizing the design
- Create a baseline document with HTML5
- Create responsive layouts with Flexbox
- Applying CSS transitions and transforms
- Building WordPress themes in the browser