verdana on webpages

marcadonbalon's picture

hi I wanna ask a question
As I know the typeface in the attached pic is Verdana
but it is a version which is shown in the webpages
If I type Verdana in my computers such as AI I can only type the normal verdana typeface.

Is there any way I can type the 'pixelized' version of verdana?
Any help will be much appreciated.

folengo's picture

That is the old same Verdana at 10 pt.
You have to deactivate antialias (in Photoshop) to achieve the effect you're looking for.
Don't know in AI, maybe you have to rasterize it, but then it's not editable anymore.

poms's picture

If you have not activated "clear type" in Windows you get this effect on small sizes, too.

Manlio Napoli's picture

In Illustrator: Effect > Rasterize

BlueStreak's picture

>If you have not activated “clear type” in Windows

I'm new to Windows. In June I got an Intel Mac and Parallels so I could easily preview webpages I'm building using Internet Explorer. (Another thread would be about how much IE really sucks.) I've noticed this effect and was wondering what was going on. How do I activate clear type in Windows?

jasonc's picture

"How do I activate clear type in Windows?"
BlueStreak, you didn't mention which version of Windows you use, so I'm assuming it's XP. (in Vista Cleartype is on by default.) See this page on how to turn on CT in XP:

also this page:
shows how to use the ClearType tuner, but you must do it using IE.

Jason C

BlueStreak's picture

Thanks Jason C. Learning to work in Windows after 20+ years of using a Mac reminds me of the awkward switch from PageMaker to Quark. Switching the display to ClearType is one more baby step that I've made.

canderson's picture

Is there any way I can type the ’pixelized’ version of verdana?

In a Windows environment without Cleartype, fonts are designed to fit the pixel grid at small sizes. This makes the text much easier to read. The font contains special guides known as "hints", which distort the fonts slightly, but keep the letterforms intact when they are only a few pixels wide. On the web, the rendering of basic text is handled by the browser, so that same sample may look different depending on what OS/browser combination you're using.

If the above sample was actually a bitmap in the webpage, then it might have been created with one of the previously suggested techniques. Alternatively, there may be an actual pixel font floating around somewhere that duplicates this effect. At very small sizes there are fewer pixels to turn off and on, which makes originality a challenge. If you're looking for pixel fonts, you might want to check out Fonts for Flash.

Also, if you clarify your intended use, you might get better suggestions.

marcadonbalon's picture

Thank you all for your effort in answering my questions and sorry for late reply.
Folengo, your answer is very helpful as I discover now turning off the anti-alias function can do such great thing....
Sometime the pixelized effect of the small types are beautiful......

marcadonbalon's picture

>> In Illustrator: Effect > Rasterize

this is also helpful! but if there is a method with the texts being editable afterwards will be much better...

Manlio Napoli's picture

The text will be always editable in Illustrator. Check this post at Veerle's blog, there are some examples.

Si_Daniels's picture

>Sometime the pixelized effect of the small types are beautiful......

The pixelized version of Verdana is actually the intended rendering method that Matthew and Tom designed the Verdana for in 95.

Endre Berentzen's picture

In AI CS3 while designing for web choose new document > 72 dpi/Pixel preview/The excact document size in pixels/RGB. Go to preferences and make your grid 10x10px with 10 subdivisions. Go to view and align to grid. Use Verdana at 10pt. Now you are certain it will look like you specified. Illustrator wasn't built properly for webdesign before CS3. If you are on CS2 you should really consider an upgrade.

Syndicate content Syndicate content