dens|ee*

Minima|eesm updated

Tuesday

This post is about Design

This post has 3 comments

Okay I’ve done 2 minor changes again to my Minima|eesm theme — font embed­ding and scroll follow.

I will explain in detail because I thought those inter­ested in web design and devel­op­ment might want to know more.

Font embed­ding

I dodge sIFR and go for CSS font embed­ding instead.

Ini­tially, I’m will­ing to give up any usabil­ity issues just to get the beau­ti­ful head­ings dis­played in Hel­vetica Neue Thin. I have had enough of web safe fonts already.

I had to use sIFR to replace the head­ings with flash because I can’t embed Hel­vetica Neue due to copy­right issue.

How­ever, the solu­tion was far from per­fect due to,

  1. You can’t right click on the head­ings to bring out the con­text menu
  2. You can’t mid­dle click on the head­ings to open the link in a new tab or windows
  3. Safari runs JavaScript and replace the head­ings after every sin­gle image is loaded
  4. iPhone doesn’t sup­port flash

Those are the prices I have to pay just to get beau­ti­ful head­ings. Not much options I have.

But every­thing changed when I stum­ble upon the arti­cle 20 New High Qual­ity Free Fonts from Smash­ing Mag­a­zine yesterday.

I found a free font that is very close to Hel­vetica Neue Thin which is the Vegur Light from dot colon.

Vegur

Vegur is a really beau­ti­ful and high-quality font designed by a Japan­ese designer goes by the name Arro. And the best part is it’s free!

Vegur Light looks some­how sim­i­lar to Hel­vetica Neue Thin and I think most peo­ple won’t even notice I’ve changed it if I don’t men­tion it here. I embe­ded the font with CSS and all the issues I men­tioned above solved.

One draw­back is that older browsers do not sup­port CSS font embed­ding (see @font-face browser sup­port). Besides, Inter­net Explorer doesn’t sup­port True­Type or Open­Type fonts.

But I think I can live with that con­sid­er­ing most of my blog read­ers are intel­li­gent enough to stay away from Inter­net Explorer and upgrade their browsers fre­quently (I think).

Scroll fol­low

Besides font embed­ding, I changed the scroll fol­low as well.

So yes, I heard you. Scroll fol­low is annoy­ing. Well, I kind of expected that.

Ini­tially I already planned to include a but­ton that says “Stop fol­low­ing me will ya?” but I didn’t do that because I want to make it easy for peo­ple to comment.

After con­sid­er­ing all the feed­back I got, I try to dis­able the ani­ma­tion as sug­gested by Kevin but there’s just no easy way to achieve the effect I wanted.

I was search­ing Google up and down but with­out much luck because it seems like no one is actu­ally doing this.

So I mod­i­fied the scroll fol­low JavaScript and I’m glad I finally man­aged to do it. If you still think that it’s annoy­ing, let me know.

After all these changes, I think I’m more or less happy with the theme already. I can finally con­cen­trate on writ­ing all the pend­ing posts.

Not for­get­ting to thank those who took their time to com­ment and feed­back on the pre­vi­ous post.

Tuesday

This post is about Design

This post has 3 comments

7

CommentNo. 1

wong17 November 20097:55 PM

1, Who really cares about the font copy­right issue wor? 😆

2, That scrolling not so annoy­ing now 😀

I for­got another font plu­gin name already, it works bet­ter than sIFR…

Author’s CommentNo. 2

Den­nis17 November 20099:15 PM

I know how it feels when my work got stolen… so I won’t do that to oth­ers too… hehehe…
Do you mean Cufón? It’s cool but still not as good as native CSS font embed…

CommentNo. 3

Peter Yee19 November 20099:54 AM

andrew, u mean cufon?

love the scroll fol­low now.

Post CommentComments are being moderated

or

Connect with Facebook