Nunito, the rounded raisin

[Jacques Le Bailly]

Hi all,

The next few weeks I will be working on Nunito. 

Nunito is a rounded Neo Grotesque font designed by Vernon Adams. Nunito is a Sans Serif with rounded terminals. According to the description on Google fonts, Nunito has been designed mainly to be used as a display font but is useable as a text font too. The overall character is good and somewhat vibrant and/or lively.

I have made a deck for Nunito and my proposal how to improve Nunito.

https://docs.google.com/presentation/d/1ZdkBTLfAfKsN2ACSBRVrBiDLWJIqGp1HJYjlm19M7U4/edit?ts=57a488ec#slide=id.g15a03d75bb_0_15

On this thread I will post updates on the design process.

[Dave Crossland]

Hi

Thomas had a great idea to use fontreach to check out popular (Alexa Top 1M domains) examples of the fonts in use, and I just  checked http://www.fontreach.com/#font:Nunito and found these (work safe! ;) sites using Nunito. 

http://www.girlsgogames.com

http://www.topuniversities.com

http://www.meetme.com (http://www.meetmecorp.com)

As you can see, it is used in headlines but it is also used extensively in body text too, so I think moving the design more towards display type, and respacing tighter, could go too far. 

On the other hand, resolutions (especially of mobile devices which make up a huge percentage of web page views in 2016) are going up up up and so many of the fonts released in 2010-2012 like Nunito were intentionally spaced a little loose to account for the lower resolutions of the day. 

So, I'm not offering specific advice about if your sketches are too tightly spaced; my point is only that I'd like you to not move the design too far towards display and ensure it is still working well for these sites in text. 

From your sketches (reposted below) I think your spacing is better, but perhaps just a tiny bit too tight in the Black. The Thin looks good.

I think generally its better to err towards looser spacing as typographers are accustomed to tracking in at larger sizes, than thinking to track out at smaller sizes. 

And going back to the websites, I have a good way to test work in progress in just this 'live' situation! :)

Sadly http://somadesign.ca/projects/fontfriend/ no longer works, but it made it easy to test a font on your machine in any webpage - https://vimeo.com/8243800 shows it off. 

I wondered if there was anything else - http://typewonder.com is a more slick approach, but doesn't allow you to toggle the fonts in use on the page, or add local fonts. (https://webfonter.fontshop.com/?url=http://www.meetmecorp.com/ is a FontShop one but seems to use less reliable techniques; it also doesn't allow local fonts to be used - so I just fixed it :) 

You can grab the bookmarklet link from in the top text of https://davelab6.github.io/font-friend/ and it should then work as explained at the end of the video :) 

The font data never leaves your computer so you can use this little tool with peace of mind :) 

[Jacques Le Bailly]

Hi Dave,

Thank you for good idea/insight ! I will takes this in account when designing Nunito. I will not make the spacing as tight as I proposed on my deck.

But what about the NSFW sites ? :)

YAK

Op 11 aug. 2016, om 06:10 heeft Dave Crossland <da...@lab6.com> het volgende geschreven:

Hi

Thomas had a great idea to use fontreach to check out popular (Alexa Top 1M domains) examples of the fonts in use, and I just  checked http://www.fontreach.com/#font:Nunito and found these (work safe! ;) sites using Nunito. 

http://www.girlsgogames.com

http://www.topuniversities.com

http://www.meetme.com (http://www.meetmecorp.com)

<Screen Shot 2016-08-10 at 10.16.16 PM.png>

<Screen Shot 2016-08-10 at 10.16.42 PM.png>

<Screen Shot 2016-08-10 at 10.17.31 PM.png>

As you can see, it is used in headlines but it is also used extensively in body text too, so I think moving the design more towards display type, and respacing tighter, could go too far. 

On the other hand, resolutions (especially of mobile devices which make up a huge percentage of web page views in 2016) are going up up up and so many of the fonts released in 2010-2012 like Nunito were intentionally spaced a little loose to account for the lower resolutions of the day. 

So, I'm not offering specific advice about if your sketches are too tightly spaced; my point is only that I'd like you to not move the design too far towards display and ensure it is still working well for these sites in text. 

