Typophile - How to display Text NOT antialiased on a webpage (HTML) - Comments

that’s because by default

rouss — Wed, 13 Feb 2008 04:11:45 -0800

that’s because by default in os x ant-aliasing is turned off for sizes less than 4 or 5 points, can’t remember right now.

Hi all! Thanks for so many

Jui — Thu, 31 Jan 2008 12:32:36 -0800

Hi all!
Thanks for so many suggestions.

Juergen

I just stumbled across this

kdear — Thu, 31 Jan 2008 05:59:53 -0800

I just stumbled across this website and was a little surprised to find that no-one had recommended bitmap or raster fonts to Jui?

The following code snippet works under Vista + IE7 + “Always use cleartype rendering”.
<p style="font: System">testing 1,2,3, over.</p>
Under vista there’s also: MS Serif, MS Sans Serif, Modern and Courier.

Linux has a bunch of bitmap fonts to choose from.

But apple could be a problem. According to the apple developer website ...

“Note: Bitmap font resources are not supported in Mac OS X. Font families that consist entirely of bitmap font resources are ignored by Quartz-based applications that use Cocoa, Apple Type Services for Unicode Imaging (ATSUI), or Multilingual Text Engine (MLTE). These font families are not available for use in such user interface elements as menus, windows, and static and editable text controls.”

So if Safari uses ATSUI or MLTE to generate the web-page then your out of luck there. Perhaps someone could confirm with a standard apple bitmap font (if one exists)?

HTH

Jui, I’m having problems

twardoch — Thu, 31 Jan 2008 03:43:07 -0800

Jui,

I’m having problems locating the non-antialiased type on the pages you referenced. Here are the screenshots showing how those render on my screen. Looks quite antialiased to me.

> The trick is simply to

Thomas Phinney — Thu, 31 Jan 2008 00:36:39 -0800

> The trick is simply to keep the type small, use typefaces that are predisposed to this behavior.... <

That won’t do diddly if the viewer is on a Mac, or is on Windows with ClearType on, or....

This really is an issue of OS/browser settings, and there is no reasonable way for a Web designer to control it. (I don’t consider using Flash or bitmaps reasonable if all you’re trying to do is get aliased text.)

Cheers,

This is something that

75th Trombone — Wed, 30 Jan 2008 21:51:18 -0800

This is something that it’s a Bad Idea to try to control. Web design is not print design; you do not have and cannot take complete to-the-pixel control of what your users see when they look at a proper web site.

I turn off anti-aliasing on my computer because that’s what I want. Other people turn it on because that’s what they want. Some people have no choice in the matter and always have it on (Mac users), and seeing non-anti-aliased text would be a jarring and uncomfortable experience for most of them.

The ways of cheating around this are just as bad. If you use images or Flash, people can no longer do things they can do with proper web sites. They may not be able to resize your text to suit them; they may not be able to copy and paste text at will; blind people’s screen-readers may not work, or middle-clicking links to open in a new tab may be broken (like with the Typophile front page), or any number of other things may break that work with proper web sites.

I know it kinda sucks that you can’t make it look Exactly How You Want It, but that’s simply inherent to the web, and you need to embrace it rather than fight it.

Well here’s an answer: The

David Sudweeks — Wed, 30 Jan 2008 18:41:51 -0800

Well here’s an answer: The sites you list don’t necessarily display their type anti-aliased. Scale your type larger, it will alias. The trick is simply to keep the type small, use typefaces that are predisposed to this behavior, such as courier, lucida sans, consolas, or Times New Roman at very small sizes.
Using images in place of functional text (on the web) is a bad practice. That stuff doesn’t get indexed, isn’t selectable, isn’t accessible to viewers with (some) disabilities and if it’s small, isn’t even legible to many sighted web users.

All of the text on

Spire — Wed, 30 Jan 2008 15:20:17 -0800

All of the text on http://plusminus.ca/ is anti-aliased on my system (Windows Vista with ClearType enabled).

Frode is correct: Short of embedding images or objects such as Flash, there’s no way to guarantee that your text will not be rendered with anti-aliasing.

Hmmm... Yes but on

Jui — Wed, 30 Jan 2008 14:50:59 -0800

Hmmm... Yes but on plusminus.ca for example there is no flash. And it’s real Text and not images.

Another friend told me, if I use Pixel (.px) instead of Point in the HTML code to discribe the text size the text will appear pixelated....?

its a mystery : )

anti-aliasing is an end-user

aluminum — Wed, 30 Jan 2008 09:09:56 -0800

anti-aliasing is an end-user browser/OS setting. So, no, you have no control over that at the site author.

Your only option, as stated, is to put your text into an image or flash file. There are usability/accessibility issues with that that you’ll want to take into consideration that may or may not be an issue with your particular project.

The stylesheet of

MiseEnAbime — Wed, 30 Jan 2008 08:49:00 -0800

The stylesheet of http://www.blanka.co.uk/ sets the text size at 9px. If you see the site in FireFox or Safari you can enlarge or reduce the text size (command +, command -) and, you see that the text rendering become ’antialiased’. If you use Explorer you can’t make the text bigger since it is set in pixel. So you can only set the text as small as you can in pixels and hope that the user doesn’t enlarge the text size.

You might also wan’t to

frode frank — Wed, 30 Jan 2008 08:22:39 -0800

You might also wan’t to look into Sifr. It’s a method using flash to embed fonts. I think you can’t define text size in pixels though, so using a pixel font tends to cause problems.

double post..

seventy7 — Wed, 30 Jan 2008 08:21:42 -0800

double post..

I think he wants the

seventy7 — Wed, 30 Jan 2008 08:21:08 -0800

I think he wants the opposite of images of text. Or maybe a better way to explain it is he seems to want a pixelated look. Is that correct? Are you basically trying to get the strokes of the letter forms to be about one pixel wide?

If you increase the size of the text on those Web pages (command +), you’ll see that the type maintains its crispness and the strokes get larger than a single pixel or two in width.

Check out the CSS for those two sites to see what size they set the type in question. I feel the look they’ve achieved is based on the type size because it actually is just HTML and not a jpeg.

Hmm. Or I might be wrong.

frode frank — Wed, 30 Jan 2008 08:15:52 -0800

Hmm. Or I might be wrong. This doesn’t seem to be any of the two.

How to display Text NOT antialiased on a webpage (HTML)

Jui — Wed, 30 Jan 2008 08:06:42 -0800

Hi there!

First of all: I know nothing whatsoever about Internet programming. I just want to give a hint to a guy who do me a favour with an internet project.

OK. I want the text on my webpage to appear NOT antialiased, but sharp just with black pixels for example.
Is that possible with Monaco, Andale Mono etc. Or do I have to use something special?
Is there a certain adjustment in the stylesheet?

just like here:

http://www.blanka.co.uk/

or here:

http://www.plusminus.ca/

Can anybody please give me a hint how to achieve that?

Thanks!

Juergen