Webfont Colophon – feedback

[chrisburton]

Hey, everyone. I’ve been busy trying to get my design completed on my about page and wanted some constructive feedback on this specific layout/idea regarding the webfonts-in-use.

I designed a simple “webfonts-in-use” colophon to showcase what webfonts I’m using across the site. I wanted to spice it up a tad by making it actually do something without it just sitting on the page, which is kind of boring.

I figured I could make the letters fade in and out with jQuery while switching to the next set of characters so one could see the letterforms.

Thoughts? Additional or other ideas?

Note: The animation will only work on the page when you hover inside the borders. Otherwise it’s a distraction. Also, the characters will cycle all the way through “Aa” to “Zz” and not just “Aa” to “Cc” as shown in the image above

[TheDoc]

I think it’s a neat idea, really cool to be informed as you’re reading. I’m not sure I like the fading part of it, but I guess that might change if I could actually see it in practice (not just a gif).

[chrisburton]

@TheDoc Appreciate the feedback, thank you!

Can you elaborate on what you mean by not liking the fading part? Should I have them cycle without a fade? Also, I’m not sure if I explained this well. The cycling will only happen when the mouse is hovered inside the perimeter. I think if I were to have it cycling in general, it would be a distraction to the user when reading the rest of the content on my about page.

[TheDoc]

It’s just that the gif doesn’t really do justice to how it will look on the page. So as it looks in this thread, I don’t really like the appeal. It’s not as smooth as I’d like.

[chrisburton]

That’s true, it doesn’t. I’m going to give a few people access when I feel it’s complete for last minute feedback, error-spotting, typos, etc., if you’re interested?

I was also thinking about showing specific features of the webfont. Such as showing ligatures and whatnot instead of just cycling through the alphabet.

[ElijahFowler]

Hmmmm… You got my creative juices flowing. I’m off to build a cool CSS3 animation example of your idea. I’ll post back when I am finished building it. :D

[chrisburton]

@ElijahFowler Hey, please do!

[ElijahFowler]

So, sorry it took me this long to get back with the finished product, I had a lot of work come up these past two weeks.

I got it working with just HTML and CSS Animations, but I wasn’t able to get it to work like I wanted do it originally. The way I wanted to do it was to have one element with before and after psuedo element with the text in them, and to change the text and text style with a keyframe, but unfortunately that’s not possible with keyframes. So I wound up setting up 26 elements to place the content in.

Here’s the finished product at CodePen

Enjoy~!
-Elijah

[ElijahFowler]

One could conceivably use this to change up the animations a bit too: [Animte.css](http://daneden.me/animate/ “Animate.css”)

[chrisburton]

Nice work @ElijahFowler. I think I’m going to stick to jQuery to keep the markup minimal. I also might not be showcasing all 52 glyphs. Instead, I might focus on the appearance features (ligatures, italics, etc).

[ElijahFowler]

If you’re already calling jQuery then using it would be a LOT less markup. All in all, it was just a fun side project for me. If things had worked out as I wanted initially then it would have been really light but seeing as how they didn’t… lol

Good luck with your project. :)

[chrisburton]

Thanks for the feedback

[Author]

Posts