From your sketches (reposted below) I think your spacing is better, but perhaps just a tiny bit too tight in the Black. The Thin looks good.

I think generally its better to err towards looser spacing as typographers are accustomed to tracking in at larger sizes, than thinking to track out at smaller sizes. 

<Nunito Black.png><Nunito Light.png>

And going back to the websites, I have a good way to test work in progress in just this 'live' situation! :)

Sadly http://somadesign.ca/projects/fontfriend/ no longer works, but it made it easy to test a font on your machine in any webpage - https://vimeo.com/8243800 shows it off. 

I wondered if there was anything else - http://typewonder.com is a more slick approach, but doesn't allow you to toggle the fonts in use on the page, or add local fonts. (https://webfonter.fontshop.com/?url=http://www.meetmecorp.com/ is a FontShop one but seems to use less reliable techniques; it also doesn't allow local fonts to be used - so I just fixed it :) 

You can grab the bookmarklet link from in the top text of https://davelab6.github.io/font-friend/ and it should then work as explained at the end of the video :) 

The font data never leaves your computer so you can use this little tool with peace of mind :) 

--
You received this message because you are subscribed to a topic in the Google Groups "Google Fonts Discussions" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/googlefonts-discuss/eIWeNyhXal0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to googlefonts-dis...@googlegroups.com.
To post to this group, send email to googlefon...@googlegroups.com.
Visit this group at https://groups.google.com/group/googlefonts-discuss.
To view this discussion on the web visit https://groups.google.com/d/msgid/googlefonts-discuss/CAEozd0zqjTgu0nJGL9g%2B6oyoake9nU0HgSQJUg5JGriNZSiuaA%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.

G O O G L E · T Y P E · M A I L

Jacques 

[Jacques Le Bailly]

Today I am working on Nunito.

The glyphs file that was prepared by Marc is built with three masters, Extra Light, Regular and Black. I will dump the Regular and work on the remaining two. After refining/reworking both I will test if a new Regular master will be needed. My starting point will then be an instance with the same approx. weight as the yet still existing Regular.

[Jacques Le Bailly]

Here are the first steps into Nunito. 

First thing I did is to throw away the regular master, so now I work with two extreme weights as master. 

For now all all stems have the same thickness and all the round forms have the same thickness. 

It will have to be optically corrected. Especially in the Extra Light master. I will proof and test it on a high resolution print in a later stage.

[Jacques Le Bailly]

Today I will continue working on Nunito. I have worked on the lowercase characters and now start on the uppercase.

Here is my latest work on Nunito Extralight.

Here is my latest work on Nunito Extralight.

Here some screenshots of the original:

[Jacques Le Bailly]

I made an overlay to show the difference between the old and new Nunito.

Red is new, blue is old.

[Jacques Le Bailly]

Today I will continue working on the uppercase. The lowercase are done for both extreme weights. When the uppercase is done, I will make extended printed testsheets to make minor corrections.

[Jacques Le Bailly]

Tonight I finished the first round of upper- and lowercase. Tomorrow I will print and check the color, clogging and will probably do some minor proportions changes.

[Jacques Le Bailly]

Dave asked me to test another spacing approach in the future. He made me curious :) But being me, I am skeptical.
Because I might have to make changes in my workflow and philosophy. I don't want to end with a collection of well spaced forms. A mistake made by many. Every design has a rhythm, chaotic, calm or …! But it should run through the whole typeface. Sometimes one can decide to break that rhythm on purpose. But only for a good reason. A typeface is like a theater piece. Everything is important and has a role to play. The cardboard tree in the left corner is maybe less important than the main character, but still needed on stage.
Characters are made by interaction of the positive and negative form.

But I am also curious to new ways or tools, which might give me new or other insights. Design is a discourse.

[Dave Crossland]

On 16 August 2016 at 18:00, Jacques Le Bailly <fonth...@baronvonfonthausen.com> wrote:

Tomorrow I will print and check the color, clogging and will probably do some minor proportions changes.

