The W3C is getting ready to set the new standards for typography on the Web, and we need your help.
A few weeks ago, while at the W3C CSS Work Group Face-To-Face meeting in San Diego, I volunteered, to be the advocate for several of the CSS 3 Modules. For the third version of Cascading Style Sheets, the Work Group had decided that, rather than trying to release one big document, they would release the CSS 3 specification in smaller modular chunks. As an advocate for parts of the overall CSS 3 specifications, I work to push my chosen modules through from a working draft to a full blown recommendation. It’s kind of like taking a bill through the US Congress, only with more transparency. I decided to take on the four issues which were going seemingly unnoticed by the rest of the group, but I believe will have a profound impact on the work we do as Web designers: CSS Basic UI, CSS Hyperlink Presentation, CSS Fonts, and CSS Web Fonts. It’s a lot of work, so I’ll be concentrating on the Font Modules first.
After that meeting, I got in contact with John Daggett of The Mozilla organization who volunteered to co-edit the CSS Fonts and CSS Web Fonts specifications with me. Seeing as he is responsible for working on the graphic and font implementations in Mozilla, he was a welcome addition.
So, what’s the difference between CSS Fonts and CSS Web Fonts except for the word “Web”? Let me tell you about them:
- The CSS Fonts module defines how type is displayed on the page; which font is used, it’s size, and how it is styled (bold, italics, small-caps, etc…). Font styles effect how the individual glyphs are displayed whereas text styles (such as underline) and applied evenly across all glyphs.
- The CSS Web Fonts module details how you download a font file for use in a Web page, just like you would download images. It also includes the ability to better match fonts for your design with those that are available to the end-user or even synthesize them on the fly.
Why not just treat these two specifications under one document to cover how fonts are used on Web pages? There is no real semantic reason to keep them separate, but unfortunately there are some logistical and technical reasons. How fonts will be downloaded for Web page use is being hotly debated in regards to how to protect fonts from improper use. Our worry is that by tying the two modules together, we might hold up the deployment of the basic CSS Font specification–for which there is relatively little contention–while the more disputed CSS Web Fonts specifications are debated.
The CSS Work Group is meeting in late August, and John and I will be presenting our revisions for both of these modules. We would appreciate your input especially if you are a designer working in CSS and HTML.
In the comments section of this blog, tell me what you think are some of the font styles and features missing from the current specification. What do you expect to be able to do with typography on your Web pages that you can not do now? What are you doing now with kludges that you would like to see simpler ways of doing? Keep in mind that we are talking about font properties and how to style the characters. This includes things like bold, italic, and even outline and emboss which effect how each glyph is rendered. It does not include styles that area applied over an entire block of text such as underlining or rotating text. Those are in different modules.
Also, let me know what you think about some of the new additions to the Fonts specification (font-size-adjust, font-stretch, font-effect, and font-smooth) and any problems you have with the current specifications.
Try to be as specific as possible, and provide examples and links if you can. I’m looking forward to seeing what the Web design community comes up with!
Sphere: Related Content
32 responses so far ↓
1 Web Typography: Tell Me What You Want | Typography Digest // Apr 29, 2008 at 3:10 pm
[...] Go to the author’s original blog: Web Typography: Tell Me What You Want [...]
2 molly.com » Feedback on Web Typography for the CSS Working Group // Apr 30, 2008 at 7:51 am
[...] Jason asked for community feedback directly related to what you want for typography in CSS3. In his blog post, Jason outlines both the process the working group is using to manage type on the [...]
3 clagnut // Apr 30, 2008 at 8:07 am
Jason, this is fantastic news. I was just bemoaning the state of the typography-related modules over on webtypography.net. Rather than clutter up your comments with scattered thoughts, I’ll post a more considered response on clagnut.com. I will say this though, CSS should be able to tap into the typographical options available in typefaces through OpenType (eg. number case).
4 Chasen Le Hara // Apr 30, 2008 at 8:27 am
I’d really like to be able to provide different styles (size, weight, style, etc.) for each fallback font. Having that kind of control would be great!
5 Jason // Apr 30, 2008 at 8:31 am
To get things started, let me tell you about one of the styles that John and I are talking about adding: font-stroke. This style will allow you to specify a stroke around a glyph including the stroke weight, color, pattern and whether it appears inside, outside, or centered on the glyph outline.
6 A further opportunity to help evolve CSS 3 - CSS3 . Info // Apr 30, 2008 at 8:46 am
[...] to edit the CSS Basic UI, CSS Hyperlink Presentation, CSS Fonts and CSS Web Fonts modules and is looking for feedback from users on the latter two. He asks: Tell me what you think are some of the font styles and features missing from the current [...]
7 stopsatgreen // Apr 30, 2008 at 9:03 am
Regarding the Web Fonts module, I don’t believe that pressure from font foundries should be a barrier to implementation; we have the same issues every time we use photography or music on the web, and it must be the responsibility of the website maker to use font licences correctly. Foundries should recognise the new possibilities and change their licences accordingly.
I think your suggestion of font-stroke is a good one, and I’m glad to see font-size-adjust formally introduced (again?). I wonder if font-size-adjust should be allowed in the font-size property:
font-size: 1.4em/0.5;
Or perhaps that’s too easily confused with the line-height property in the font shorthand:
font: 1.4em/1.4 serif;
Either way, many thanks for taking this upon yourself and I look forward to the results.
8 mike // Apr 30, 2008 at 9:04 am
Hi!
One very important thing that instantly came to my mind is a consensus about the actual sizing of text. This differs considerably between browsers. (If HTML doesn’t work: ALA Article on this topic: http://www.alistapart.com/articles/howtosizetextincss)
Apart from the difference in DPI (72 vs 96 as standards) there shouldn’t really be a difference between browsers when it comes to defining accessible (i.e. font size in EMs) text.
1 EM in IE should be of similar base size to FF or Safari. Of course, users should be able to change this, but this is an accessibility issue, it would help tremendously if the base standard would be equal.
I hope this is relevant!
Mike
9 Jon Tan // Apr 30, 2008 at 9:18 am
Hi Jason, thanks for asking for input. I’m planning to post a reply in full to give a more cohesive response, but it would seem logical to me to try and collaborate with vendors for improved rendering, and implement traditional typographic properties first such as lining, old-style and small-caps numerals or even ligatures if they are available in a given face. Truthfully, font-stroke seems to me as if it might be one of the least priorities for your work. Looking forward to seeing how it all develops. All the best.
10 MattWilcox // Apr 30, 2008 at 10:38 am
I cannot agree strongly enough with Chasen Le Hara (comment 4). Independent control of all aspects of a fall-back font (preferably tied in with CSS Variables (dreadful misnaming btw - those are constants, not variables).
I hit a major problem on exactly this issue with my (still secret) redesign. I’m using Candra, one of the new Microsoft fonts - which renders perfectly at 16px - however if the user doesn’t have the font then the replacement font renders far too large (and I’ve tried Helvetica, Ariel, Verdana…the lot). This means that I can’t use certain fonts because should the fall-back be required, it’s not just the visual style that’s different, but the actual font size is wrong. Which kills line-length, vertical flow, and basically looks dreadful.
11 jive // Apr 30, 2008 at 2:34 pm
Real Kerning! Letter-spacing and Word-spacing are still useful but we need real kerning. I almost wrote about this on my blog the other day. Vertical-Text (I’ve read that it’s coming I think), Rotated text as if the text was a block that could rotate (I saw some blog about Safari’s new css features, so that might be copied from them), Font-stroke, text-gradiant, text-glow (that might be achievable with text-shadow).
12 dylanfm // Apr 30, 2008 at 5:18 pm
I’d like to point to a couple off things from webtypography.net. There’s don’t doubt clagnut/Richard will address these and more.
I’d love to be able to set text (properly) justified. That would be fantastic. Although, from the link below it seems like that’s not going to be an issue, is it?
http://webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.3/
Another thing to make sure is address are the hyphenation issues:
http://webtypography.net/Rhythm_and_Proportion/Etiquette_of_Hypenation_and_Pagination/2.4.1/
13 Dmitry Baranovskiy // Apr 30, 2008 at 7:08 pm
There are couple of things that are falling to browser features, but I think CSS should provide some way to control:
1. Ligatures: common | discretionary | none
2. Alternates: titling | swash | contextual | none
3. Figure style: (oldstyle | lining) (tabular | proportional)
4. Real Small Caps (if available)
5. Hyphenation (there are many options)
6. Baseline alignment (something like “baseline: top step | none”)
This is just from top of my head. Hope it helps.
14 bradk // Apr 30, 2008 at 11:09 pm
How about fonts synthesized entirely out of PANOSE 2.0 numbers?
Also, should I repeat what I have already written in www-style@w3.org, or are you following that already? I would like to see some sort of quick loading font fingerprint, perhaps in the form of a header, that would allow a single font to be used across multiple sites without having to re-download it each time. There should be safe ways to do this.
15 charlescooke // May 1, 2008 at 1:22 am
1 - My first thought is that shadow is a basic option which seems to be missing.
2 - As I understand it, the font list specifies files one of which will be used in priority order starting from the first. But what happens if the character called for is not included in the file in use? I have found that Firefox will sometimes find it, from where I know not, and that is also probably true of IE7. But the process seems to be hit and miss and I have no control of which alternative font is used.
16 hotsawz // May 1, 2008 at 10:01 am
Fonts that follow vector paths would be nice. Not sure how feasable this is but even if it were just on a simple incline/decline might open up some new design ideas.
17 miha // May 2, 2008 at 7:06 am
Hi! I think there are still some basics, which should be defined first, and were already mentioned by Dmitry Baranovskiy: control of ligatures, alternates, figure styles…
There are also many many OpenType features that could be incorporated in CSS. To mention just some of them: Unicase, historical ligatures, case sensitive forms, titling forms, ordinals, superscript, subscript, petite caps… You should check OT specification and then implement in CSS at least the most important ones.
Well, that would still be just the beginning, the main part is rendering all this features, which is OS specific, not only browser specific. It is not going to happen soon.
18 bradk // May 2, 2008 at 7:43 am
Text should be fillable with any background properties that apply to boxes. So for instance:
{ font-fill: url(background.png) repeat-x 0 0 fixed orange; }
This would also include gradients and masks and reflections (reflections aren’t really background properties, but still…), along the lines of what webkit nightly downloads have for boxes:
{
font-fill: -webkit-gradient(linear, left top, left bottom,
from(#00abeb), to(#fff), color-stop(0.5, #fff),
color-stop(0.5, #66cc00));
font-reflect: below 5px
-webkit-gradient(linear, left top, left bottom,
from(transparent), color-stop(0.5, transparent),
to(white));
}
19 a bulletproof idea » Blog Archive » Look What My RSS Dragged In #5 April 2008 // May 2, 2008 at 11:45 pm
[...] Read: Web Typography: Tell Me What You Want [...]
20 nortypig » Blog Archive » Web Typography Feedback // May 3, 2008 at 4:30 pm
[...] those for CSS Fonts and CSS Web Fonts. He’s asking designers who work in HTML and CSS to put forward ideas on what might be improved and those improvements already suggested. Considering typography is most of the design these [...]
21 Jouketje // May 4, 2008 at 4:04 pm
I would like to see something like
p {font: url(font.ttf), sans-sefif;}
22 taylor // May 4, 2008 at 6:03 pm
I would really love to see proper hanging punctuation. That is, punctuation that falls outside of the boundaries of a block of text. Useful in particular for quotation marks that fall at the start and end of lines. It’s currently possible to hang quotes that start at the beginning of a block, (for example, as is provided by Typogrify), but it’s impossible to do this for punctuation within, say, a paragraph (as far as I know).
Of course, addressing this properly may mean altering the box model, so it could be a pipe dream.
23 neal_g // May 5, 2008 at 8:45 am
How about the ability to style individual characters? We already have the pseudo selector :first-letter.
The syntax may look something like this
h1:chars(’a') { color: red; }
h1:chars(’b') { color: blue; }
This would avoid the whole (span class=”a”)a(/span)(span class=”b”)b(/span)
:chars may also use a delimited list i.e h1:letter(’a',’b')
24 Jason Robb // May 11, 2008 at 10:02 am
Awesome. Though I don’t have any new ideas for this topic, I definitely support the thoughts of others. Particularly these:
- Opentype options
- h1:chars(’a') {color: red}
- real kearning
All would be nice. Thanks for posting this. =)
25 Montgomery // May 13, 2008 at 7:49 am
1. I’d like the browser to do less typographic work on its own. For example, why have the browser try to calculate what a particular typeface (e.g. Helvetica) should look like in “bold”, if the computer has the family of 53-weights of Helvetica, including a meticulously rendered “bold”? Rough example:
p { font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif; }
em { font-family: “Helvetica Neue Italic”, “Helvetica Italic”, “Arial italic”, “sans-serif italic”; }
strong { font-family: “Helvetica Neue Bold”, “Helvetica Bold”, “Arial Bold”, “sans-serif bold”; }
2. How about related font-family, font-size, font-weight stacks? Example:
body {
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
font-size: 12px, 12px, 13px, 1em;
font-weight: normal, normal, lighter, 500;
}
3. Confirm interest in OpenType options, too.
26 Web Typography | biroblu // May 22, 2008 at 9:50 am
[...] gruppo CSS3 del W3C chiede la partecipazione di tutti i designer con un appello intitolato “Web Typography: Tell Me What You Want” rivolto a Web designer e chiunque si occupi [...]
27 Michael Ubben » Blog Archive » Web Typography // May 28, 2008 at 3:44 am
[...] Typography Things are moving, the future is near (found via Molly). So, head over to Jason and make your case, to create a better future for our [...]
28 Inspired Buddy » Give your feedback and contribute to CSS typography // Jun 5, 2008 at 3:34 am
[...] spends more than half of his time working CSS 3 would surely be interested in his recent article Web Typography: Tell Me What You Want. He is expecting and looking forward to seeing what the web design community comes up with. So lets [...]
29 rajveer // Jun 5, 2008 at 4:28 am
Hi Jason, thanks for providing an equal opportunity to rest of the web guys. Myself, instead of commenting to add/edit something on existing fonts specification like font-effect and font-smooth I would rather prefer to show my interest that you guys also try do something so that we can see the existing CSS font features rendering well in all the browsers.
I certainly agree these features are enough to make a web designer’s life much easier. And I believe he will be more comfortable and imaginative to think about the future specification when he is able to use the current specifications in his regular routine without being bounded with browser limitations. I hope you won’t find my comment irrelevant.
30 W3C Tackles Web Typography with CSS 3 | Blogging // Jun 13, 2008 at 6:45 am
[...] CSS Working Group and perhaps most notably the Director of Web Design for AOL Global Programming, posted an article on his blog covering the specifications for CSS Fonts and CSS Web Fonts and in the same quill stroke called for [...]
31 davec // Jun 15, 2008 at 10:16 pm
This might be a bit beyond the realm of CSS, but my vote would be to have future browsers all point to an open font directory on the web as a universal resource. It would work like DNS, pointing at TTF and OTF files on the web (like dafont and the sites referenced in http://www.smashingmagazine.com/category/fonts/). So if a specific font referenced in CSS is not on the host computer, the browser can get it from one of these known locations on the web. This prevents the designer for having to host font files, or even having to specify an src/url in the CSS. And it’s backward compatible with all of the CSS 2.X code already in the wild.
http://www.kpao.org/2008/06/wanted-font-family-font-server-plug-in-firefox.html
And consider this another vote for independent sizing of alternate fonts in the font-family tag. Times and “Times New Roman” are significantly smaller than practically any other serif font out there.
32 nicky02114 // Jun 16, 2008 at 7:41 am
For unordered lists I would like to be able to specify which character is to be used for the “bullets”, instead of being saddled with the very limited selection of disc, circle, and square. Most often I would probably specify a real bullet instead of the usually oversized “bullet” one gets with disc.
Using list-style-image is not an acceptable alternative.
The CSS could look something like:
list-style-char { content: “\2022″; }
This may be more a text issue but, in case it is not, here is my request.
You must log in to post a comment.