Typography and recommended fonts?

[seaturtle]

Hi all,

I'm aware that there are some professional web designers here, so I'd just like to ask your opinions on what are the best fonts available right now, to give off a clean nice look? I have seen plenty of nice looking ones on google fonts but there are so many to choose from, I just don't know where to start! 

My forum is currently using Helvetica which is okay, but I just read Helvetica looks very outdated and is not unique (which I totally agree). I find that if I use a font that's too "clean" or "modern" (e.g. Avenir), the forum feels sort of cold and almost too corporate? 

Also does anyone know if using custom fonts make the forum lag significantly? If it does I think I will just stick to Helvetica. 

[seaturtle]

Todge  Brian Kami do you guys recommend using custom fonts? Or using websafe fonts?

[Kami]

my @ tag is @kamiyakaoru for what it's worth.

The lag you experience using a custom font will likely be dependent on how many fonts you use and where you're loading the font from. Google Font API for example has the resources to load quickly, though again using multiple fonts per theme will increase load time. A private server may not be able to handle a high number of requests and you may experience increased loading times.

Using Google Font I have three custom fonts referenced on my (only) theme and there if there is any lag it is indiscernible. I fully support using custom fonts within reason, provided that they are legible and follow good design practice.

[Former Member]

I generally use "Roboto" as it looks good and is legible on all devices, regardless of the weight being used(300,400,700)

Have a look at these two articles from google.

developers.google.com/speed/docs/insights/UseLegibleFontSizes

material.io/guidelines/style/typography.html#

[Kami]

Apr 7, 2017 9:12:44 GMT -8 @synthtec said:

I generally use "Roboto" as it looks good and is legible on all devices, regardless of the weight being used(300,400,700)

Have a look at these two articles from google.

developers.google.com/speed/docs/insights/UseLegibleFontSizes

material.io/guidelines/style/typography.html#

roboto condensed is prettier

[Former Member]

lol I thought that might be your fav. Iv'e seen some of the fonts you use :P

[Kami]

Apr 7, 2017 10:18:35 GMT -8 @synthtec said:

lol I thought that might be your fav. Iv'e seen some of the fonts you use :P

I have a Roboto Condensed Problem. :P

My go to are usually roboto condensed and yanone kaffeesatz, but i've grown fond of voltaire and dosis lately (though voltaire is definitely a header font and not a body font).

[Former Member]

I personally don't like having a different font type for the headers and body, I usually use some contrast tricks, my fav is to use the super thin variation, then uppercase it and use that for the headers, which actually gives the look of two different fonts being used

[Kami]

Apr 7, 2017 11:09:21 GMT -8 @synthtec said:

I personally don't like having a different font type for the headers and body, I usually use some contrast tricks, my fav is to use the super thin variation, then uppercase it and use that for the headers, which actually gives the look of two different fonts being used

Honestly I think it depends on what you're doing. More ~artsy~ or themed designs definitely benefit from having contrasting (or complementary) fonts between header/body; for example, a themed 1920s roleplay (not to get personal or anything :P) would definitely benefit from more art deco styled fonts, but obviously they're not good body fonts because they're not good for large blocks of text; similarly, an art portfolio website might use a more script-like or artistic font for headers but again, not good for large blocks of body text. For a more corporate look, I would definitely agree with you that the same font but different size / weight / capitalisation would be a cleaner look.

I think that there's definitely a time and place to use multiple fonts (within reason of course, nothing chimeric haha) it just depends on the nature of the site.

[Alisha]

My favorite google fonts for body are Lato?, Poppins, and Source Sans Pro. (Link) They all have light through bold options, which is good for body texts. I tend to prefer sans-serif fonts for body in most cases.

[Former Member]

Oh yeah I agree Kami.

"Themed" styles you can go nuts, I just tend to be a little more conservative with my font choice when it comes to client work(not always) but If it is business related, sure.

[Kami]

Apr 7, 2017 12:26:57 GMT -8 @synthtec said:

Oh yeah I agree Kami.

"Themed" styles you can go nuts, I just tend to be a little more conservative with my font choice when it comes to client work(not always) but If it is business related, sure.

100% agreed. Plus you always run the risk of going overboard when folks aren't as experienced. For example I saw a forum theme (premade in the library, I think) where everything was written in cursive and it was completely illegible -- it fit the "theme" (a regency / royal inspired theme) but it was definitely poorly executed.

[Former Member]

Oh cursive is the worst lol.

Have a look at these examples and tell me they are not dreadful and illegible.
www.pallasweb.com/blog/cursive-fonts-some-great-choices.html


For me cursive font's almost require you to squint your eyes as you move closer to the screen to inspect the letters. "R" and "S" are the worst culprits.

People generally don't read everything on a webpage, we tend to scan the page with our eyes, cursive fonts break this flow.

[Kami]

Cedarville Cursive isn't bad but they're not good for body text / overall design. Maybe if you're doing some sort of like... motivational poster...?

But also this is terrible for accessibility too, particularly for people with dyslexia. :|

[seaturtle]

Apr 7, 2017 9:12:44 GMT -8 @synthtec said:

I generally use "Roboto" as it looks good and is legible on all devices, regardless of the weight being used(300,400,700)

Have a look at these two articles from google.

developers.google.com/speed/docs/insights/UseLegibleFontSizes

material.io/guidelines/style/typography.html#

Thanks for the recommendation, it is much nicer than Helvetica
I am going to use that for now! 

Any others you recommend?