Nice! Please do add PDFs of your test docs to the repo (https://github.com/Fonthausen/NunitoFont)

[Jacques Le Bailly]

Today I worked on balancing the strokes.

My original starting point was the work file from Vernon Adams. I noticed that the uppercase characters where far too heavy when compared to the lowercase. So I created an extra file with only uppercase characters. I made instances with the right weights and copied them back in my original file.

[Jacques Le Bailly]

My original starting point was the work file from Vernon Adams. I noticed that the uppercase characters where far too heavy when compared to the lowercase. So I created an extra file with only uppercase characters. I made instances with the right weights and copied them back in my original file.

Here are some after and before screenshots of the uppercase with their new weight.

Light master before:

Light master after:

Bold master before:

Bold master after:

[Jacques Le Bailly]

Nice! Please do add PDFs of your test docs to the repo (https://github.com/Fonthausen/NunitoFont)

Here are two PDFs with some test and sample text. They will be in my repo when I commit it tonight.

[Jacques Le Bailly]

Amongst other things, I worked on the numerals yesterday. They have been done in both masters. Notice in the pictures, that CapHeight=AscenderHeight=NumHeight. This is part of Nunito’s design.

On the design deck of Nunito we mentioned, that we want to try to make an Oblique to Nunito. This is still one of the goals, but it depends on the time we will have at the end. This is a three weeks project and a lot has to be done.

Light Num width is 570 units, Bold is 600. I am keeping the option open to make all 600 units wide.

[Jacques Le Bailly]

Today I go to do close combat design on the accents in both masters.

Tomorrow I will make the .case accents and start working on the symbols. After that I will do a fine combed revisit of the spacing and finish of with kerning. That will keep me busy in the next days :)

[Jacques Le Bailly]

Today I go to do close combat design on the accents in both masters.

I made all the accents for the GF encoding Pro for both masters. I filled all the combined character slots. I added .case accents and Vietnamese. It took me a while to get them all balanced, because Nunito has short ascenders and descenders.

Alle the combined characters for the Light master:

Alle the combined characters for the Heavy master:

I made some bigger screen dumps of the Vietnamese. Maybe Nhung could have a look and tell me if I have to change anything:

[Jacques Le Bailly]

Today I had a detailed look on the spacing. I revisited it completely in micro sized steps. :)
And I started working to the end of drawing by working on the symbols en currency signs.

[Jacques Le Bailly]

As yesterday, today I will be working on the final tiny drawing bits of the symbols and currency signs. Print proofs etc. included. I might start testing potential extra weights.

[Jacques Le Bailly]

On Monday I started working on the kerning and I will continue today.

Next step is to define the final weights. Those might depend on another typeface by Vernon Adams, Muli. Muli has a lot similarities with Nunito, but without the rounded stroke ends. I will make a deck in which I compare both original typefaces, the updated Nunito and a quick version of Muli, based on the updated Nunito. Based on those results we will decide if Nunito and Muli should be paired as family members or treated as standalone typefaces.

[Jacques Le Bailly]

Yesterday I started to work on a test version of Muli, based on the files of the new Nunito. Nunito has now complete kerning. The exact new weights of Nunito are epending on the outcome of the test.

When I have made enough characters, I will make a decl in which I show the results on Muli, comparing it with Nunito. Old and new of both typefaces.

[Jacques Le Bailly]

> When I have made enough characters, I will make a decl in which I show the results on Muli, comparing it with Nunito. Old and new of both typefaces.

Today I explored the possibility of using the files of the reworked Nunito for Muli, another font by Vernon Adams. Muli is very similar with Nunito, but it doesn’t have rounded stroke endings.

I also explored the effect of lowering the contrast in Muli. It gives the typeface a contemporary character with a flair of the 1930’s. Like typefaces as Futura, Metro, Nobel and Johnston’s typeface.

https://docs.google.com/presentation/d/1987VHeFmKaKstWXVqrDY7PGXHYe03g3YwG1s7apgW7w/edit?usp=sharing

[Dave Crossland]

On 1 September 2016 at 13:09, Jacques Le Bailly <fonth...@baronvonfonthausen.com> wrote:

Today I explored the possibility of using the files of the reworked Nunito for Muli, another font by Vernon Adams. Muli is very similar with Nunito, but it doesn’t have rounded stroke endings.

