After creating my Wireframe, I did some research on what font I wanted to use. My course instructor encouraged us to search for Font Pairings, and the first website I found was a post from Pagecloud, which picked the Top 50 Google Font pairings picked by designers.
I fell in love with Quattrocento, and initially used the following font pairing.
However, as you’ll notice in my post image, I didn’t stick with this pairing. As I was working on my Hi-Fidelity frames, the fonts just didn’t look right. This ultimately goes back to knowing my product, my brief, and looking at what other companies are doing.
My brief was randomly generated at Random Project Generator. I’ll address briefs in another post, but ultimately your brief, or persona, is your guiding star. It’s not about what you want, or what the stakeholders want, it’s all about your target clients, which should be identified through a process that creates your brief or persona. This was my brief.
While I loved the Quattrocentro & Fanwood font pairing, I understood why my fonts looked off as I began to research competitors. As I looked at Apple, Dell, and others, I realized I needed a much simpler text that had a tech look and feel, looked professional, and paired well with my laptop images.
After doing a little research, I discovered the website Typ.io, which is currently my favorite font pairing website. I found an example with the font Inter, and knew it was exactly what I was looking for. Originally, I found a font pairing of Inter and Eina, but as Figma did not have Eina, I used Rubik as my second font, as it fit the part well enough.
You can see how Inter worked for me in my header image above with my marketing line “Laptops for your Lifestyle” (cheesy I know, but this is just an exercise). You also get a sneak peek of my color palette!