Re: [WSG] CSS font-size-adjust
On Mon, 20 Oct 2008 12:36:26 -0400, Christian Montoya wrote:
- What's the support across browsers / machines for the font-size-adjust
property? -
Is adjusting the aspect value bad form? Is this as bad as letter-spacing
body
copy? Would this kill sheep?
- Has anyone done this before? Is there an ideal aspect value for screen
display?
On Mon, Oct 20, 2008 at 8:41 PM, David Hucklesby [EMAIL PROTECTED] replied:
Hi Christian,
I believe that Firefox 3 supports it, but must admit I have not tried using
it.
Interestingly I can't see the property listed in Sitepoint's Ultimate CSS
Reference. Hmm.
As for setting up font stacks, I found this article useful:
http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/
The linked PDF with samples of each type face shown side-by-side
is a useful resource too, I think.
On Mon, 20 Oct 2008 22:44:26 -0400, Christian Montoya wrote back:
David,
I've been looking at that exact article, actually. It's very helpful. I guess
the
biggest dilemma, currently, is that I am to come up with a consistent
vertical rhythm,
but with just font-size and line-height alone, such as:
body {
font-size:75%;
line-height: 1.5;
}
it's not enough. The difference in x-height between small fonts like
Calibri and
large fonts like Verdana makes for very different results. As far as I can
tell, even
using pixel or point sizes for fonts doesn't make a difference. And I'm
guessing that
as far as browser compatibility goes, there's nothing that does. Is that
right?
Interesting. I have been doing some extensive tests to get that
vertical rhythm to work cross-browser. I had not considered the
differing x-height between fonts. I'll make some more tests and report
back.
Meantime, I found the most consistent results using 100% base font
in IE, and 16 pixels for the rest. !00% base just does not work for all.
After that, I found I can use percents or EMs, calculated from nominal
pixels, for most everything-- as long as you round *any* fraction up
to the next higher .01em for Safari.
Note: some browsers only apply whole percents, so more precision
may upset things.
Here are my results so far:
Nominal Points Size Pixels/ Percent
6pt nonpareil 8px 50%
7pt minion 9px 56.5%
8pt brevier 11px69%
9pt bourgeois 12px75%
10pt long primer13px82%
11pt small pica 15px94%
12pt pica 16px100%
14pt english19px119%
16pt columbian 21px132%
18pt great primer 24px150%
21pt double small pica 28px175%
24pt double pica32px200%
36pt double great primer48px300%
(Hope this isn't too muddled.)
P.S. - I use a line-height in EMs, based off the base, for body text
that's close to 100% to get equal vertical spacing. But I do need
to test various font faces, as you suggest. Also, DPI other than 96.
Cordially,
David
--
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] CSS font-size-adjust
Hi Christian, Christian Montoya wrote on 20-10-2008: http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/ Back in September 2006 I wrote a piece that reached some similar conclusions to that above http://www.webspaceworks.com/resources/fonts-web-typography/60/ At the time the use of font-size-adjust was an impractical solution due to it's very poor support among browsers... not even consistently across all platforms for firefox. I don't think much has changed in that regard, but would have to check to be sure. The best solution therefore was to use available resources regarding font availability and to plan typography around that, looking for fonts of similar aspect ratio with which to build your family (or stack, call it what you will). I've also setup tables of aspect ratios and x-widths for some common fonts, since aspect ratios don't give necessarily the complete picture (verdana and tahoma share the same aspect ratio, but differ significantly in x-width). http://www.webspaceworks.com/resources/fonts-web-typography/43/ Hope these may be of some use... Cheers Rob *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] CSS font-size-adjust
On Tue, Oct 21, 2008 at 7:14 AM, Rob Schumann [EMAIL PROTECTED] wrote: Hi Christian, Christian Montoya wrote on 20-10-2008: http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/ Back in September 2006 I wrote a piece that reached some similar conclusions to that above http://www.webspaceworks.com/resources/fonts-web-typography/60/ At the time the use of font-size-adjust was an impractical solution due to it's very poor support among browsers... not even consistently across all platforms for firefox. I don't think much has changed in that regard, but would have to check to be sure. The best solution therefore was to use available resources regarding font availability and to plan typography around that, looking for fonts of similar aspect ratio with which to build your family (or stack, call it what you will). I've also setup tables of aspect ratios and x-widths for some common fonts, since aspect ratios don't give necessarily the complete picture (verdana and tahoma share the same aspect ratio, but differ significantly in x-width). http://www.webspaceworks.com/resources/fonts-web-typography/43/ Thanks Rob, I think that just about answers all my questions. Would it be possible for you to update your tables with the Vista fonts? -- -- Christian Montoya christianmontoya.net *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] CSS font-size-adjust
On 2008/10/21 18:14 (GMT+0700) Rob Schumann composed: Christian Montoya wrote on 20-10-2008: http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/ Back in September 2006 I wrote a piece that reached some similar conclusions to that above http://www.webspaceworks.com/resources/fonts-web-typography/60/ Neither of those take into account the recent and current states of FOSS fonts. It would be nice to see yours updated to take into account: 1-DejaVu is a continually developed and better hinted superset of no longer developed Bitstream Vera that has replaced Vera in most Linux distros for several years now. An installation of the OpenOffice.org 3.0 w/ JRE package on WinXP results in 21 DejaVu*ttf files being added to \WINDOWS\Fonts. 2-The Liberation font suite was developed to function as an alternative to installing the Microsoft Core Web Fonts package on Linux. Its single metric equivalent serif (Liberation Serif=Times New Roman), sans-serif (Liberation Sans=Arial/Helvetica) and monospace (Liberation Mono=Lucida Console/Courier New) components are available either by default or as an option with installation of most recent and current Linux distros. 3-Linux fontconfig provides a font stack for fallback. For purposes of this thread, I've made available three examples from major distros: Fedora 10 http://fm.no-ip.com/tmp/Linux/45-latin.conf-fc10 Mandriva 2009 http://fm.no-ip.com/tmp/Linux/45-latin.conf-mdv2009 openSUSE 11.1 http://fm.no-ip.com/tmp/Linux/suse-post-user.conf We have been told in a (IIRC) Novell Bugzilla comment by the fonts team leader Mike Fabian that openSUSE's order within its alias file was set primarily dependent on font quality, particularly in the areas of charset coverage, byte code and hinting. Contrast that to the other two, which leave x-height pretty much a non-issue, seen by the separation between DejaVu Sans and Verdana in both files. -- Everyone should be quick to listen, slow to speak, and slow to become angry. James 1:19 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://fm.no-ip.com/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] CSS font-size-adjust
Hi Christian, Christian Montoya wrote on 21-10-2008: Thanks Rob, I think that just about answers all my questions. Would it be possible for you to update your tables with the Vista fonts? I've updated the aspect-ratio/x-widths article to include the 6 'C' fonts of Vista http://www.webspaceworks.com/resources/fonts-web-typography/43/ Updates for other fonts, and to bring font availability tables up-to-date will follow later. Cheers Rob *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] CSS font-size-adjust
On 2008/10/21 23:40 (GMT+0700) Rob Schumann composed: I've updated the aspect-ratio/x-widths article to include the 6 'C' fonts of Vista http://www.webspaceworks.com/resources/fonts-web-typography/43/ At some point you might want to mention that, unlike most monospace fonts, which match each other in width at most or all sizes, Consolas in many common sizes renders considerably narrower, as if called in the next smaller size. You should be able to see examples on http://fm.no-ip.com/auth/Font/fonts-face-samplesM.html Updates for other fonts, and to bring font availability tables up-to-date will follow later. Looking forward to it. :-) -- Everyone should be quick to listen, slow to speak, and slow to become angry. James 1:19 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://fm.no-ip.com/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] CSS font-size-adjust
Hello list, I am currently investigating the disparities between various screen fonts and trying to come up with good font stacks that I can use in Blueprint CSS [1]. I found this page: http://www.w3schools.com/CSS/pr_font_font-size-adjust.asp which explains how Verdana and Times, for example, have different aspect values. One of the problems I've had with specifying font families is that the size of text blocks, and the overall look of a page, is greatly affected if the user sees it in a different font from the intended choice, such as Verdana vs. Lucida Grande, because the actual size of the font (beyond just the font-size property) is vastly different. A further problem is that recently common fonts such as the Vista font collection (Calibri, Cambria, etc.) are significantly smaller at the same font-size as the classic Windows fonts (Arial, Verdana, Georgia, Trebuchet). Ultimately the goal is to be able to set up a font stack with fonts that have similar aspect values, letter widths, spacing, etc. so that the difference from one OS or device to the next is minimal, but it seems that I would have to adjust the aspect value with CSS to make that happen. So here are my questions: - What's the support across browsers / machines for the font-size-adjust property? - Is adjusting the aspect value bad form? Is this as bad as letter-spacing body copy? Would this kill sheep? - Has anyone done this before? Is there an ideal aspect value for screen display? Thanks in advance. [1] http://blueprintcss.org -- -- Christian Montoya christianmontoya.net *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] CSS font-size-adjust
Just to throw this in the mix - stop trying to control the font size! I dont require reading glasses (yet...), but due to weak eyesight for small fonts and high-resolution screens causing poor font scaling, I choose to increase the size of the default values for some fonts eg: I setup fonts to be 150% of the page's requirements. Whatever design you choose, will probably not meet everyones expectations; you can however mitigate most of the problems, by simply not using fixed positioning. cheers, Mathew Robertson Christian Montoya [EMAIL PROTECTED] wrote: Hello list, I am currently investigating the disparities between various screen fonts and trying to come up with good font stacks that I can use in Blueprint CSS [1]. I found this page: http://www.w3schools.com/CSS/pr_font_font-size-adjust.asp which explains how Verdana and Times, for example, have different aspect values. One of the problems I've had with specifying font families is that the size of text blocks, and the overall look of a page, is greatly affected if the user sees it in a different font from the intended choice, such as Verdana vs. Lucida Grande, because the actual size of the font (beyond just the font-size property) is vastly different. A further problem is that recently common fonts such as the Vista font collection (Calibri, Cambria, etc.) are significantly smaller at the same font-size as the classic Windows fonts (Arial, Verdana, Georgia, Trebuchet). Ultimately the goal is to be able to set up a font stack with fonts that have similar aspect values, letter widths, spacing, etc. so that the difference from one OS or device to the next is minimal, but it seems that I would have to adjust the aspect value with CSS to make that happen. So here are my questions: - What's the support across browsers / machines for the font-size-adjust property? - Is adjusting the aspect value bad form? Is this as bad as letter-spacing body copy? Would this kill sheep? - Has anyone done this before? Is there an ideal aspect value for screen display? Thanks in advance. [1] http://blueprintcss.org -- -- Christian Montoya christianmontoya.net *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] CSS font-size-adjust
I am sure most experienced Web authors know this, but some newer ones might not. A quick and handy way to incrementally zoom and/or change text size when viewing a web page is via keyboard shortcuts (Windows O/S): Here is an expanded and updated compilation for zooming and/or changing text size via keyboard shortcuts (Windows O/S) when viewing web pages : When using ]MSIE] . Zoom out: ctrl + (larger - repeat until desired size is obtained) Zoom in: ctrl - (smaller - repeat until desired size is obtained) Return to original size: ctrl 0 (zero) When using Firefox . same as with MSIE (You can specify change text size only in Firefox via the top menu bar: View --- Zoom --- Zoom Text only. Setting remains until changed. The above keyboard shortcuts will now only change the text size leaving the image sizes as original). When using Safari/Chrome . same as with MSIE except the keyboard shortcuts only change the text size leaving the image sizes as original. When using Opera . same as for Firefox/MSIE except use shift + for Zoom out. (Quick zooming via a scrolling mouse: ctrl - scroll wheel) Web developers/authors might want to check pages they are composing to be sure navigation is not affected by incremental zooming (visitors will seldom zoom more than three increments). In my experience, many visitors (especially those with diminished vision) to web pages now increase the text size by one or two increments for easier reading especially when very small text is encountered. James -- http://jp29.org/index.php - Web Authoring References Resources Non-commercial interoperable web pages Mathew Robertson [EMAIL PROTECTED] wrote: Just to throw this in the mix - stop trying to control the font size! I dont require reading glasses (yet...), but due to weak eyesight for small fonts and high-resolution screens causing poor font scaling, I choose to increase the size of the default values for some fonts eg: I setup fonts to be 150% of the page's requirements. Whatever design you choose, will probably not meet everyones expectations; you can however mitigate most of the problems, by simply not using fixed positioning. cheers, Mathew Robertson Christian Montoya [EMAIL PROTECTED] wrote: Hello list, I am currently investigating the disparities between various screen fonts and trying to come up with good font stacks that I can use in Blueprint CSS [1]. I found this page: http://www.w3schools.com/CSS/pr_font_font-size-adjust.asp which explains how Verdana and Times, for example, have different aspect values. One of the problems I've had with specifying font families is that the size of text blocks, and the overall look of a page, is greatly affected if the user sees it in a different font from the intended choice, such as Verdana vs. Lucida Grande, because the actual size of the font (beyond just the font-size property) is vastly different. A further problem is that recently common fonts such as the Vista font collection (Calibri, Cambria, etc.) are significantly smaller at the same font-size as the classic Windows fonts (Arial, Verdana, Georgia, Trebuchet). Ultimately the goal is to be able to set up a font stack with fonts that have similar aspect values, letter widths, spacing, etc. so that the difference from one OS or device to the next is minimal, but it seems that I would have to adjust the aspect value with CSS to make that happen. So here are my questions: - What's the support across browsers / machines for the font-size-adjust property? - Is adjusting the aspect value bad form? Is this as bad as letter-spacing body copy? Would this kill sheep? - Has anyone done this before? Is there an ideal aspect value for screen display? Thanks in advance. [1] http://blueprintcss.org -- -- Christian Montoya christianmontoya.net *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] CSS font-size-adjust
On Mon, Oct 20, 2008 at 6:21 PM, [EMAIL PROTECTED] wrote: I am sure most experienced Web authors know this, but some newer ones might not. A quick and handy way to incrementally zoom and/or change text size when viewing a web page is via keyboard shortcuts (Windows O/S): Could someone please read the body of my email instead of just looking at the title and then post a response that is on-topic? -- -- Christian Montoya christianmontoya.net *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] CSS font-size-adjust
Christian Montoya wrote: Could someone please read the body of my email instead of just looking at the title and then post a response that is on-topic? OK :-) CSS2's 'font-size-adjust' support is limited to Gecko/Fx IIRC, and is probably put on hold by the W3C CSS group for the time being - to pop back up in a later CSS version. regards Georg -- http://www.gunlaug.no *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] CSS font-size-adjust
Christian Montoya [EMAIL PROTECTED] wrote: On Mon, Oct 20, 2008 at 6:21 PM, [EMAIL PROTECTED] wrote: I am sure most experienced Web authors know this, but some newer ones might not. A quick and handy way to incrementally zoom and/or change text size when viewing a web page is via keyboard shortcuts (Windows O/S): Could someone please read the body of my email instead of just looking at the title and then post a response that is on-topic? My apologies -- I was remiss. James -- http://jp29.org/index.php Web Authoring References Resources *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] CSS font-size-adjust
On Mon, 20 Oct 2008 12:36:26 -0400, Christian Montoya wrote: - What's the support across browsers / machines for the font-size-adjust property? - Is adjusting the aspect value bad form? Is this as bad as letter-spacing body copy? Would this kill sheep? - Has anyone done this before? Is there an ideal aspect value for screen display? Hi Christian, I believe that Firefox 3 supports it, but must admit I have not tried using it. Interestingly I can't see the property listed in Sitepoint's Ultimate CSS Reference. Hmm. As for setting up font stacks, I found this article useful: http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/ The linked PDF with samples of each type face shown side-by-side is a useful resource too, I think. Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] CSS font-size-adjust
On Mon, Oct 20, 2008 at 8:41 PM, David Hucklesby [EMAIL PROTECTED] wrote:
On Mon, 20 Oct 2008 12:36:26 -0400, Christian Montoya wrote:
- What's the support across browsers / machines for the font-size-adjust
property?
- Is adjusting the aspect value bad form? Is this as bad as letter-spacing
body copy?
Would this kill sheep?
- Has anyone done this before? Is there an ideal aspect value for screen
display?
Hi Christian,
I believe that Firefox 3 supports it, but must admit I have not tried
using it. Interestingly I can't see the property listed in Sitepoint's
Ultimate CSS Reference. Hmm.
As for setting up font stacks, I found this article useful:
http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/
The linked PDF with samples of each type face shown side-by-side
is a useful resource too, I think.
David,
I've been looking at that exact article, actually. It's very helpful.
I guess the biggest dilemma, currently, is that I am to come up with a
consistent vertical rhythm, but with just font-size and line-height
alone, such as:
body {
font-size:75%;
line-height: 1.5;
}
it's not enough. The difference in x-height between small fonts like
Calibri and large fonts like Verdana makes for very different
results. As far as I can tell, even using pixel or point sizes for
fonts doesn't make a difference. And I'm guessing that as far as
browser compatibility goes, there's nothing that does. Is that right?
--
--
Christian Montoya
christianmontoya.net
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] CSS font-size-adjust
On Mon, Oct 20, 2008 at 6:21 PM, [EMAIL PROTECTED] wrote: I am sure most experienced Web authors know this, but some newer ones might not. A quick and handy way to incrementally zoom and/or change text size when viewing a web page is via keyboard shortcuts (Windows O/S): Could someone please read the body of my email instead of just looking at the title and then post a response that is on-topic? -- -- Christian Montoya christianmontoya.net *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] CSS font-size-adjust
Christian Montoya wrote: Could someone please read the body of my email instead of just looking at the title and then post a response that is on-topic? OK :-) CSS2's 'font-size-adjust' support is limited to Gecko/Fx IIRC, and is probably put on hold by the W3C CSS group for the time being - to pop back up in a later CSS version. regards Georg -- http://www.gunlaug.no *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] CSS font-size-adjust
Christian Montoya [EMAIL PROTECTED] wrote: On Mon, Oct 20, 2008 at 6:21 PM, [EMAIL PROTECTED] wrote: I am sure most experienced Web authors know this, but some newer ones might not. A quick and handy way to incrementally zoom and/or change text size when viewing a web page is via keyboard shortcuts (Windows O/S): Could someone please read the body of my email instead of just looking at the title and then post a response that is on-topic? My apologies -- I was remiss. James -- http://jp29.org/index.php Web Authoring References Resources *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
