If you're like me, you oogle when you see clean and sophisticated websites with fabulous font pairings.
I can recognize when fonts are misused and when they make me drool at my screen, but I can't for the life of me pair them together myself. Luckily, I don't have to. Other brilliant designers who have studied typography have built websites with fonts that fit together like peanut butter and jelly. But how do you find out what font a designer used when you see a great pairing?
Many browsers, including Google Chrome and Firefox, come with a function called Inspect Element. This allows you to see the code behind a web page, and then find what fonts are in use!
Let's take singer extrodinaire Adele as an example. Yes, she is super fabulous, but so is her font. Let's use her website as an example to try the 'Inspect Element' function and find out what font Adele decided best represents her.
- Go to www.adele.tv
- Highlight the text starting "Full concert film..."
- Right click and select 'Inspect Element." A box full of code will open at the bottom
- Look for the words "Font-Family" (on the right side in Chrome, or under "Style" in Firefox)
- Congrats! You now know the font! (And in case you want to skip to the goods, she uses Raleway Thin, which you can download free here.)
What websites have your favorite design and font elements? Share in the comments!
Kristen Dore is Director of Curriculum Development at NOI