FreewayTalk
32 replies to this thread. Most Recent
[Pro] Best text font size?
I’m soon to begin crafting a web site for a high-end facial treatment company. Mostly, I’ve done corporate kinds of sites, and the new one presents me with some exciting possibilities in design.
But here’s a question given the high-resolution screens that are more and more prominent and make text appear so small that users have to squint or bump up the text size in their browsers (which I’ve learned few know how to do.) Anyway, my question: What do you think is basically an optimal body text size these days? I’ve been working with Verdana 12 on most sites, but am beginning to think Verdana 14 might actually be more desirable.
Thoughts? Any new wisdom on this that may have come about in recent years?
My new site, if it matters (and it no doubt does) primarily caters to an age group of about 40-55.
Thanks for any advise. This is the first time I’ll be attempting a full CSS layout and I’m hoping to do it right the first time around. (If wishes were fishes … )
Laura
This is the first time I’ll be attempting a full CSS layout and I’m hoping to do it right the first time around.
Personally I choose 12 but the main thing to remember is that if you create and name your styles properly and apply them consistently then it is an easy task to make site-wide style adjustments without rooting about in every page changing things individually.
David
Glasgow, Scotland
iMac 27 Snow and Pro 5.6.3
I’m a fan of relative font sizes (though around here I think I’m in the minority). You have to give up a small amount of pixel precision for something that’s fluid and more accessible on older browsers with regard to enlarging text (not zooming the entire page). It does take a little extra work to get used to (it’s not plug-n-play simple like pixel units) but it works just fine all the same.
Todd
Thoughts? Any new wisdom on this that may have come about in recent years?
My new site, if it matters (and it no doubt does) primarily caters to an age group of about 40-55.
If 14 seems better then go with 14. No new wisdom, although it is true that the average pixel density of displays has been increasing. And that age group is precisely the one that tends to have some developing eyesight problems but may not yet be dealing with it properly.
k
Thoughts? Any new wisdom on this that may have come about in recent years?
My new site, if it matters (and it no doubt does) primarily caters to an age group of about 40-55.
If 14 seems better then go with 14. No new wisdom, although it is true that the average pixel density of displays has been increasing. And that age group is precisely the one that tends to have some developing eyesight problems but may not yet be dealing with it properly.
k
On 21 Feb 2010, 1:23 am, Todd wrote:
I’m a fan of relative font sizes (though around here I think I’m in the minority)….
I copy that.
You do that in the style-menu. Choose % or em in stead of something like normal or 12px It’s about scalable text. If you set your font in px, unexpected thing might happen. Relative means here a percentage of the standard settings of a browser. 100% follows the default browser setting, genarally 16px. Most designers choose a lower value, because this is too big. There is a lot to find about this subject on the web. Like here, comparision between em and % (always worth a nice discussion…:-) http://www.edesignerz.net/components/com_feedpost/feedpost.php?url=http://feedproxy.google.com/~r/designshacklinks/~3/kM1hXeHe72A/css-font-size-em-vs-px-vs-pt-vs-percent&site=EDESIGNERZ.NET or this http://www.w3.org/WAI/GL/css2em.htm
And a table to compare pixel em % and points: http://pxtoem.com/
So, if your body style is set to say 75% it means that this is your base setting for that document. To continue styling text in your document you could now set line-height tracking etc in your p-tag. And define other classes as well.
But there are other methodes thinkable, like styling your p-tag completely, including the size in %. So no body tag in the document.
Just try it out. And remember, you as a designer have -almost- no influence how your visitors see the page, just because of user preferences that might overrule your settings. That said, the majority never ever changes the default values because they do not know how….
Thanks for all who responded to this thread. My favorite turns out to be Dan J’s with his recommendation for “lucky 13px Helvetica.” I kind of like Verdana, but after reading this thread and considering my own situation, I think I’m moving to a compromise between Verdana 12 and 14, and like Dan, thinking 13 might just be the ticket.
Laura
Be sure you’ve checked the browser stats for your site, and looked at the site in your most popular browser (might be some flavor of PC) before committing to this.
You may be shocked to discover the leaky boat that is Windows typography[1] and the dodgy cloned fonts (with incomplete kerning pairs) that sail in it. Furthermore, Helvetica was never designed for screen view (unlike Tahoma, Verdana, and even lowly Arial) and so it tends to suffer really badly at text sizes, especially when confronted by a perfect storm such as the aforementioned leaky boat (just to mangle the metaphor a little more).
Walter
- Yes, I know about http://bit.ly/jszMi
On Feb 22, 2010, at 9:05 AM, LauraB wrote:
Thanks for all who responded to this thread. My favorite turns out to be Dan J’s with his recommendation for “lucky 13px Helvetica.” I kind of like Verdana, but after reading this thread and considering my own situation, I think I’m moving to a compromise between Verdana 12 and 14, and like Dan, thinking 13 might just be the ticket.
Laura
Freeway user since 1997
Sigh. Maybe I’ll just stick with Verdana 12, unless, Walter, you’re advising against Helvetica 13 but okay with Verdana 13. Wasn’t quite clear on that.
Laura
On 22 Feb 2010, 1:17 pm, waltd wrote:
Be sure you’ve checked the browser stats for your site, and looked at the site in your most popular browser (might be some flavor of PC) before committing to this.
You may be shocked to discover the leaky boat that is Windows typography[1] and the dodgy cloned fonts (with incomplete kerning pairs) that sail in it. Furthermore, Helvetica was never designed for screen view (unlike Tahoma, Verdana, and even lowly Arial) and so it tends to suffer really badly at text sizes, especially when confronted by a perfect storm such as the aforementioned leaky boat (just to mangle the metaphor a little more).
Walter
- Yes, I know about http://bit.ly/jszMi
On Feb 22, 2010, at 9:05 AM, LauraB wrote:
Thanks for all who responded to this thread. My favorite turns out to be Dan J’s with his recommendation for “lucky 13px Helvetica.” I kind of like Verdana, but after reading this thread and considering my own situation, I think I’m moving to a compromise between Verdana 12 and 14, and like Dan, thinking 13 might just be the ticket.
Laura
Furthermore, Helvetica was never designed for screen view (unlike Tahoma, Verdana, and even lowly Arial) and so it tends to suffer really badly at text sizes
This is a REALLY good point.
Ironically, this holds true to an extent for Times as well - the font that’s used as the default if no specific font instruction is supplied.
k
unless, Walter, you’re advising against Helvetica 13 but okay with Verdana 13.
Yes, just avoid Helvetica for body text sizes. Verdana at 13px is rather nice, depending on the rest of the design structure of course.
k
I’ve noticed that FW replaces Helvetica with Arial in the source code. If you select Helvetica as your body text this is what’s in the code
font-family:Arial,Helvetica,sans-serif
instead of this
font-family:Helvetica,Arial,sans-serif
Marcel
This has been a niggle of mine for a while and something that I’d almost become blind to in Freeway. It’s simply a font set naming oversight as the primary font isn’t Helvetica but, as you say, Arial. Regards, Tim.
On 22 Feb 2010, at 16:16, Helveticus wrote:
I’ve noticed that FW replaces Helvetica with Arial in the source code. If you select Helvetica as your body text this is what’s in the code
font-family:Arial,Helvetica,sans-serifinstead of this
font-family:Helvetica,Arial,sans-serif
FreewayActions.com - Freeware and commercial actions for Freeway Express & Pro. ………………………………………………………………………… Protect your mailto links from being harvested by spambots with Anti Spam. Only available at FreewayActions.com ………………………………………………………………………… http://www.freewayactions.com
On 22/02/2010 at 23:04, Tim Plumb <email@hidden> wrote:
It’s simply a font set naming oversight as the primary font isn’t Helvetica but, as you say, Arial.
Oversight or not, it probably helps print designers ease into the web medium - although it doesn’t educate them.
Helvetica is not a terribly good choice for body-size text on screen. This isn’t a ‘bash Helvetica’ thing, although that typeface is one of the most over-used fonts in the non-web world. As Walter already mentioned, the characters in Helvetica are simply not that clear on screen at small sizes. Arial is better by design for screen work. But most print designers tend to prefer Helvetica to Arial.
Typographically speaking they are not direct equivalents; Arial is softer than Helvetica, with a less squared-off structure and many stem terminators cut at slight angles. It IS regarded by many as a Helvetica clone but, although the metrics are virtually identical (making the two fonts good ‘swap-outs’ for each other in font sets), it is actually based on the older Monotype Grotesque typeface. In detail it is more of a Humanist form of sans-serif than Helvetica, which is, in contrast, moderately industrial in feel and execution.
k, the type geek
My problem with the naming of the font set is simply that the label is not what you are getting in the tin. If I apply this font set then I’m expecting Helvetica but will only see Helvetica if Arial somehow fails (which in itself should be highly unlikely as it’s a web safe font). My ‘expectation vs. reality’ needle jumps into the red zone, that’s all. Regards, Tim.
On 23 Feb 2010, at 18:11, Keith Martin wrote:
On 22/02/2010 at 23:04, Tim Plumb <email@hidden> wrote:
It’s simply a font set naming oversight as the primary font isn’t Helvetica but, as you say, Arial.
Oversight or not, it probably helps print designers ease into the web medium - although it doesn’t educate them.
Helvetica is not a terribly good choice for body-size text on screen. This isn’t a ‘bash Helvetica’ thing, although that typeface is one of the most over-used fonts in the non-web world. As Walter already mentioned, the characters in Helvetica are simply not that clear on screen at small sizes. Arial is better by design for screen work. But most print designers tend to prefer Helvetica to Arial.
Typographically speaking they are not direct equivalents; Arial is softer than Helvetica, with a less squared-off structure and many stem terminators cut at slight angles. It IS regarded by many as a Helvetica clone but, although the metrics are virtually identical (making the two fonts good ‘swap-outs’ for each other in font sets), it is actually based on the older Monotype Grotesque typeface. In detail it is more of a Humanist form of sans-serif than Helvetica, which is, in contrast, moderately industrial in feel and execution.
FreewayActions.com - Freeware and commercial actions for Freeway Express & Pro. ………………………………………………………………………… Protect your mailto links from being harvested by spambots with Anti Spam. Only available at FreewayActions.com ………………………………………………………………………… http://www.freewayactions.com
I use Helvetica on my site and I don’t have a problem with it. I do like the ‘industrial’ feel it gives, but I can also see how Arial is nice too. Either or works.
Dan, back to the % size. I cannot set %-size to the styles. Once I could set it somehow, but – strange - I could not use it on the text. Its on me, thats clear, but I have no idea where to seek.
MBPro 13.3”, 2.4 Ghz, Cinema Display, FW 5.5x Pro
I’ve been bugged by not understanding what FW will allow for settings of type sizes. Haven’t been able to get clear by reading the manuals.
It seems that FW will allow me to enter ems, pixels, etc. in the dialog boxes, but in some cases will not include the information in the HTML files it generates.
What are the rules for choosing/entering measurements in various places?
The rule is cascading. Settings are given through, from one level to another, from top to bottom. Meaning: If you set body to 75% (=highest level) that means all text is now set to 75% of the standard browser setting (normally 16px) If you then set your p-tag to 80%, this means 80% of your body-tag, so 80% of that 75% of that default browser setting. Normally you do not want that. Leave that part of your p-tag alone, just take care of the typical paragraph settings, like line-height background-colour (maybe) and so on. Same issue for fontset, colour, padding, tracking, a tag etc. Once you start asking these questions, its good to realise what CSS really is about. Because if you design without being aware of the impact of settings at a higher level, one could get unexpected results. Even if FW takes care of the most behind the scenes.
Excellent atelier, thank you. Its great to learn from you … Allow me one last question:
How do you do the font settings. What do you choose and what tags do you use? Lets say for example bodytext
Tag = p Font = helvetica Size = %75
To be honest - I am somehow confused with “leave p tag alone”. Why leave them alone. At least I’am quite near to wysiwyg - but actually Iam still far away.
Could you give us here an example?
Ehm… I my question clear :O)
MBPro 13.3”, 2.4 Ghz, Cinema Display, FW 5.5x Pro
Well thank you, but I’m also in a learning process you know……My way of doing as it is now is a result of trial and error. When starting a new project, I copy and rename a blank project with already preset styles, and I hardly create new styles in the Inspector. Why? I do not like styles like style34 style45 etc. It’s a control thing. I use the body tag to create settings that are important for all of the fonts in the whole document. That makes it more easy to focus on the exceptions. So I do not leave p-tag alone, I just do not have to think about the settings that are already in the body-tag, like relative size (and it’s 75%, not %75) But mind you, there are others that do not make a body tag at all, and put everything in the p-tag. There is not just one good methode, but several. Hope this helps, feel free to ask more :-) Hope others also give their idea’s about this.
So wait a minute. On one of my old sites I have some text that I set to 12px in Freeway, and yet it does scale in my browser! What’s going on? Is FW working some sort of magic behind the scenes?
Which browser? It’s Windows IE that has all the problems (the elephant in the living room). Mac browsers generally do not have any trouble scaling pixel-sized fonts in Web pages, and haven’t since Netscape 4 was considered state of the art.
Walter
On Mar 4, 2010, at 1:10 PM, derekzinger wrote:
So wait a minute. On one of my old sites I have some text that I set to 12px in Freeway, and yet it does scale in my browser! What’s going on? Is FW working some sort of magic behind the scenes?
Freeway user since 1997
Yes, and those lower than 8. I believe 8 can zoom pixel fonts, and even scales the pictures to match (not sure about that last part, might be mixing it up with Safari there…). The whole scale the type along with the pictures gag originated with (believe it or not) IE 5 for the Mac. At the time, and for quite a while after, too, it was the only one that did that basic thing to keep the layout roughly how you designed it while still zooming in to support the visually disabled.
Walter
On Mar 4, 2010, at 3:12 PM, derekzinger wrote:
Ah, that would explain it (Safari here). So the scaling issue mainly applies to IE then?
Freeway user since 1997
I’ve had a look around the web and what a mess of px ems and % values there seems to be.
The NY Times and Salon seem to use mainly ems, while Apple appears to use mainly pixels (perhaps to kill IE6 and 7?), and Microsoft and Google use a bizarre mixture of units: often px for font-size and ems for line-height. I haven’t found any examples of using %.
