By: Paola Ruíz

One of the most beautiful things about being a graphic designer is that I am always working on projects in different areas and turns, there is never a time to get bored and you learn a little about everything.

On this occasion I share with you a bit of my knowledge derived from a creative metamorphosis I went through when I left behind the world of printing/branding and dove into UX/UI and web design.

To start: designing for screens is totally different than designing for printing products as such the rules of the game change and typography becomes a separate issue.

Today I bring you my top 5 fonts (combined) for you to use in your projects andgive them a more professional touch. The best thing is that each and every one is available in Google Fonts and is free to download.   

1) Syne + Inter

Syne is synonymous with modernity and something that I personally love is that it comes in various weights, from thin to black, which makes it useful and adaptable, accompanied by Inter, which is specially created for the user interface.

2) Lora + Roboto

Lora is classic, elegant and warm, together with roboto that gives it a sense of structure, it will make your headers instantly attract attention and it will be much easier to identify texts in a hierarchical and orderly manner.

3) Montserrat + Hind

Montserrat has become a classic in the repertoire of every designer, it never fails us and could not be missing from this list, a wide and round typeface like this is recommended to be used with another narrower one to create a visual contrast such as Hind, which also looks great on devices.

4) DM Sans + DM Mono

DM Sans offers a variety of styles and weights that you can use to spice up your website or app even without having to use another typeface.

5) Work Sans + Bitter

Work sans has been one of my favorites for a long time because it looks modern and minimalist and Bitter as its companion adds a classic touch, it is perfect for websites that have paragraphs with alot of information.

Tips to consider when doing font pairing 👀✍

  1. The formula: San-Serif typeface + A Serif typeface gives us balance but it is not the only way to find it. You can use very striking types in the headers and not necessarily serifs, but yes, always be careful not to clutter your interface.
  2. Using more than one typeface helps us to give the interface dynamism, but be careful! There should never be more than 3 different types, it is better to keep 2 or use the same one and only vary their weights, this rule also applies to all areas of the design.
  3. Using serif fonts is not highly recommended in short texts, they are much more practical in long texts as we see in magazines and newspapers, so I advise limiting ourselves to using serifs in titles as a contrast and using san-serifs in the rest of our design (of course as in everything it is worth experimenting)
  4. Prioritize legibility above all else, on the screen if an appropriate font is not chosen we can make our user frustrated and not want to return, so always look for clean and easy to read fonts such as Roboto, Open sans, Poppins, Inter, etc.
  5. Take into account the branding! many times I have had problems with it since the typographic fonts of the client’s brand are usually not very responsive and not practical for the web, in these cases I simply usually look for a font that resembles it as much as possible to maintain a consistent design line but also comfortable for users.
  6. Use professional fonts, there are times that Dafont fonts can seem very attractive to us, but when writing an accent, oh surprise! an Arabic symbol appears out of nowhere, not to mention the punctuation marks. This is why having a reliable repertoire of typefaces is essential on the path to becoming an expert designer.

Now, why should I use web fonts? 😒🤔

One of the mistakes I made the most when starting in this world was not taking into account what fonts and colors (in this case the correct use of RGB) I would use in my designs, of course these decisions are affected by branding and the end user but if there are certain general rules, like the ones I mentioned before, that you can use to start and from there guide you to create your own combinations beautiful and functional.

👉 Don’t forget! It is important to design beautiful interfaces, but it will be useless if they are not useful for your client and your end users.