Font too small for screen?
hey guys
i am currently working on my new website. i have made quite some progress over the last few days (ehm... nights ;-) ) . however, yesterday I was showing the page to my girlfriend (she doesn’t study design - a fact that imho makes her conclusion even more credible for that she is not a pro but a user) and her sister and they both agreed, that the type is just too small. now I have my mac-screen set to 1680x1050 (20inch) and I didn’t get the feeling it’s too small - it looked just fine. I mean, when you have a resolution of “only” 1024 then it’s even bigger. so maybe it’s just me, you get used to even the worst design blunders, when you sit on your project for too long. I am well aware of the fact, that my chosen font (American Typewriter) is not an ultra font.
what do you experts think - is it readable or too small? - in my screenshot I’ve also tried Frutiger 55. My beef with Frutiger is that I do like the font a lot for signs or airport boards but for my website I get the feeling it might be to “simplistic.”
cheers,
jan
| Attachment | Size |
|---|---|
| Picture-5.gif | 74.41 KB |











10.Sep.2007 3.51am
Well, I’m looking at it on 1280x1024, and I would say that on my res it is not too small an sich, however it is too small for the typeface. The serifs clutter.
So I would say if you want American Typewriter, increase the size. If you don’t wan’t to increase the size, pick a good sans serif that can be used small on screen.
10.Sep.2007 5.11am
So will this new website be made of images? Flash? If it’s going to be “coded” I would stick with a “web” font - they actually display on the screen better as well (especially at small sizes)
10.Sep.2007 6.29am
You have to remember that everyone has different resolution screens.
If you’re making the site as HTML text (as you should, IMHO) then I’d stick with 10px type at a minimum, and expect some folks (like me) to probably adjust the type size larger.
If it’s all flash, then definitely aim for something even bigger, as there’s no way for an end user to easily enlarge type set in Flash...and that will cause a chunk of your audience to just not bother reading the site.
10.Sep.2007 8.45am
If you are making it in Html increase the fontsize to at least 11px/pt for serif typefaces (georgia is recommended) and 10 px/pt for sans typefaces (verdana).
The antialiasing of the typefaces is a problem if you have not restricted the design to follow a pixel grid. If you are working in Adobe illustrator CS3 (you can specify when creating a new document) that the resolution is 72dpi and pixel preview. Go into the preferences and create a grid 10px by 10px with 10 subdivisions. Make it snap to grid (The clue here is to always think in pixels even with type (size and leading). If you do this it should solve the problem. Do this also if you are creating images of the text and save for web directly from illustrator (Make sure you create a background box which is exactly the documentsize and aligned to the artboard).
10.Sep.2007 8.46am
What platform and browser were they using when they thought the text was too small? If you’re not using images, and the text is spec’d in HTML, are you sure they were seeing American Typewriter, and not Courier?
Jason C
10.Sep.2007 8.58am
Jason has a point;-)
10.Sep.2007 11.16am
I’m not a big fan of websites that force font sizes on users. There is a certain class of user for whom your type IS too small, by a large range. I prefer to create sites that use percentage or em dimensions, so that a user who needs it can enlarge the type by using the font settings within the browser.
10.Sep.2007 11.51am
For the record, all sane browsers allow for the resizing of any HTML type on screen.
It’s IE that isn’t as sane and makes it a PITA for any site using px settings for type sizes.
10.Sep.2007 2.23pm
hey guys
thanks a lot for the response and your ongoing feedback - appreciate it!
no, it’s all images - I don’t wanna give the user the opportunity to resize the font, because it’s going to clutter my design ;-) - yeah, sorry, I know! I hate that too, but it’s not gonna work. Plus - who got American Typewrite pre-installed on a Mac or PC?
so it’s all gonna be images - gif’s. No flash, traditional html and javascript coding. I could have done it in flash, but why, if javascript does the job just fine as well.
I won’t stick to American Typewriter I guess, you’re right, the serifs clutter and it’s just not working out. I will go for a sans serif I guess to increase readability - I will keep you updated. If you got any suggestions, please feel free to post them here.
11.Sep.2007 6.50am
“no, it’s all images - I don’t wanna give the user the opportunity to resize the font, because it’s going to clutter my design “
That’s just bad design. ;o)
If you must, then I’d set that type at 14px minimum. Unless all the art directors you’re going to send a link to are under 30. ;o)
11.Sep.2007 7.03am
Darrel is right! Not really the way to go about webdesign making it all images.
Why are you so locked onto American Typewriter?
Georgia is nice isn’t it?
11.Sep.2007 9.56am
On my 21” display running at 2048×1536 (with an effective resolution of 133PPI), your entire image frame is smaller than a postcard, and it appears centered on the screen surrounded by oceans of whitespace. At a normal viewing distance, the text in the frame is completely undecipherable.
Please don’t use images or Flash to present text. It doesn’t work.
11.Sep.2007 1.44pm
i guess you guys are right!
well lets see then - how about using a flash script like on this site, where I can define a sans-serif type that fits, one that is clear and readable in small sizes. I have Frutiger or Avenir in mind. I’ll set it to about 10px. So when the user has flash blocked, it will refer to a standart font like Verdana.
Yes, Georgia is a very nice font, agreed. I won’t stick to AT - I’m through with that. I just like the font a lot - I am very fond of typewriter faces - dunno why, I like that they have increased tracking, I like the overall shape of american typewriter, it’s massive serifs. it looks rough but elegant at the same time. it looks standardised still uneven but charming. I love the touch and feel of a sheet typed on a real old fashioned typewriter. You can feel where the machine hit the pages, you can see the ink that has been absorbed by the pores of the paper. It’s the real thing - no computer can imitate that. I don’t know, I just love the type, you don’t have to agree with me, just my oppinion. I agree with you guys, it doesn’t look right in really small sizes so I won’t use it. Don’t want my users to go blind ;-)
Now that I’ve thought about it, I might even use a serif font - I love Glypha and Caecilia (maybe Caecilia 55 or 75) - maybe it’s because they kinda remind me of some typewriter font.
how do you think about that?
11.Sep.2007 1.58pm
The other issue that comes up with using images in place of text is usability/accesibilty. To do this right, you need to supply all the text to be shown as images, in ALT tags. This is necessary for any who’s sight impaired, or otherwise using some sort of reader than voices the text.
W3’s themes of accessible design
Jason C
11.Sep.2007 2.00pm
“I am very font of typewriter faces” Lol
I love a nice sheet of real typewriter type set on paper with individual caracteristics to each a, each f. This is why I do not like it as a font. Each a looks the same, each g the same. Typewriter fonts on a computer doesn’t really do it for me. But then again that’s just me. Everyone else is of course entitled to their own opinion.
The thing about Georgia is that it is made for screen and will not appear blurry in the edges like Avenir or Frutiger, Glypha or Caecilia will appear. This is the reason I suggested it. Do a search for forum topics concerning webfonts here on typophile to find which a made for web (also flash). If you cannot find one start up a new thread where you ask for it.
It just seems to me you are so focused on how this thing should look that you are willing to ignore the user (your target audience). That’s just not right.
You posted a topic where you asked for a crit which shows you know something’s not right however even now you have not yet been able to fully convince yourself;o)
11.Sep.2007 2.17pm
>>“I am very font of typewriter faces” Lol
hey, I’ve changed that long ago ;-)
11.Sep.2007 2.22pm
I don’t know if it classifies as a freudian slip!?!? In here it probably would;o) lol
11.Sep.2007 2.42pm
yeah, rub it in ;-)
11.Sep.2007 2.50pm
Of topic Jan but have to ask: Jan is a Germanic name (germanic & scandinavian countries). What’s your family background? Just curious. Don’t answer if you don’t feel like it!
11.Sep.2007 3.15pm
I am german, my Dad was born on a ship and grew up in the very north of Germany, close to the coast. So he loves the sea and water. My family now lifes in the west if Germany, very close to the Dutch border. However my real first name is Jan-Rasmus, which should sound even more Scandinavian to you ;-) . I know - not in this combination (that’s what my Swedish friends told me at least) - but still, there are very, very few Jan-Rasmus’ in Germany (I don’t know any). So my Dad is very much into Scandinavia and England, and I guess that fondness transferred onto me- I prefer traveling up north rather than going south. I used to live in London for three years where I made lots of good friends. About Scandinavia: I like the clean air, open water, landscape, the people and food. I always had a Fjällräven while all my classmates in highschool thought their Eastpak’s were cool - yeah, right. They all looked the same. Now in design university I’m still the only one with a Fjällräven - yesssss. And last but not least - I like Scandinavian design a lot.
So much about my Scandinavian “roots” ;-)
11.Sep.2007 3.26pm
You could use sIFR to replace the text with flash. It’s more accessible than using images. But consider that this method is used mostly for headers and not for body text. Also, the flash text might take a bit to appear.
Resizable text and screen fonts exist for a reason. If you can’t make a website that works well with those, you should hire a web designer. I say this in the nicest way possible. After all, I hire print designers to help me with my print projects.
Also, body text with images was ok in 1998.
11.Sep.2007 3.35pm
Of topic again but good on you Jan-Rasmus (very Scandinavian indeed)! Fjällräven has the nicest logo and products! Gotta love the oldschool stuff! Where are you studying?
11.Sep.2007 8.06pm
Always design a web page with the worst-case scenario in mind.
12.Sep.2007 1.12am
Nell: Don’t worry, I got you. Web design is very different from Graphic Design or Print Design. However I wanna do it myself - it sounded arrogant when I first stated, that I don’t want the user to clutter my design. However, I saw it from a graphic designers point of view. I must admit, that if the user manages to clutter my design while only increasing the font size to some degree my design must be bad. I can only learn... :-)
Robert: I totaly agree.
12.Sep.2007 1.15am
Hey there, good morning :-)
Yeah, I like their logo a lot - it’s an eyecatcher, very different from anything else on the market. At the moment I have a classic black one - I’ve seen them in dark blue, but in my oppinion a Fjällräven gotta be black. I currently study in Cologne, but I need to take the train, because I can’t afford living there. I need space, for that I don’t believe in my Mac as being the primary tool for my work. I still wanna “feel” what I do - I like to spray (stencil) and built dummy’s of my work. So a box room in Cologne is just not right for me. Before I finished my Foundation Degree in Graphic Design at the LCC, London College of Communication.
I checked your agency’s site - very nice work, indeed. I love it - but it’s all in flash!!! - now what if a user.... hehe ;-D .
12.Sep.2007 1.42pm
You got me there Jan;-) hehe ;-D It’s definetly in flash but I don’t think I said something bad about flash;-) I just talked about typefaces for screen and pointsizes in general. I’m not as strict as some others in here when it comes to flash or html. Just consider the typesizes and choice of font when using flash as carefully as you would when using html.
12.Sep.2007 1.47pm
“To do this right, you need to supply all the text to be shown as images, in ALT tags. “
Just to nitpick...that’s alt ATTRIBUTES...not tags. ;o)
12.Sep.2007 1.52pm
I must admit, that if the user manages to clutter my design while only increasing the font size to some degree my design must be bad. I can only learn... :-)
One way to think of it is that you are simply designing within a given medium. No more than you might use oil paint with a watercolor paper, or more extremely, chisels with a canvas, the web is what it is, and what seems like a weakness of the format (people messing with what you make) can be what distinguishes it (interactivity). Another analogy; you don’t design a car to exist in 2d. And if you are lucky, you get to design the underpinnings at the same time as the outer lines.
The choice between basic javascripts, ajax, flash, and a million other dynamic scripting/pretty rendering solutions is, for now, wide open. Each has advantages, and I would recommend considering not only the simplest to create with, but to maintain with your skills.
If you really want the typewriter look, try to find a good typewriter, and scan in some blocks of splash text. Done sparingly, with the appropriate accessibility (err) attributes can do a much better job than most Typewriter fonts, and cheaper if you already have a scanner. You can type a nice justified block with the mechanical carriage return, a tricky half-spacer and all the real nuances that we once hated, and still be having fun when the sun rises. I am partial to a Smith-Corona Clipper, myself.
13.Sep.2007 6.14am
>>Just to nitpick...that’s alt ATTRIBUTES...not tags. ;o)<<
d’oh! guess it’s been a while since I coded my HTML manually.
Jason C
13.Sep.2007 7.02am
“One way to think of it is that you are simply designing within a given medium.”
Yes. Print design is about dictating a specific design. Web design is about suggesting a specific design. The latter being just a suggestion is open to change based on user preferences, browsing device, etc.