@font-face makes the web pretty (or ugly). (Needs FF 3.5 or Safari) | Hacker News Reader

@font-face makes the web pretty (or ugly). (Needs FF 3.5 or Safari)

craigmod.com

46 pointsyummyfajitas31 comments

Dear designers: COLUMNS DO NOT BELONG ON THE WEB.

If you want a thin column for design reasons, hey, go for it, but I hate scrolling down, then up, then down, then up, then sideways (in my browser there's a horizontal scroll on that page right now). ONE thin column. ONE. I should be able to read your page with my hand on the space bar and nothing else.

Think of this as the equivalent of the suggestion that no matter how awesome your 10" x 15" design may be, when it needs to fit on a 8"x11.5" paper it doesn't work. Jamming columns into this medium is simply bringing over old, inapplicable biases to a new medium; work with the medium, not against it.

You're right, tall vertical columns are total shit on a screen.

But fixed-height horizontally scrolling columns are AMAZING: http://amarsagoo.info/tofu/ -- they work so perfectly on a screen when done well, better than anything else by far. The lines always stay in the same vertical alignment, and the columns in the same horizontal alignment, eliminating jitter -- the text changes without moving shit around.

Interesting. I'd like to see a video of that in action. I'm skeptical still, but I'm also a person who has no problem with the current status quo. I was reading books on my 160x160 Palm Pilot with little objection. This appears to make me an outlier. (I think it may because I started on the Commodore 64 on a regular television; against that reading experience, a clean 160x160 is still an improvement!)

Properly done that could work.

Do you use it? When you scroll over one or more columns, the system jumps column-wise, right? Not like a scrollbar would on a normal web page, which wouldn't jump to columns at all, and would have problems with half-displayed columns (which are useless).

I used to use Tofu incessantly when I used Macs at home + work, I've been meaning to write a clone in some X toolkit or XUL for a while.

You have it exactly right, it jumps one column at a time XOR one screen's worth at a time. When you first set it up you tweak not just the font + colors, but the width + padding of the columns.

I used to use it on my 12" PowerBook all the time, set up with one of the Vista fonts in light lavender on very-dark gray, with two columns fit onto the 1024x768 screen with the window maximized. I read millions of words that way, it's easily the fastest and least-fatiguing reading method I've used, though the ergonomics of the laptop ain't great.

I've been wondering lately if there shouldn't be two ways to do page layout. CSS + HTML is awesome for documents, which 99% of the web is. However, it seems like lots of people really want "brochure"-type pages, with crazy fonts, specific positioning of boxes of text and images, and lots of graphics. From looking around, it seems like every single one has to go through some horrible contortions of CSS and nested wrapper divs.

I'm not sure which is the best approach, you either end up with a page looking like 37signal's landing page, or you have 8MB of images and 30 absolute positioned divs, ala CSS Xen Garden.

I'm a programmer, not a designer, but every time I try to put together a front page that looks good, both to the user's eye and to the HTML maintainer's, I feel like I'm really fighting the natural way of doing it. I wish it was better, but I'm at a loss as to how.

It's called pdf and it's there. Adobe Reader supports all sorts of webbish features such as hyperlinks or JavaScript. For some reason, it's not very popular as a hypertext document format (and neither are MS Word documents, an other similar contender)

I hate when I read .ps/.pdf formatted files in columns. I have to rotate my MacBook Pro to read them in one page :)

Yeah, that pretty much destroys their design cred straight away. Putting the close icon on the top-left of the popup boxes removed all doubt.

Good web design is very precious. Unfortunately, so are many less-skilled designers.

Dunno, it's a pretty subjective thing, isn't it? Maybe the target audience of their design on this site wasn't programmers (who all love nitpicking on usability issues) but other designers, maybe future employers who care for different things than someone with a techical or engineering background would.

Quite, indeed. These pussyboy designers need to go shoot themselves. It's bad enough @font-face exists now, but to tout its virtues on a completely unreadable website? Come the fuck ON.

I really don't look forward to giving everyone the ability to use whatever crazy, hard-on-the-eyes font they want to use.

Hitler on fonts:

http://www.youtube.com/watch?v=qDiDATbIG-o

(Not for the humor-challenged.)

I prefer to think of this as a way to prevent text in stupid fonts from being useless: at least if it's styled with CSS, you can restyle and copy it, which is a step up from pictures of text.

Oh, I think this will be hilarious...Everyone loves to see Comic Sans in every corporate email, because it's a "laid back" font. Now we get to have it plastered all over the web too. Every blogspot blog will not be graced with paragraphs of it.

I think it's great! Yet another tool for quickly answering that age old question: "Is reading this worth my time?"

Comic Sans is everywhere on the web already - it was part of Microsoft’s Core fonts for the Web package and as such made it onto every Windows system, most Mac systems and any linux system user that wants to grab it from Sourceforge:

http://corefonts.sourceforge.net/

Eh, Readability (and ~ten other things) can override it if the font choice is bad.

I realize that on the whole, broadband connections are getting faster, but 3.3MB for the full font set seems like it might be a little much: http://imgur.com/Y3SHZ.png

3.3mb for a font used for headers across the site, or getting that much or more (as the site scales) from the images needed, or generated, or flash used replacement, et cetera.

It seems like a lot, but if it caches, it would probably end up being less overhead.

I'm not sure if that matters too much - it takes over a second for those to load on my (broadband) connection. That means the page first renders with standard fonts, then snaps into the fancy downloaded ones a second after load. It feels horrible.

What browser are you using? I'm on Safari 4 and the page looked like this http://i31.tinypic.com/mvmgx0.png until the font was downloaded (took almost 10 seconds on my slow connection).

Edit: I tried it with Firefox and it does indeed use the default font until the new one is downloaded. The transition is not nice but better than nothing.

Was using FF3.5, sorry for not pointing it out earlier.

Well, I can definitely agree with you on that, the initial load was really uncomfortable. I was talking about total overhead input/output though, would likely be less if it caches, instead of having a slew of flash/images to handle it...though you could argue the flash/images would be in a lot less "burst" and you'd have to hit x number of pages to exceed the threshold.

In any case, to me it's just really more fluff, and not likely to be really usable for a long time to come...just like things like rounded corners in CSS are fun, but a narrow solution when you have to support IE6...and yes, a lot of us still HAVE to support it. I won't turn down a job just because they have that requirement, just have to adjust my expectations.

On the positive side: Fonts are really important in design and styling, and giving designers the flexibility to use whatever fonts they won't also opens up design doors.

It's the internet, there's always going to be stupid people using stupid things and doing stupid things. Is that enough reason to stop other people from doing cool things? Never.

WARNING: this link crashed my mac safari 4.

Also before crashing it said the demo needs FF 3.5. So the title is wrong about supporting safari?

It works correctly in safari 3.2.3 on my machine. However, safari does show the "Needs firefox 3.5" message.

Worked fine on mine: Safari 4.0.1, Mac OS 10.5.7

I compared it to Firefox 3.5 and it was identical.

And this is how terrible it looks like in Opera on Linux: http://imgur.com/o1unT.png

That's how it's supposed to look…

Left column, near bottom: "Technologies such as (unreadable) and Cufon... "

Wow, I never thought there would be unreadable _text_ in browser. But this day finally came!

Unreadable is 'sIFR' http://www.mikeindustries.com/blog/sifr/

FWIW: Although the site proclaims (dimly at top) that it appears only as intended on FF 3.5... I find that it looks essentially identical via Safari 4.

Reply on news.ycombinator.com