Please could you extend this slide to show a comparison with the original files in production today (esp for Muli)? What we want to see is original Muli next to reworked Muli, to know how much of a difference that would be - similar to toggling between slides 5 and 6, but that's just an approximation through scaling :)

 

I also explored the effect of lowering the contrast in Muli. It gives the typeface a contemporary character with a flair of the 1930’s. Like typefaces as Futura, Metro, Nobel and Johnston’s typeface.

I love this! "Mulito"? 

--

Cheers
Dave

[Jacques Le Bailly]

Please could you extend this slide to show a comparison with the original files in production today (esp for Muli)? What we want to see is original Muli next to reworked Muli, to know how much of a difference that would be - similar to toggling between slides 5 and 6, but that's just an approximation through scaling :)

I have added two slides in the deck in which the original and reworked Muli are compared.

 

I also explored the effect of lowering the contrast in Muli. It gives the typeface a contemporary character with a flair of the 1930’s. Like typefaces as Futura, Metro, Nobel and Johnston’s typeface.

I love this! "Mulito"? 

Would you want to use another name ?

[Jacques Le Bailly]

> I have added two slides in the deck in which the original and reworked Muli are compared.

After some contemplation with the team, we have decided to expand the whole project and add another three weeks to work on it.

The new plan:
1. take the Nunito glyphs sources, make the rounded parts straight, and interpolate it to make it a perfect match with nunito, and publish this as a new family, “Mulito”.

2. take the Mulito sources, scale them up to match the height of Muli, and update Muli as a full family, mimimizing disruptive reflow.

3. add oblique-style italics to all 3 (if time allows)

>> I also explored the effect of lowering the contrast in Muli. It gives the typeface a contemporary character with a flair of the 1930’s. Like typefaces as Futura, Metro, Nobel and Johnston’s typeface.
>>
>> I love this! "Mulito"?
>
> Would you want to use another name ?

To point 1:
The test of lowering the contrast of Nunito after making it straight looks promising. It will give the typeface a contemporary feeling and create more distance to Muli. How much the contrast the contrast should be lowered is to be explored. Lowering the contrast will also change the overall color. So a 1:1 match purely based on stroke (numeric) will not give us the right results. I would prefer to do a matching by text color instead.

To point 3:
The basic structure of Nunito (and Muli) is comparable to the classicist writing model such as Didone and Bodini typefaces. In the The Hague school we would call them written with the pointed pen. The Italic form of this model has a lot of similarities to the oblique/slanted form of the uprights. Making the typeface Oblique and eventually add a few Italic characteristics should be more than enough to broaden its typographic usability and make it even more diverse.

[Jacques Le Bailly]

The last few days I started working on fase 1:

1. take the Nunito glyphs sources, make the rounded parts straight, and interpolate it to make it a perfect match with nunito, and publish this as a new family, “Mulito”.

Here are two screenshots of some glyphs with the results:

[Jacques Le Bailly]

Yesterday I finished the first version of Mulito, by taking all the rounded strokes out of Nunito. I have made some prints to see the effect and noticed some stuff that will have to be corrected. Some minor corrections will also have to be done in Nunito.

Now the rounded strokes are gone in Mulito, the weight dispersion works different than in Nunito. I will have to make corrections to counterbalance the effect.

I decided to add some units extra to the spacing of the capitals in both typefaces. They are too tight.

When I am all done with the corrections, I will start working on the obliques. I think it would be more effective to do it now instead of being it the last step. Mulito will be used to update Muli, which also has obliques. I will have to rescale everything to the right vertical sizes. I prefer to bundle that work for the uprights and obliques.

[Dave Crossland]

Sounds good!

[Jacques Le Bailly]

Today I made the spacing of the uppercase in Nunito and Mulito wider. The lowercase of the Light masters needed more space as well, so I made the spacing wider.

Balancing out a rounded and straight version ended up in changing a “few” details :) 

I added for example a little more overshoot to the round forms. All joints and crotches have been made deeper in the Light master. The straight horizontals in the uppercase of the Light master are now two units thinner.

Tomorrow I will continue adding those changes to Mulito. 

[Dave Crossland]

