[OTVar] Emotional Type/ Sharing technique for interpolating between angular to cursive masters

Promphan Suksumek

Hi all,

A quick disclaimer: I'm only a beginner. I've been doing type design for just about two years and also very new to OpenType variable font. I just got a chance to attend the type conferences lately and got inspired, so I ended up executed my Master Thesis in OpenType Variable font format.

Emotional Project Summary: The idea is to express emotion in a text message which is in between pure text and emojis usage. It mainly focuses on clarifying the sense of sarcasm or setting a tone of voice in the semi-formal situation by manipulating the default typeface in messaging app.

www.emotionaltype.org

Technical details: It was executed in an OpenType Variable font format which interpolates between angular and cursive (line) form which caused me some errors at first. I explained the problem in detail and how I solved it on Github, also shared the files there. 

https://github.com/boomwooq/emotionaltype 

Maybe it is a minor detail or an amateur "how to", but hopefully, this could be helpful to other beginners out there more or less. Please feel free to share your opinions, comments or feedback.

Note: the font is not yet completed, now only have some Glyphs

Hrant Հրանդ Փափազեան Papazian

Sounds very interesting!
For people who don't want to install a special browser, could you possibly show a simple animation?

Arthur Reinders Folmer

Looks interesting, and what more could even be possible? Tricky bit is of course, how emotion relates to a certain letterform, which has plenty of variables and is highly personal. Perhaps in the end, the visualisation of the positive and negative axis should lie at the receiver and not the sender? (which gives some issues with current tech)

I see you went the angular/soft approach. Is there a reason you translated both extreme emotions into italics and the "neutral" in a roman? (perhaps giving more 'personality' to the letterforms? Since for me, the two extremes feel like two peas in a pod.)

That aside, for a beginner good work! I'd certainly keep on going investigating further experiments!

Deleted Account

Promphan,

Nice thesis work if you can get it.

I’m impressed to see such a wide range of styles in a single font, and look forward to your completion of the glyph repertoire, if you do too.

I have not looked at the work beyond the animation you have, (as simply as possible), web-coded and published, but one very small technical thing I notice that you might want to consider. Using cubic béziers, and going from a square to a round shape, you are forcing the dot of the i to rotate. This has a way of losing control of the shapes in between round and square, and perhaps adding more instability to the typography than you want. Maybe not, I could be seeing things.

In either case, with quadratic béziers, the transformation of a corner to a round requires no rotation, i.e. the on-curve control points can remain at the extrema and achieve the same results without rotation. And in the case you do want the rotation to occur, quadratics could give you exacty the effect you are now getting as well.

While a dot of the eye provides a most obvious example of this, there are other conditions in variable font development where this asset of quadratics becomes even more useful. 

Good luck with this, and I hope, BTW you let no one “milk” you (and everyone else), out of precious time making and downloading huge VF movies. As with many other things that are superficially understood, it’s not that simple.

Hrant Հրանդ Փափազեան Papazian

This brings to mind an interesting conundrum concerning interpolation between continuous and discontinuous: it's ideologically untenable, because any instance is necessarily discontinuous; this makes the continuous extreme misplaced. I have to admit though that this is an esoteric issue.

https://twitter.com/hhpapazian/status/941717738640220160

Concerning making animations (which are not remotely huge when it comes to a few seconds of b&w) outfits like Axis-Praxis know well that it's a good investment in time to get more people interested, as opposed to preaching to the choir. Making people install a different browser is the waste.

Peter Constable

Hi, @Promphan Suksumek. Interesting project, and nice to see OT1.8 variable fonts being used.

One comment about the variation implementation: you have used the 'wght' axis with values from -1000 to +1000. You should change to a custom axis tag, such as 'EMOT'. There are two problems with using 'wght' as you have: the valid numeric range for the 'wght' axis is 1 to 1000, and the variation in your font is not weight! See Registered design-variation axis tag: 'wght' for a description of the 'wght' axis. A custom axis tag can be anything you choose so long as it uses uppercase letters (details on syntax here).

Johannes Neumeier

Congratulations on a very interesting thesis project! It is great to see also the background experiments you did before the typeface, like the "OK" trials, and the notion of how emoji interpretation depends very much on operating system context and user.

It is great to see how at the very center of type design this really is; type always embodies and communicates some form of emotion or sentiment. With OT interpolations it is interesting to think about the possible results of not one linear axis for emotion. I would be curious to see different emotional axes, and what unexpected and undesigned instances their interpolations achieve. "Positive" and "negative" are always a valuation of emotion, rarely the emotion itself. Calm — angry, excited — disinterested, happy — sad, surprised — surprised; they are all interesting axes that are more or less "positive" and "negative", but which I would imagine to have very different extrema indeed.

To pick up on Arthur's notion about the receiver's interpretation, it would be interesting to have users match styles to an emotion first, and the sender's intended emotion gets translated to what they specified - and in reverse.

Promphan Suksumek

@Arthur Reinders Folmer 
Hi, thank you for your comment and sorry that I didn't explain this quicker. I draw the positive and the negative close to "italic" according to its design process, Emotional Type has been developed from expressive handwriting. And why italic not bold? Because I want this so-called italic will first give the intention of the message, then I spared the bold or light for another axis such as the emotional intensity. And for the neutral one, it set in Roman because Emotional Type is a manipulated form based on the structure of default font (such as x-height and stem thickness). Its idea is aimed to be able to apply on any other fonts regardless of what kind of the mobile device, therefore any default text typeface, which usually set in Roman, could be its "Neutral" form. In this experiment, it has been using iPhone for the mockup that's why it's neutral is SF San Fransisco. 

@Peter Constable 
Thank you for pointing it out, at first I tried with weight cause I'm not even sure if the project is going to work so I just follow the norm without thinking. I will adjust it in the next version. 

@"D. Epar ted"
Thank you so much for your advice!

@Johannes Neumeier

Thank you for taking time going through my process documentation. About the specific term of emotion, this topic has been discussed heavily since the very beginning and all along of my design process. 

At first, I set out with specific terms of emotion such as Frustrated, Excited, Surprised and more before, but the result is that we all perceive emotion differently depending on each experience and background culture. Therefore, to be on the safer side to avoid the misunderstanding which could further complexify text messages, I decided to set the term of emotion to be "positive" referring to comfortable feeling, and "negative" referring to uncomfortable feeling leaving the sender & receiver to interpret more specific emotion themselves which could fit in different backgrounds. 

However, about the interpolation between the two extremes, I agree that this is now may be a bit too many masters and by adding more axis with different expression might be the better way to make the most out of Variable Font.

And lastly, thank you for all comments. It makes me think harder.