Not another friendly geometric sans! 😬

Hey folks, looking for advice on my very first typeface, Blueberry Sans 🙂


DESIGN BRIEF

A clean yet friendly geometric sans serif font designed for user interfaces. While not stylistically innovative, it should nevertheless be high-quality – even, well-spaced, and with some energy. Blueberry Sans will be open source, and my ultimate goal is to give designers another high-quality free option where they may have reached for, e.g. Montserrat or Karla.

Blueberry Sans is multi-faceted, each facet contributing to its usage. The bolder weights are plump and ripe. The thinner feel are simple, round, friendly. The uppercase has a little more punch, a little less smile.

I teach UI design, so I also want to create a font that I can recommend to my students – free, good across a wide variety of situations (which almost certainly says neutral sans), no details 


SPEC

Weights: light, regular, medium, bold, extra bold, and black (no thin weight since they're much less useful in UI design) – currently 2 masters.

Starting with basic Latin characters – I'd rather get some feedback before finishing out the broader character set.

Ultimate goal is to be accepted on Google Fonts.


DEFINING CHARACTERISTICS
  • Simple, geometric letterforms
  • Energetic, almost exaggerated curves in letters like /t, /f, /y
  • Rounded counters, especially in bolder weights, give off a friendly vibe (I almost designed many of these glyphs "inside-out" – and also, does anyone know if this same idea is how the typeface Circular got its name? đŸ€”)

PARTICULAR PROBLEM AREAS

Everyone here has more experience than me, so I defer to you. But here's some of the issues I'm seeing
  • Since I've had to adjust stroke thickness in the "busier" black letterforms, they often interpolate to the bold having stroke thicknesses that feel slightly uneven – e.g. /a, /g (should I just use a third master for /a? Is this common?)
  • /2 feels downright ugly
  • Do the arched letters (/h, /m, /n) need to match the rounded letters (/a, /e, /o) more?
  • A lot of the black letterforms feel slightly wrong – like I'm making stroke weights equal where they should be unequal, or vice versa. Is there some general principle of designing bolder masters I'm missing?
  • /s and /S are, of course, tricky – perhaps too narrow, with uneven curves (I think the Speed Punk tool would help here, though I can't for the life of me get it working)
You can also download the font download the Glyphs file and font.

Thanks in advance!




Comments

  • Craig EliasonCraig Eliason Posts: 1,129
    Yes, I think the biggest issue is the boldest weights should be willing to narrow strokes more to make joins or dense letters work better. And yes, this will require some intermediate masters. If you're on Glyphs 3, look into how Intermediate Layers work (they'll essentially work as an additional master but only need to be made for glyphs that need them). Though pushing this black, you may just find that an entire master is needed. Work on consistency: Look at the /mp/ in Junior Olympics. The thinning going into m's left stem is different than the thinning of the second shoulder going into the middle stem, and those are both different from the thinning of the p's bowl as it heads into its stem. Notice too that the top extremum of that p bowl is helpfully scooted away from the stem (could maybe even still be moved a bit rightward), but the extrema of the m humps seem farther left.
    Are S/s symmetrical? Their bottoms could be bigger to make them more stable and right-side-up-looking. Esses need to be thickest in the spine. Ampersand also looks top-heavy and droops a bit.
    Lowercase proportions are good, though v and y and probably w are wide. In uppercase, B is narrow, C wide, V wide, and J is going to open up too much space on its left side. Some stroke-weight consistency issues in diagonal letters.
    I'd work more on getting g to match your descender depth of the other letters (right now because it's dark and descends further, it looks a bit like it's just mistakenly scaled up). One secret is that you can cheat the bottom of a single-story g's bowl up above the baseline if it helps find room for the tail.
  • Thomas PhinneyThomas Phinney Posts: 2,030
    • Since I've had to adjust stroke thickness in the "busier" black letterforms, they often interpolate to the bold having stroke thicknesses that feel slightly uneven – e.g. /a, /g (should I just use a third master for /a? Is this common?)
    Yes, it is common. Or use one version for all the interpolated weights, and a different version for the heaviest.
    • Do the arched letters (/h, /m, /n) need to match the rounded letters (/a, /e, /o) more?
    Yes, this is one of the more obvious issues. Look at how heavy the top of o-p-c-s are compared to h-m-n. Just move the inner counter of h-m-n down a bit, for one thing.

    Also, the vertical strokes of /m are weirdly condensed in the black weight. They should look the same thickness as /n.
    • A lot of the black letterforms feel slightly wrong – like I'm making stroke weights equal where they should be unequal, or vice versa. Is there some general principle of designing bolder masters I'm missing?
    Even in a nominally monoline design, (1) the horizontals need to be a bit thinner than verticals, and (2) in a complex glyph, you sometimes need to decide where to carry the weight
    One obvious issue is that you have made the top and bottom apertures the same size (or to close to the same size), and that makes it look topheavy. Make the bottom aperture a bit larger and the top a bit smaller, just a little, until it “looks right.” This sometimes also involves making the top just a tad to the right of centered.

    Also:

    The top right of /r can be heavier. More than you think.

    WIth the four diagonals of /W and /w they do not need to be all mathematically the same. You can take some off the inside ones and add it to the outsides.

    /h and /n seem narrower than /u. If they do mathematically match, it is because of a known optical effect where the opening on top seems bigger. Make the /h and /n LOOK the same, even if this means they are slightly wider.

    In general, the verticals (including vertical round bits!) need to be heavier than the horizontals to “look” the same weight. It feels like either you have not done this enough, or not at all.

    The S/s can be an exception: either one can do the conventional weight distribution you have, or one can put the max weight on the spine and let it lighten up a bit as it comes into the curves and top/bottom.
  • Hrant H. PapazianHrant H. Papazian Posts: 2,015
    First things first:
    What's the intent? Unless it's a learning exercise or a generic workhorse meant for internal use, to be successful out in the world it needs to stand out from the crowd in some way.
  • Craig EliasonCraig Eliason Posts: 1,129

    WIth the four diagonals of /W and /w they do not need to be all mathematically the same. You can take some off the inside ones and add it to the outsides.
    Or take from 2 and 4 and add it to 1 and 3.
  • John SavardJohn Savard Posts: 802
    to be successful out in the world it needs to stand out from the crowd in some way.

    Well, for one thing, it's open source. So it's free as in beer as well as free as in freedom.
    For another, it's both humanist and geometric at the same time. Of course, several other typefaces have that characteristic, but it is currently fashionable.
    But in addition to this fashionable combination... it looks a whole lot like the enormously popular Helvetica, which is neither.
    Unfortunately, I have to admit that despite these advantages, it is still unlikely that Blueberry Sans will save the world from Helvetica, despite the fact that some here have said that the world does need to be so saved.
    I rather like Helvetica, as long as it's used where it belongs - in signage. If one wants more character, there's always Akzidenz Grotesk.
    Although Telex is interesting, I haven't yet found anything on Google Fonts that I'd recommend as a substitute for Lucida Grande (or, for that matter, Stone Sans) though. Not even Lato.
  • Hrant H. PapazianHrant H. Papazian Posts: 2,015
    edited June 9
    I guess being libre might indeed give it more raison d'ĂȘtre. But aren't there enough similar libre fonts too? I'd rather give people new options. Maybe by supporting some minority languages the existing similars don't.
  • Vasil StanevVasil Stanev Posts: 628

  • Christian ThalmannChristian Thalmann Posts: 1,636
    edited June 9
    Blueberry Sans will be open source, and my ultimate goal is to give designers another high-quality free option where they may have reached for, e.g. Montserrat or Karla.
    Just a heads-up: Blueberry still has a long way to go toward being «high-quality», and until then designers will likely just keep reaching for Montserrat. (Karla looks quite shoddy to me; you might overtake it reasonably soon.)
    Doesn't mean you won't get there — after all, it's the learning curve all type designers had to climb at one point in our lives — but it's a steep climb, and a low-contrast sans is one of the higher peaks to attempt, due to its sensitivity to curve quality.
    But Hrant does have a point insofar as going for a more idiosyncratic design in a less-saturated niche might is an easier way toward a first release.
  • DrawcardDrawcard Posts: 12
    I think you're off to a good start Erik, if anything I think the bold probably needs a bit of work just to remove some of the clogging that's happening around joints. For example with /6/ and /9/ you might want to add a little taper into the join, so it has a smoother flow (and also adds a little more breathing room in the shape)

    I had a quick play around in your glyphs file to demonstrate: (before + after)

    I've highlighted the nodes that I've nudged around (with your original curve in the background layer):



    Also, do you have a particular type size in mind? Eg would you want to optimise this for small screen UI text, vs large display size?
  • Christian ThalmannChristian Thalmann Posts: 1,636
    I've highlighted the nodes that I've nudged around (with your original curve in the background layer)
    You'll also want to move the top on-curve point of that bowl a bit to the right (without moving the handles, so alt-move) to relax the abrupt change of curvature and remove the apparent bump there.
  • Florian PircherFlorian Pircher Posts: 41
    edited June 9
    I teach UI design, so I also want to create a font that I can recommend to my students
    For UI work, consider clearly distinguished glyphs such as capital I and small L. Either reshape the glyphs (capital I with serifs and small L with a hook) or make the height difference more pronounced. Currently, the two look very similar:



    You can also offer more distinguished forms as alternative glyphs, as is done in the polarizing Mac system font SF. Glyphs uses the high-legibility alternates of SF in many places, such as when displaying glyph names:



    The second approach is error-prone since the UI has to switch fonts in all kinds of places which is tedious and not always easily doable. Suppose the UI displays passwords, URLs, random identifiers (or glyph names :wink:) legibility must be guaranteed since the context may not help to identify a glyph. SF, for example, has legibility alternates for 0/O, I/l, J with serif, open 4, 6, 9 (which normally can look like an 8 in small print).

    Looking at the path construction, the capital I is perfectly straight, as are most verticals, but the small L is not. You can use a plugin such as Show Angled Handles or Red Arrow to spot these deviations.



    The at sign is made using individual paths. If they connect directly, I would consider merging them into one single path.



    Merged:



    There is also a kink in the bottom of the at:


    Use smooth nodes (displayed as green discs) in these cases. Again, something like Show Angled Handles can help. Some other notes: do not place marks manually; use anchors. Tabular numbers are often used for UI work. The arrows are nice, I want to see more :smiley:. Many curved paths look uneven; try to get them balanced (you may use a plugin such as Speed Punk for guidance, but don’t follow its visualization to a fault); the glyphs /e, /a, or /J would be a good start. The /comma is very close to the /period, namely in light weights. You don’t need the /CR or /.null glyphs; they are not used by software anymore.

    As for “raison d’ĂȘtre”, good language support and solid OpenType features can elevate any font; the bar is still regrettably low in those departments. But first, I would focus on polishing the existing glyph set to form a solid foundation on which to build further extensions.
  • Chris LozosChris Lozos Posts: 1,344
    Geometry is not always the solution
  • Nick ShinnNick Shinn Posts: 1,712
    edited June 9
    What purpose does reinventing the wheel serve?
    Look at the criticisms and do the opposite of the recommendations.
    “What the public criticizes in you, cultivate. It is you.” —Jean Cocteau
  • John SavardJohn Savard Posts: 802
    What purpose does reinventing the wheel serve?
    Look at the criticisms and do the opposite.
    “What the public criticizes in you, cultivate. It is you.” —Jean Cocteau

    On general principles, usually I disagree with such advice. Expert advice and criticism can be very helpful and useful in improving the quality of a typeface.
    However, in this case, I noted very little, if anything, to criticize in this typeface.
    It seemed that it did not run into problems in the bolder weights any more than, say, Lato, so I did not connect with one of the first criticisms made. I didn't see that the letter W ran into problems requiring a drastic solution to reduce its symmetry.
    The only thing about it that could be considered a negative from some viewpoints is that to me, despite a slight dusting of its intended characteristics as "geometric" or "humanist", for the most part, to me it looked like it was a reinvention of the wheel already... it looked like a slightly modified Helvetica.
    This, of course, might mean I just need to make an appointment with my optometrist.
  • DrawcardDrawcard Posts: 12
    To me, the aesthetic of Blueberry is reminiscent of Google's Product Sans (type specimen here) which is slowly being rolled out everywhere as a UI font in their products - I think there's opportunity to develop an open-source alternative to that with all the improvements mentioned.

    Incidentally, it looks like Product Sans doesn't do a good job of differentiating uc/I/ and lc/l/, which surprises me:



    Inter is another font worth studying too, it has a bit more of a Swiss / grotesk influence but the underlying decisions in its development are interesting.

    IMHO I don't think you're reinventing the wheel if you can identify wonky bumps in other wheels and fix them. There's are always going to be flaws in even the most 'perfect' designs that are out there, and there's opportunity for someone to come in make improvements.

    I am keen to see how Blueberry evolves further!

  • Hrant H. PapazianHrant H. Papazian Posts: 2,015
    edited June 10
    Drawcard said:
    I think there's opportunity to develop an open-source alternative to [Google's Product Sans]
    BTW isn't it some biting-an-arm-off irony that the grand doyen of libre type switched their branding from libre to proprietary type...
  • John SavardJohn Savard Posts: 802
    BTW isn't it some biting-an-arm-off irony that the grand doyen of libre type switched their branding from libre to proprietary type...

    Well, they must have heard your explanation of how IBM had made a terrible mistake with Plex...
  • Hrant H. PapazianHrant H. Papazian Posts: 2,015
    @John Savard Hah. Far more likely that we both got the idea from the same place: common sense.
  • Marc OxborrowMarc Oxborrow Posts: 180
    edited June 11
    [deleted to not derail discussion]
  • Did someone click Disagree on every single post in this thread...? 🙄
  • Hrant H. PapazianHrant H. Papazian Posts: 2,015
    As well as so many others...
  • Paul HanslowPaul Hanslow Posts: 77
    Did someone click Disagree on every single post in this thread...? 🙄
    The admins are aware of this and we're looking into how/if these unwarranted disagrees can be removed. Please bear with us as we're all a little bit squeezed for time at the moment. 
  • DrawcardDrawcard Posts: 12
    edited June 15
    Another small suggestion I've been meaning to make - regarding the /5/

    The mid point of this glyph seems a bit too evenly placed, and I would suggest raising the mid point slightly to open up the bottom a little more - and also do a little bit of tapering around the elbow of the /5/

    (before + after + comparison outlines)

  • Hrant H. PapazianHrant H. Papazian Posts: 2,015
    @Paul Hanslow Far more important would be to mend the torn threads in the fabric of our discourse.
    https://typedrawers.com/discussion/comment/53561/#Comment_53561
Sign In or Register to comment.