13
6 Comments

FontDiscovery 16: Geometric Font Jost & Tips on How To Use It

Hi there! My name is Hua. I am a designer and bootstrapping founder building Typogram, a brand design tool. As part of running Typogram, I create a weekly digestible visual guide about a new font with examples and case studies to help founders, creators, and makers step up their design game in branding and marketing.

Today I want to share Jost, a geometric sans serif that communicates cheerfulness.


img-sample-of-Jost
img: sample of Jost


From Futura to Jost

We can’t talk about Jost without mentioning Futura. Futura is a Bauhaus-inspired geometric sans serif. Bauhaus is an influential art and design movement that embraced simplicity, bold lines, and geometric shapes. Futura exhibits these qualities through its letterforms. The circular letters, like "O", and triangular letters like "A" are nearly perfect. The strokes making up the letters have very little contrast, much like bold, solid lines of Bauhaus.

Jost is inspired by Futura but designed with the digital era in mind. It retained the geometric qualities and added additional design elements, such as the contrast in thick and thin strokes, for more favorable usability on digital screens.
img-futura-example
img: left– The commemorative plaque for the 1969 moon landing is typeset in Futura. source: NASA. right–movie poster for 2001: a space odyssey typeset in Futura

Font Details

Jost is highly geometric, like Futura. If you look at the “O”, it’s almost a perfect circle. In addition, Jost has alternate style characters for the letter "a" to give you more options when creating logos. It is also under active development as a variable font, a cutting-edge font technology where you can store multiple variations of a type family into a single font file.
img-font-detail
img: left – O’s in Jost are nearly perfect circles. right – “a” is available in both single-story and double-story styles.
img-font-detail-2
img: Jost variable font version. You can interpolate weight and italic slant so you can choose the amount of bold and slant in the letters. This is supported on most browsers. source: indestructibletype

How can we use this for logo and branding?

There is friendliness and perfection to this font. The nearly perfect geometric shapes like “O” give it extra wholesomeness and joy. It is excellent for a brand that looks to be happy and cheerful.

How can we use this for marketing?

The Light and Regular weights of Jost are very lovely. It can be fun to use the Light or Extra Light in large sizes for emphasis in your marketing graphics.

Jost's many weights also make it a good candidate for many different types of projects. It can support a more complex information project, like a landing page. If you are thinking about using Jost for text-heavy projects, be mindful that the more geometric aspect of Jost will jump out of the page occasionally.
img-use-detail-1
img: Jost Extra Light looks nice using a large size pairing with smaller bold
img-use-detail-2
img: an example of combining different weights of Jost
img-use-detail-3
img: Jost as a system font; source: indestructibletype

Quick overview

⭢ Font Details

  • Alternate lowercase “a”
  • Long ascenders and descenders
  • Interrobang (maybe you can find an excellent way to use it in your brand?)
  • Variable font available
    img-font-detail-1
    img: interrorbang is an unconventional punctuation mark that combines question mark and exclamation mark

⭢ Logo & Branding

  • This font is cheerful. Its geometric shapes jump out at you.
  • It's perfect for a brand that emphasis on shapes, modernity, and happiness.

⭢ Typography System (marketing, presentation, and website)

  • Have enough weights to support more complex projects
  • It can pair with Source Serif Pro or Piazzola
    img-pair-detail-1
    img: sample of Piazzolla and Jost being used together

Cautiously avoid

Making line-height too tight. Jost has large ascenders and descenders and will look much better with relaxed line-height.
img-font-detail-6
img: ascender and descender of letters
img-use-detail-4
img: left– Jost with tight line-height. Because the ascenders and descenders are long, when the line-height is tight, the line space between texts gets tighter than normal; right–Jost with relaxed line-height.

Creative prompt

Can you create a visual using Jost?

Phew, you made it.

Jost is available here.
img-info-detail-1


I share tips like this every week, subscribe if you feel like!

You can also read previous issues at Typogram's blog.

  1. 2

    Same here, enjoying these too!

    Stupid question, but how do I „trigger“ an alternative of a letter, like in your example the alternate „a“?

    1. 1

      Thank you and not at all! it's super hidden. Usually, it's buried inside the text or character panel of the design software you are using. You have to look for and turn on options like "alternate glyph" or "stylistic sets."

  2. 2

    Amazing post, I love this format!

    1. 1

      thank you so much, Steff! glad to hear that : ) I worked on the format for a while, iterating on feedback from subscribers. still lots of room for improvement I think!

  3. 2

    Great post, Hua. I enjoy reading these.

Trending on Indie Hackers
I will promote your startup to 50K+ people 85 comments I made Session, a productivity timer that makes $5K/month in net profit, AMA! 37 comments Who uses Vue? What makes it better than React? 21 comments Only 30 days! We finished a great Etsy products research tool 10 comments #1 on Product Hunt with an open-source project 8 comments I sold my bootstrapped sharing economy platform for RV camping for 7 figures. AMA! 8 comments