I suggest we start talking about Nunito Sans instead of Mulito :)

[Jacques Le Bailly]

I suggest we start talking about Nunito Sans instead of Mulito :)

Ah, yes, off course ! I was a little bit tired :)

[Jacques Le Bailly]

Today I worked on Nunito and NunitoSans. The files are now ready to be made Oblique (slanted). The glyph list is now GF Pro.

I want to keep all metrics the same. So people can swap between Nunito and NunitoSans, Roman and Oblique without reflow when using the same weight.

[Jacques Le Bailly]

Today:
– Working on on Nunito and NunitoSans Italics I encounter minor inconsistencies when matching. Going back and forth.
– The instances are temporary.
– I just added tabular oldstyle figures. Maybe I will add proportional lining and oldstyle figures if there is some time left.
– Etc.

[Jacques Le Bailly]

I made some pictures of Nunito (top) and Nunito Sans (bottom).

Uppercase

Lowercase

Numerals with newly added old style figures

Uppercase

Lowercase

Numerals with newly added old style figures

Here I compared Nunito Sans and Nunito Sans Italic.

Uppercase

Lowercase

[Dave Crossland]

Thank you Jacques!  Please do show before/after images too with the version currently in production

--
You received this message because you are subscribed to the Google Groups "Google Fonts Discussions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to googlefonts-discuss+unsub...@googlegroups.com.
To post to this group, send email to googlefonts-discuss@googlegroups.com.
Visit this group at https://groups.google.com/group/googlefonts-discuss.
To view this discussion on the web visit https://groups.google.com/d/msgid/googlefonts-discuss/84013B3D-A88C-4C21-9B6C-160A931B8D8A%40baronvonfonthausen.com.
For more options, visit https://groups.google.com/d/optout.

[Jacques Le Bailly]

Today I finished both Oblique masters of Nunito Sans. Next step is to make an extra version to match the vertical metrics and weights of Muli.

As soon as that is done, I will start working on Nunito Oblique, the rounded counterpart of Nunito Sans Oblique.

[Jacques Le Bailly]

Today I worked on Muli, using the files of the Nunito Sans. I put the original Muli in the background and compared the outlines. There were some differences, some obvious, some small. 

At this stage the vertical size is equal to Nunito Sans. Muli has different sizes. The uppercase is about 1-2% taller and the lowercase 3-4% taller in Muli. First I will scale everything up with the percentage for the uppercase. Then I will make an extra file in which I will scale up the lowercase. In this file I will make instances which will give me the right weight, when compared to the new uppercase. The lowercase from these new instances will be copied into the MuliNew masters. After checking the spacing MuliNew should be as good as it gets :)

Altered outlines in MuliNew vs Nunito Sans Light

Altered outlines in MuliNew vs Nunito Sans Heavy

Altered outlines in MuliNew vs Nunito Sans Light Italic

Altered outlines in MuliNew vs Nunito Sans Heavy Italic

Original Muli

As you can see in the original Muli, many glyphs were roughly drawn. Proportions and details are now much more balanced, without loosing much of the original.

[Jacques Le Bailly]

Today I finished the new revised Muli. I added five extra weights in the Roman and Italic. It now has the Google Pro character set.
I will now push it to Marc and Nhung, so they can have a look.

The Light and Regular have the same weight as the original Muli. The fonts I used in the PDFs are without hints.

[Dave Crossland]

The Muli vertical metrics need a touch-up to keep the line-spacing the same, but this is looking good to me :)

[Jacques Le Bailly]

The Muli vertical metrics need a touch-up to keep the line-spacing the same, but this is looking good to me :)

That could be very much the case ! Therefore I already pinged Marc to have a look at the metrics.

[Jacques Le Bailly]

So, today I present you the new Nunito Family. It consist of Nunito (rounded) and Nunito Sans (straight). Each member has eight weights and matching Italics. The width and metrics of each member is equal to it’s matching weight. For example, Nunito SemiBold has the same width and metrics as Nunito SemiBold Italic, Nunito Sans SemiBold and Nunito Sans SemiBold Italic.

For the lowercase /a there is single storey alternate and for the default lining tabular numbers there are old style tabular numbers.