My new portfolio site

[TheGAME1264]

Hi guys,

I just relaunched my portfolio site. For the most part, it should be okay, but there may be some odd goofiness since I just put it up.

There also will be an addon at some point in the future (a blog of sorts), so this is part of the reason for the redesign.

Anyway, leave your thoughts as usual. I may adjust a couple of things this weekend, but I actually think it turned out kind of sort of maybe okay for the most part.

[TheGAME1264]

Large fixed header is staying. I've got my reasons. And I'm not taking out the top of the page portfolio yet, either. Stop asking, everyone. :P It's not that I'm unprepared to listen...it's that I have a reason for it being there and the way it is.

The pixel size only applies to Cufon specifically. If a user doesn't have JS enabled, the font doesn't get swamped.

The footer isn't going to be used for much, although I may just drop the blue entirely. Haven't decided yet. There's only going to be one more link in there at some point, anyway.

[Ganners]

Well if you're keeping the top header, try and shrink it as much as possible, seriously! Or maybe allow the user to hide the portfolio part? Something like that would be really simple and improve usability drastically.

Also, what are these 'reasons'?

[TheGAME1264]

I was actually thinking of the latter (allowing the user to hide it). I just ran out of time if I want to go to the pool, which I have to leave for now.

And I'm not getting into my reasons. I'm not just doing it to be a stubborn ***.

I did take your footer comment seriously, though, and I think I figured out a way to work a better color into the footer by swapping it with the header color (more or less).

[smoseley]

Cufon is good for compatibility (More people have JS on compared to those who are running more modern browsers), also a large number of fonts won't work with CSS3 fonts, but will (illegally) work with cufon - So if it's for small amounts of text such (really only headers) that you want to render the same on all browsers then go for Cufon.

This is true.... but misleading, if you do the math.

About 94% of browsers can render web fonts.
About 98% have Javascript enabled.

So you're effectively reaching < 2% more people with Cufon. Big whoop.

Also, the code for Cufon is more intense, and more prone to headache in debugging, the package size for fonts is larger, and you have to serve the font files from your server, while Google fonts are served by Google, saving you bandwidth and hassle. Finally, with Cufon, if you don't own the right to distribute the fonts you're using, you're breaking the law and could wind up getting served (at minimum) with a C&D from the font foundry, whereas with Google fonts, you're using using unrestricted content.

Honestly, I don't think there's a good case to be made for Cufon when you consider all the facts.

[smoseley]

BTW, Adam, I'm running Chrome, too, and google fonts anti-alias perfectly on it. Not sure what your problem is... maybe you need to upgrade?

[TheGAME1264]

I've attached two files to this. One's a screen capture of the fonts API example in Firefox and one is in Chrome.

Firefox:
firefox-fonts-api.png

And Chrome:

chrome-fonts-api.png
Ignore the messed up Arial font in Chrome. The Arial font got corrupted on my machine and I haven't reinstalled it yet. But look at the Tangerine font. Look at the "L" in particular. Where's the right side of it? Blends in with the exclamation point. The M is jagged, and I don't even know what's going on with that G. Granted, the jaggedness is more apparent in Chrome than in FF (both newest versions so that's not a factor), but it's still there in FF, and it looks bad.

This is Google's own quick start example, too. This isn't me playing with it. I wouldn't even care if that was the example if there was a property that could be adjusted to allow for anti-aliasing (say a passing of a "Smooth" parameter to the works), but there isn't.

This is why I won't go down that road. The important percentage to me isn't in the number of people who can view the fonts, but the number of people who can view the font without all the silly jagged edges and weird effects. Granted, part of the responsibility lies with the typographer, but that still doesn't get me where I want to go.

[smoseley]

Here's the same page on my Chrome. As you can see, it's properly anti-aliased. Tangerine is a bad example, though.... so I attached a screenshot of the GWF font selection page. I think the problem may be with your browser, not GWF. Are ANY fonts (besides Cufon) anti-aliased? Show us a screenshot of this page's Tahoma, for example.

[TheGAME1264]

chrome-cap-2.png

I'm assuming you meant the Trebuchet on this page. But it's not my browser. I can tell you what it is and why it is (and more importantly, why I'm not changing it). I don't have font smoothing enabled in Windows at all. I intentionally disabled it because font smoothing such as UnclearType actually makes what used to be clear and legible web fonts (e.g. Arial) about 10 times harder to read.

In fact, I strip down any and all OS effects by design. By comparison, it looks like UnclearType or some other variant is enabled on your end.

I'm not the only one that does this, either. Several of my clients, as well as most of my friends, do similar sorts of things. It's one of the reasons I despise Safari and IE9...I can't get rid of that easily.

[smoseley]

Yes, I have cleartype enabled. But that's a default setting. With regards to the web, what % of users are on Windows computers without ClearType enabled? Still > 90% of users will see your Google fonts anti-aliased.

[TheGAME1264]

It's probably the majority, but I'd say it's less than 90%. I know a lot of people who remote into various boxes, and in order to speed up the works, they disable any and all effects, including anti-aliasing.

But there is actually a solution to make sure you can safely serve one or the other. And because I'm, as Kenny Powers would put it, f**kin' awesome, I'm going to share with the class what I've learned. This guy has written a Javascript that creates a letter O using a canvas tag when you call the TypeHelpers.insertClasses class. If the O isn't completely solid or if there are any translucent areas, anti-aliasing is detected and the .hasFontSmoothing-true class is added to the HTML tag, which you can then use in your CSS to create any font stack for any font you want...sort of. Some fonts, such as Rockwell, will show up with jagged edges. That's just how it is.

In the case of my site, I used Google Fonts' Bitter font and it loads a lot faster. I'm thinking the Rockwell Cufon file was too big. The interesting thing about it (to me, anyway) is that Cufon also uses canvas tags to generate the letters.

At any rate, if you want to see it, I used it, and that's at least got that end of it solved. I also solved my stupid Arial issue by using Standard font smoothing (not that gawdawful UnclearType). Two birds with a stone. Score.

Going to deal with hiding the portfolio tomorrow or Monday or something. My brain hurts.