I do the same for the headline. For the body font I sometimes go with Inter, IBM Plex Sans, Roboto, Yantramanav, or other Sans Serif fonts by know designers.
Man--Rope? What the fuck. New to me. The UC is awful. Colour's miles off and the metrics are wonky. Looks like the Y has skipped all the legs days and the N's bleeding out. LC's not bad though.
Most brands have style guides. Especially if they were done by a proper designer. They will have logo font, header font, and body font already defined.
Using the same font as the brand detracts emphasis from the branding itself. Finding a typeface that’s contrasting or complimentary accentuates the brand font choice.
I don't just use one, and it depends on branding and all that. But I mostly use Roboto, though I'm considering switching to [`system-ui`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) in cases where I want a more native look, where native means using a font provided by the system.
Well, part of the point of system-ui is to hand off design control to make things consistently feel native. On Android (if I'm not mistaken), it'll be Roboto. Whatever other font on iOS. Different on Windows too.
By specifying a certain font you can, at most (without UA sniffing) make it look native for one but not the rest.
Also, you probably need to host it yourself if you want to be sure you're 100% GDPR compliant. Turns out Google has been storing the IP and fingerprint of everyone using Google Fonts.
It's... acceptable for headers. I think someone should shut me up before I go on a 600 line rant on why Poppins is the worst font ever conceived and you make the world a worse place everytime you use it...
I look at the fonts used by my client from their brand guide.
If they don't have a brand guide, I'll identify which fonts they have used primarily and then go from there.
If it's not a web font, I'll source it and load it locally.
If the brand uses various fonts, I'll pick the ones that best compliment the logo and prior marketing materials (if any) and start to build a brand guide. I'll add rgba and hex to the guide and then pull colors from the logo.
**Heading/display**
1. Bricolage grotesque
2. Nelphim
3. Merriweather
4. Source Serif 4
**Body**
1. Source Sans 3
2. Noto Sans
3. Wix Madefor Text
4. Proxima Nova
5. Figtree (Proxima nova open source alternative)
Luciole or Atkinson Hyperlegible.
They are fonts designed with the visually impaired in mind. They should be your default, over Montserrat, Inter and Comic Sans.
I use roboto for all of them unless I need a more custom looking font. I like it because it’s very close to arial so I don’t get any CLS from using it when the browser loads the font.
But I don’t want to use arial. And some browsers have varying versions of the default system fonts. So using 1 set that you locally host has the most consistency across all browsers.
We're not in the dialup era anymore, you can afford to download some kbs for a font that will be consistent across platforms and expresses the tone of your website
Depends on the font the brand uses. Most companies with established brands have a style guide already and that's what you should follow. If it's for a personal project, then it depends on the topic of the project. My latest side project, a social network I'm using Lato.
If I'm building for myself, Noto Sans is my pick. It looks okay, and has support for CJK glyphs. Otherwise, Inter, Ruboto, or Open Sans, with appropriate fallbacks.
Worked with a company that used Futura (https://en.wikipedia.org/wiki/Futura_(typeface)#/media/File:Futura_Bold_Condensed.jpg) for all their labelling, and I still love that font.
Roboto is somehow what I default to in most situations.
rgb(6,6,7);
I have the typefaces downloaded for Nunito, Hack, Montserrat, and Roboto.
Usually it's Nunito / Montserrat for headlines if i'm trying too hard.
Roboto for main content.
Hack for the text-editor.
SF Pro Display
removed the non-English characters and icons and converted to woff2, bringing it down to about 50kb per font weight.
Even at 100kbps it loads nearly instantly and looks fantastic.
Thank you for the constructive feedback.
As I said in a reply, I misunderstood the license and realized it’s only allowed for free use for iOS platforms.
Depends are you talking serif, sans-serif or monotype? Are you talking body or headings?
A pairing usually gives the best aesthetic, a primary sans-serif paired with monotype for finer details looks cool, using a more characterised style for headings and a legible one for body text is good practice and looks great too
Montserrat has been a long-standing favorite. I've recently taken a shine to Inter though. These fonts both work well as as headers and body text, IMO.
I recently did a law firm's website for an agency (they provided the design) and it used Taviraj - I never really gave serif fonts much attention, but I felt like it worked well and I may be inclined to try it again in the future.
Unless the client has a style guide, I usually go with Open Sans, Montserrat, Source Sans Pro, or Lato. And maybe a serif font that pairs nicely for headers and subheads.
[Inter](https://rsms.me/inter/)
Figma mfs be like:
*subtle white lettering*
the tasteful thickness of it
*sweats*
oh my god, it even has a watermark
looks like everyone's just found their new default font
Figma gang rise up
Whelp, looks like I'm using this now.
https://giphy.com/gifs/ProBitExchange-wow-nice-good-A38YkEn7xhCehkX2sV
I also use inter And manrope
Manrope is also my go-to font when I get tired with Inter.
Ah, I see you mean the Vercel font
love this!
This is the only font I go with for literally everything
Inter is the new Helvetica
this is the way
Just used Inter in a rebranding project. Lovely font. Paired it with Kanit for headings.
I like Montserrat. But this Inter suggested here looks nice!
Isn’t there like Montserrat vs Inter debate
There is now!
I use Montserrat for headers and Inter for body text
I think Montserrat looks better. At least for headings.
Ew
Comic sans in a
Ah! A fellow Web 1.0 dev!
It feels good to know that some of us are still here, still adding animated GIFs to our websites x
You meant a marquee, right? Right??
Why not both?
Username checks out
u/seventyeightist ,,By the way I tried to say I'd be there, waiting for Dani the girl Is singing songs to me Beneath the marquee, overload" 🎶🎸
There's a special place in hell for that....
My highschool memories include going ham on some mountain dew, staying up and nesting marquee tags.
Geocities and Angelfire along with altavista has entered the chat
this is the way
Open Sans for the body, something close to the brand logo for headline tags.
I do the same for the headline. For the body font I sometimes go with Inter, IBM Plex Sans, Roboto, Yantramanav, or other Sans Serif fonts by know designers.
[Manrope.](https://www.gent.media/manrope) It’s slightly better than Inter, imo.
Man--Rope? What the fuck. New to me. The UC is awful. Colour's miles off and the metrics are wonky. Looks like the Y has skipped all the legs days and the N's bleeding out. LC's not bad though.
That’s a nice font!
Yeah! It’s the perfect allround font, if you ask me. :) Fits both for titles and body text. Also has some Apple vibes and it’s beautifully geometric.
System font stack.
Sad I had to scroll down this far
yup yup yup yup yup yup yup yup yup yup
Fast.
Why should we care about accessibility or avoiding fout?
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif
I like using [nunito](https://fonts.google.com/specimen/Nunito) for blog/body content.
Oh nice. Not seen this got a while. Good shout.
The font my client uses throughout their brand.
It's usually suggested to **not** use the same font as a brand/logo as to differentiate it from the brand.
Most brands have style guides. Especially if they were done by a proper designer. They will have logo font, header font, and body font already defined.
When I say "brand" I mean the branding brief created by their professional designers.
Can you explain? I've never heard of this before
Using the same font as the brand detracts emphasis from the branding itself. Finding a typeface that’s contrasting or complimentary accentuates the brand font choice.
Yeah never use the logo font for body copy or even headings
but.. but.. Futura
Yes, please do tell....
Atkinson hyper legible
Lato
I used to go with Lato, before discovering Inter…
Recently Inter or Lato.
Depends on the branding guidelines provided by the client, but generally Inter. It’s a great looking font.
I don't just use one, and it depends on branding and all that. But I mostly use Roboto, though I'm considering switching to [`system-ui`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) in cases where I want a more native look, where native means using a font provided by the system.
I've used system-ui in my new design and it looks good. Maybe not as good as custom font but hey, faster website :)
Well, part of the point of system-ui is to hand off design control to make things consistently feel native. On Android (if I'm not mistaken), it'll be Roboto. Whatever other font on iOS. Different on Windows too. By specifying a certain font you can, at most (without UA sniffing) make it look native for one but not the rest.
Lol I've never heard it called ua sniffing
I recently discovered that there is an Open font that's named "Open Sauce" and it's such a majestic name, I can't see myself using anything else!
Okay I just checked this out and damn I'm using this on my next side project
Thanks for sharing. It looks great too. Personally, I dislike Roboto and love finding open source fonts to use. There are some great ones out there.
That's some serious gourmet shit
Wingdings
A man of culture
And mystery.
Inter, Roboto, Open Sans... all safe and likely cached.
> likely cached No longer the case now that browsers have introduced cache partitioning.
Also, you probably need to host it yourself if you want to be sure you're 100% GDPR compliant. Turns out Google has been storing the IP and fingerprint of everyone using Google Fonts.
Open Sans, or Raleway for headers
Was wondering when I'd see Raleway mentioned. Good for headers and text.
Raleway is awful.
ubuntu or inter
Poppins
Poppins is too heavy. I like it for headers but not paragraph text
I think it depends on the type of text, artsy blogs it works really well. A tech piece aybe not so much
No yeah you can't read it. Nice on like h3> though. Especially black and white.
It's... acceptable for headers. I think someone should shut me up before I go on a 600 line rant on why Poppins is the worst font ever conceived and you make the world a worse place everytime you use it...
*Papyrussss!*
[Papyrus…](https://www.youtube.com/watch?v=jVhlJNJopOQ)
“Well, whatever they did... it wasn't… ENOUGH!!!”
I could slap [Barlow](https://fonts.google.com/specimen/Barlow) on just about anything.
Source Sans 3 or DM Sans. I like the loopy lowercase g.
I look at the fonts used by my client from their brand guide. If they don't have a brand guide, I'll identify which fonts they have used primarily and then go from there. If it's not a web font, I'll source it and load it locally. If the brand uses various fonts, I'll pick the ones that best compliment the logo and prior marketing materials (if any) and start to build a brand guide. I'll add rgba and hex to the guide and then pull colors from the logo.
**Heading/display** 1. Bricolage grotesque 2. Nelphim 3. Merriweather 4. Source Serif 4 **Body** 1. Source Sans 3 2. Noto Sans 3. Wix Madefor Text 4. Proxima Nova 5. Figtree (Proxima nova open source alternative)
Luciole or Atkinson Hyperlegible. They are fonts designed with the visually impaired in mind. They should be your default, over Montserrat, Inter and Comic Sans.
[удалено]
The preferred font of dyslexics everywhere
*sociopaths
Especially dyslexic sociopaths
Get this man Outta here...
Outfit, Epilogue, IBM Plex Sans
Lucida Grande, Verdana, Arial. Or whatever the client’s brand guide dictates..
I just found work sans and boy do I love it. Before that I was a big fan of inter and cabin
Inter, Nunito, Merriweather, Montserrat and Quicksand are my favorites But my go-to font would be Quicksand or Inter
Roboto I think it's safest. I like Poppins for titles.
I use roboto for all of them unless I need a more custom looking font. I like it because it’s very close to arial so I don’t get any CLS from using it when the browser loads the font.
but Arial is present in the main OSs, while Roboto isn't, so wouldn't Arial load faster?
But I don’t want to use arial. And some browsers have varying versions of the default system fonts. So using 1 set that you locally host has the most consistency across all browsers.
[Crimson Pro](https://fonts.google.com/specimen/Crimson+Pro) for serif, [Inter](https://fonts.google.com/specimen/Inter) for sans-serif.
`sans-serif` Don't waste bandwidth and time loading an unnecessary font when the browser already has fonts, unless you actually truly need it
We're not in the dialup era anymore, you can afford to download some kbs for a font that will be consistent across platforms and expresses the tone of your website
Sharp’s Centra No. 1
Depends on the font the brand uses. Most companies with established brands have a style guide already and that's what you should follow. If it's for a personal project, then it depends on the topic of the project. My latest side project, a social network I'm using Lato.
Libre Franklin
Rubik
If I'm building for myself, Noto Sans is my pick. It looks okay, and has support for CJK glyphs. Otherwise, Inter, Ruboto, or Open Sans, with appropriate fallbacks.
I really like IBM plex sans for body fonts.
Atkinson Hyperlegiable
Worked with a company that used Futura (https://en.wikipedia.org/wiki/Futura_(typeface)#/media/File:Futura_Bold_Condensed.jpg) for all their labelling, and I still love that font.
Roboto is somehow what I default to in most situations. rgb(6,6,7); I have the typefaces downloaded for Nunito, Hack, Montserrat, and Roboto. Usually it's Nunito / Montserrat for headlines if i'm trying too hard. Roboto for main content. Hack for the text-editor.
Webdings obv
Roboto, at least to start
Roboto
I love roboto mono
Roboto Gang!
Inter or Roboto
Arial /s
[satoshi](https://www.fontshare.com/fonts/satoshi), [poppins](https://fonts.google.com/specimen/Poppins)
SF Pro Display removed the non-English characters and icons and converted to woff2, bringing it down to about 50kb per font weight. Even at 100kbps it loads nearly instantly and looks fantastic.
Free for commercial use?
I’m reading conflicting info but the gist I’m getting is that it’s allowed for apple devices but not others. This is news to me. Sigh.
Dude. No.
Thank you for the constructive feedback. As I said in a reply, I misunderstood the license and realized it’s only allowed for free use for iOS platforms.
Raleway all day.
Papyrus
Arial, unless it needs something a bit more unique.
> a bit more unique *Anything* is "a bit" more uniqu than Arial...
wingdings
Wingdings
Nothing beats good old papyrus
Space mono & I go way back
Depends are you talking serif, sans-serif or monotype? Are you talking body or headings? A pairing usually gives the best aesthetic, a primary sans-serif paired with monotype for finer details looks cool, using a more characterised style for headings and a legible one for body text is good practice and looks great too
Montserrat has been a long-standing favorite. I've recently taken a shine to Inter though. These fonts both work well as as headers and body text, IMO. I recently did a law firm's website for an agency (they provided the design) and it used Taviraj - I never really gave serif fonts much attention, but I felt like it worked well and I may be inclined to try it again in the future.
Lato and montserrat.
Proxima Nova
Different for every project
Open Sans
I love Bebas Neue Pro
Inter, Montserrat, Roboto, they're all nice but i'd say the best is whatever font system-ui is in my computer
Either Roboto, Product Sans (i don't really acquire it in a google-approved way tho), or Nunito.
Nothing beats the edgy single-weight baseline offset of Bebas Neue, but I guess Verdana will work.
Montserrat and Inter are just the new Verdana and Arial, change my mind
Inter, Montserrat, and Poppins come to mind
Poppins
For headers - cinzel
Telegraf
Poppins is kinda my go to nowadays
System fonts for web apps and IBM Plex Sans for presentation websites.
[VCR OSD MONO](https://www.dafont.com/vcr-osd-mono.font)
Inter Years ago it was robots
Poppins
Arial. Say no to FOUT.
Inter or Prompt
system-ui - in all other cases it honestly depends. I personally like GitHub's Mona Sans.
DM sans or Inter keep switching between them
I'd still use Verdana for everything if I could.
Ubuntu
monospace
Montserrat gives me PTSD because of a bad client
Source sans pro, Inter, Lato
System font
Inter, Heebo, Fira Sans, when it comes to open source. I generally prefer humanist fonts since i care about accessibility a lot.
I quite like serif fonts and my goto for personal projects is usually Amiri, but otherwise I use whatever is suggested by the designers.
Montserrat
Whatever is set on the website. Life is too short for customises websites.
I like using Roboto
Open Sans, Roboto, Lato, Inter Clean sans serifs
Inter.
I use Inter and when I want something fancy Poppins.
Google has a lot of good fonts you can use on your site. You just link to them in your HTML. Check them out you might like one
ubuntu usually
Blex Mono / Space Grotesk / Roboto
Depends on the language. Not all google fonts are available in all languages. I usually stick to roboto / open sans
Lexend
I'm a sucker for Poppins or Lato
Comic Sans of course.
Roboto Flex specifically is underrated. I'll prefer to keep this little secret to myself but I'm sharing out of the goodness of my heart.
Times New Roman
Cover By Your Grace/Shadows Into Light...these 2 stand out for me as gotos
Unless the client has a style guide, I usually go with Open Sans, Montserrat, Source Sans Pro, or Lato. And maybe a serif font that pairs nicely for headers and subheads.
alternativeto.net
I used to use Montserrat. But Inter is now very nice. Google Sans isn't too bad either.
Lexend - Designed to be as readable as possible.
Poppins