DEV Community

Cover image for Reverse Engineering the Blending Mode of Gilbert Color

Reverse Engineering the Blending Mode of Gilbert Color

Wei Gao on April 06, 2019

I’ve been preparing for my Talk.CSS talk about mix-blend-mode this week. Meanwhile, if you happen to have come across this cute little community ca...
Collapse
 
fpuffer profile image
Frank Puffer

Looks like a great font for presentations too. I would really like to try it, especially the animated version. Unfortunately I have to use PowerPoint which as far as I know doesn't support anything like this. Or am I wrong?

Collapse
 
wgao19 profile image
Wei Gao

Yes it's such a nice display font right! I don't have PowerPoint installed on my machine, but I believe if you install the font you can use it like other fonts? The font can be found here.

Collapse
 
fpuffer profile image
Frank Puffer

Thanks, have just tried it. Unfortunately it only displays the monochrome version. Same with Libre Office and Gimp. It does look awesome in the browser however.

Maybe you can answer a completely different question: The font has a fixed mapping between strokes and colors, the "o" for example is always yellow. In some of the pictures from your post, this seems to be different. The same character appears in different colors. Why is that?

Thread Thread
 
wgao19 profile image
Wei Gao

I think that's how they designed color font to be. You may check out Color Font to learn more about it :]

Thread Thread
 
fpuffer profile image
Frank Puffer

Sorry if I am asking stupid questions. I understand that in a color font, each character has fixed colors. But in one of your sample pictures displaying the text "the quick brown fox...", the same letters appear with different colorings. This is what I don't understand.

Thread Thread
 
wgao19 profile image
Wei Gao

Oops sorry. Let me try to understand your question more precisely -- are you referring to the 'o' stroke, for example, it appears in 'b', 'd', and 'q', as well as 'o' itself?

Thread Thread
 
fpuffer profile image
Frank Puffer

The 'o' in 'brown' is yellow, the one in 'fox' is green and the ones in 'over' and 'dog' are red. That's what puzzles me.

Thread Thread
 
wgao19 profile image
Wei Gao

I see. In fact, all the letter 'o's are yellow. The stroke 'o' in other letters such as 'd', 'p', 'q', 'g' have different colors -- this I believe is designers' decisions. Unless you are seeing otherwise?

Thread Thread
 
fpuffer profile image
Frank Puffer

Hi, it's me again :) - no, my issue is not the o-shaped strokes in different letters. Please check the letters 'o' in the words 'brown', 'fox', 'over' and 'dog' in the 3rd image of your article. At least on my screen they have completely different colors!

Thread Thread
 
fpuffer profile image
Frank Puffer

Hi, it's me again :) - no, my issue is not the o-shaped strokes in different letters. Please check the letters 'o' in the words 'brown', 'fox', 'over' and 'dog' in the 3rd image of your article. At least on my screen they have completely different colors!

Thread Thread
 
wgao19 profile image
Wei Gao

Hmm I see. Sorry I was missing your point 😅

Actually, that image is from typewithpride's website banner. They probably put a different version or one that is not exactly the same with what they release with the font files.

For the actual glyph you will see, should follow what actually shows up in the font book.

Collapse
 
bloodbank profile image
bloodbank

If you are the only one giving the presentation you can use webslides, Ive used it alot. When people want the slides I just export them to PDF and send them (does not include the animation tho). With webslides you can use html/css/js and more