Font Bikesheddding

General
1

Hi there. So lately web fonts are pretty cool for making things look purdier; I wanted to discuss OTS’ choice of them.

The style guide mentions HvD Pluto, however this is a proprietary font, and I don’t see it used anywhere. Luckily there are heaps of awesome fonts around these days that are open source or free to use; so I think we can make use of those instead without worrying about licensing issues.

I’ve noticed that instead almost the entire http://www.opentechschool.org website is in Montserrat. I’m not 100% what font is used for the logos as they have been rasterized to image (Pluto?).

Most Heading and Logo type I’ve used has been in Montserrat, and I’ve also continued to use it as the defacto tutorial heading font.

On the blog, it seems Proxima Nova is attempted to be used but the Adobe TypeKit js for it no longer runs.

I’d like to point out both Python Beginners and Html-Css-beginners tutorials make use of Open Sans for their body, and the former currently uses Source Code Pro for monospace (font for code).

One of the reasons Open Sans is great as a body font, apart from being clear and easy to read, is it has very many symbols, which should let it work nicely on translated text in european languages. Some contenders are PT Sans and Source Sans Pro.

So my basic premise is this: it would be nice to standardize around a good set of fonts (e.g Heading, body, monospace) and adopt those around our sites. I think wide usage like this definitely helps build a brand look in people’s minds.

Some of the best places to find free fonts atm:



http://openfontlibrary.org/

http://html.adobe.com/edge/webfonts/ (note, not typekit proper, that is basically paid)

Note that a font needs to be under a permissive license such as OFL to be truly free to use however we want.

Desirables (imho):
Heading font - Looks awesome. Used for logos and stuff (montserrat current defacto)
Body font - easy and non-tiresome to read, works in many languages (I propose Open Sans, PT Sans also looks good)
Monospace font - makes our code look great (Source Code Pro looks great, there are a few others)

There is also the issue of just normal prose text could use a serif font instead, otherwise you could use sans everywhere. For instance, maybe a serif font would look good on the blog.

I might be opening a barrell of worms, but changing the header could also be used to change the look of the OTS Logo currently. One suggestion is Cantarell which I looks great in this role.

Anyway, I’d like to hear people’s thoughts on the matter, what they think about standardizing on a set of fonts, and any opinions on which!

Cheers, Matt

2 Likes
2

I agree with what Matt’s saying: establishing a style guide which uses open typefaces would be a good idea, especially as more and more people join us. I ran into the Pluto/Montserrat problem when I was trying to make a logo for the OTS Melbourne Facebook page, and used Montserrat because it was freely available.
I don’t have any comments to make on specific typeface selection, although I think the ones that have been highlighed in the post above are all good candidates. However, I do think that a clear and open standard is definitely needed, not only for the OTS logo but also for the more nitpicky aspects of workshop page design.

3

Thanks for raising this point again, @matthew .

Very early on we said, we needed to switch to Open Fonts (like truly open) but we never got around to actually do it. Maybe @Kriesse, who made the initial branding as well as the latest design for the website, has a take on which ones to take?

While we are on it, I’d also like to add another point to fonts with the leaner material. You already mentioned that some still use the broken Adobe TypeKit js, but some also simply don’t load if there is no internet connection because they hang loading fonts. Which is really nasty if you gave this offline-version to the person because the online version didn’t work. So, I’d like to add that the learning material (fonts) should also work offline without any restrictions or performance problems (which also requires them to be freely distributable).

4

I could see two solutions to that:

  • include a custom font stack with each project, so they can refer to those files locally whether online or offline
  • Grab custom fonts from online sources, but also decide on a set of common fonts that 95% of people have, that still looks decent when fell back on for offline viewing. e.g.
5

I think the choices @matthew proposed are excellent, it might make sense to switch to an open font for the OTS logo as well (so you can always have the logo without needing to use an image), but in that case I think Montserrat is a better option, it looks extremely similar to the current one so most people won’t even notice the switch :wink:

Question: is it possible to (legally) download and install locally these web fonts we’ve mentioned? It can be useful in certain cases, for example when preparing presentation slides.

6

Yes. You can chose your collection of fonts and then click “use”. That will give you an “down arrow” button on the top-right for downloading them as ZIP file (which you then can extract and import into your system fonts directory [on mac via double clicking afaik]). And yes, all Google Web Fonts are Open in the sense of can be redistributed without any licensing issues ever. (license legally speaking download and distribute on usb stick and hosting them to be included in the website are not different).

@matthew, I agree with @Lorenzo. The proposed solution sounds very good. Montserrat might actually be the better choice for the logo indeed. But if we only need it for that, can we keep the foot-print low by including just the needed characters of the font?

7

Not sure what you’re trying to say here (include where?), but the idea is to keep using Montserrat for headlines (titles) as well.

8

@Lorenzo, if it is for headlines, too, forgot I said anything.

9

Montserrat, Cantarell and Open Sans are all under the SIL Open Font License, which allows you to use and distribute them freely under it. Online or offline!

Source Code Pro is under Apache License which is similar.

Essentially we can use these freely online or offline in any medium, this is true for practically all of Google’s web fonts.

My thoughts currently are that I like Montserrat as a Logo font, as I find it a rather friendly face to present OpenTechSchool with, but I’m not sure how well it works as a heading with Open Sans.

10

Thanks everyone for picking up this topic, as @ben mentioned we discussed this early but then never got to continue working on the styleguide and a well-considered font-stack.

I think the criteria for good fonts @matthew listed are exactly on point and I’d follow his suggestions:

  • Heading Font: Open Sans Bold (700)
  • Body Font: Open Sans Normal (400)
  • Monospace font: Source Code Pro

Here’s a quick test drive screenshot of Open Sans in action: http://cl.ly/image/1o0i1Q1Q1F20
Needs more finetuning, but I think it will work well.

For the logo, I see two options:

  1. Keep the current logo (Pluto), and make sure we do a better job at spreading the vector files and provide guidelines how to use them. I have a license for the font and created the logo, and of course give OTS permission to do whatever we want with the vector file, forever – Sadly that still doesn’t make the font open source and keeps us in a licensing situation. I think branding-wise it’s better to stick with the established logo and develop rules how and when to use it (E.g. which fonts should be used if a city name needs to be added to the OTS logo).
  2. Use an open font for the logo – I like Montserrat, too, but as the current logo is already widespread and works well so far, I’d like to give this some more thought. Whatever font alternatives we pick, I think the logo should be typeset nicely once, and then be shared and used as a vector file in order to avoid blurring the branding.

I’m happy to help implementing any of those changes, let me know what you think!

1 Like
11

Do we have a Monserrat draft somewhere?

I’d personally like to have an open font, just for the sake of allowing others to easily reuse it in all the local chapters without having to buy the licence (I can see cases, where a vector might be insufficient for them). I see the point of having to replace it everywhere but if the design isn’t too far off the current one I don’t think anyone would really notice, especially since the amount of printed (and non-traceable) versions of it are still very low. If we have the new design in place it is a matter of a day or less to switch the old logo with the new one - I volunteer to take care of this. And actually as we can’t set the font on the meetup groups (example), we have already a few versions off without people having problems recognizing the brand.

Short: out of practicality and ideology reasons, I’d prefer an open font. And for branding reasons, I’d prefer a switch rather sooner than later.

12

Ok, convinced :slight_smile: I updated the Styleguide a bit to mention this discussion and that the fonts are currently being reviewed. I created a new branch to try out Open Sans and other typography changes:

Will also give the logo a shot in the next day and try out some open font alternatives.

1 Like
13

In my experiment on http://ivoz.github.io/ots-materials/

I have used Montserrat for the OTS Logo and box headings;

Open Sans for the section headings and ‘Learning Materials’ subheader;

Open Sans for the body.

I think Open Sans can look really nice in its normal weight in headings as well. Cantarell looks good as a heading font either normal or bold.

I’m not sure how well Montserrat works with Open Sans generally as a header/body combo. It looks great on the logo, but I’m not so sure elsewhere.

1 Like
14

Hi, I’m editing the Talk&Play videos.

Please use open fonts or rename the organization. :wink:

Shame that matthew’a demo is down.

15

That’s now up at http://learn.opentechschool.org

If you need a quick logo font for now I’d suggest just using montserrat.

16

Agreeing with @Kriesse, I’m suggesting we use these canonically:

  • Logo: Montserrat Bold (700)
  • Heading: Open Sans Bold (700)
  • Body: Open Sans Normal, Italic (400)
  • Monospace: Source Code Pro (400)

Here is a handy Google Fonts link to this collection, or an online css reference:

<link href='http://fonts.googleapis.com/css?family=Source+Code+Pro|Montserrat:700|Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'>

@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro|Montserrat:700|Open+Sans:400italic,400,700);

(why is there word wrapping in code blocks, discourse?)

If anyone disagrees, please speak now or forever hold your peace, yadayadayada

2 Likes