Bill Hill: The Future of Reading on the Web, Part 1

The Discussion

• 

  Guys, please, please, oh please mic your talent
  

• 

  Nice to see Bill Hill again.
  
  I remember playing with WEFT3 3 or 4 years ago for some of my websites.  It's good to know that it will be opened up so hopefully everyone will latch onto it.
  
  I've also been experimenting with some of the new Vista and Office fonts on the web, but compared to Verdana they're a bit smaller, enough so that I'd like to make them an extra pt larger.  I understand that the current CSS3 specs have an ability to set the size of individual fonts which could eleviate this issue.  Any chance we could see this implemented in IE8?
  
  Getting things resolution indepedent is probably the biggest challenge in computing, a lot of people are still stuck in their ways that things should be measued in pixels - I just had a running argument with somebody on it this week, that higher resolution screens should mean more work space, not higher resolution applications and text.
  
  I've got one screen here that is about 144 DPI, Windows looks absolutely amazing on it (the machine came set to 120 DPI by default).  It's just a shame I still come across applications that break, and websites that define font size in pixels.  Hopefully once we start getting better support for higher DPI computer manufacterers will be more willing to up the DPI of their displays and it'll really take off.

• 

  Great video. I've gone the embedding route myself a few times and would love for it to work across browsers and OSs. It's nice that you can embed the Windows fonts like Verdana but pointless since IE on Windows is the only browser that understands the embedding so they'll have the font anyway.
  
  Stepping away from the browser for a moment, Windows itself is a typographic mess, and I really hope that gets solved in Windows 7. Segoe UI is a great font, but Windows still uses the old fonts MS Sans Serif and Tahoma all over the place. Sometimes it even uses multiple fonts in the same dialog (e.g. the new Vista style common file dialogs) which just looks messy.
  
  This is especially horrible on Asian systems. Where Vista uses Segoe UI on western systems, it uses the brilliant new Meiryo font on Japanese. Meiryo is a great font, ClearType enabled, I absolutely love it. Then half the system still uses MS UI Gothic, which is a bitmap font with no anti-aliasing at all at the smaller sizes. This looks incredibly jarring. It's simply not an acceptable situation and I'm appaled that a company that according to Bill Hill's claims takes typography seriously could release such a mess.
  
  Related, in Vista, even with IE8 beta 2, MS UI Gothic is still the default Japanese font in Internet Explorer. It's one of the first things I change in IE usually. Apparently screen reading in the browser is only important to Microsoft if you use the Roman alphabet. There are no good Asian fonts available for web designers since Meiryo and the other new Asian fonts are available only on Vista. The fact that IE does not implement CSS font fallback correctly also doesn't help here if you have a webpage that mixes Roman and Asian characters.
  
  I also want to thank Bill for putting me onto eBooks with one of the early videos. I do nearly all my reading on my trusty Dell Axim X51v and don't leave the house without it. It makes all those train rides so much more bearable without having to drag heavy paper books around. I have however been forced to dump Microsoft Reader because its DRM activation system has now made it impossible for me to buy any more books (because you need to activate for that and I can't do that anymore). I now use eReader which has the added benefit of being able to specify the font you want to use, and I found Calibri looks really nice on my Axim's 192DPI display with ClearType.
  
  I also use Meiryo on my PocketPC for my own Japanese dictionary application. Whenever I show that to anyone who's not seen Meiryo before I'm generally met with disbelief at just how readable it is. Big kudos to the guys who created that font.

• 

  How would i go to embed a word font on my website ? Or is this only possible in Internet Eplorer ? Didn't really get an answer in the great video.
  

• 

  It ends abruptly but that is still one of the most informative videos on C9 in a very long time.

• 

  This is only the first part Stay tuned for more Bill Hill!

• 

  I’m not a fast reader. But I like to read. I take my time to take every thing in. I went and started to read the book found on your web site, The Mabinogion. I read for about an hour. I read about the fountain, the castles and black nights of who acquire mortal wounds to the head with a sword. All interesting stuff. I pushed F11 and read the book at full screen mode on my 19" monitor desk top computer. I would like to go back and pick up were I have left off. Some kind of book mark would be nice.
  
  Something I really miss about reading on screen is having an actual book in my hand something I can touch. A physical representation of volume. I had a hard time getting a good representation of how far into the book I was in relation to the finish. I saw the page numbers and that helped some. I had to page threw several button pushes to see how close I was to finishing the chapter. I don’t know if this is relevant to any one ells but it’s my first thought when reading. I like knowing how big the book is im reading. I evaluate the time i have to reading. I like to be able to finish the storys i start.
  
  I liked the font, it was clear to read. Much more clear than the Gutenberg.org. The button up at the center top broke me away from reading. Maybe a button at the bottom right on the last page might help so I don’t have to search as far for the method to turn the next page. I think scrowling also distracts from reading.
  
  (Edit: links to the different chapters would also be nice. )
  (Edit: i went back and finished the first story. in the book)

• 

  hm this is a little bit of fanboy-ism that im exhibiting here.. but i must say that the hike around the ms campus with bill hill is still my favorite video on channel9. im actually thinking about the topic of this interview once in a while.... it has been a joy to watch it. havent seen this current video yet because of time constraints. but i sure will do so soon
  just wanted to say thanks for another bill hill video! ... and thanks for this wave of videos these days.. still have my hopes up that we'll see a herb sutter interview about concur ;)
  thanks charles, bill and team!
  

• 

  
  
  Fascinating video!
  
  Discuss the issues with type in videos displayed on a web site?
  
  
  Regarding assumptions, thought you would enjoy:
  
  
  
  The Assumption Song
  
  

   

  
  
  
  
  
  
  
  
  
   

   

   

• 

  I'd just like to thank Bill and the typography team.  I've been using Reader first on an Axiom (similar to one he briefly showed off back in the walk around the campus video) and then later I upgraded to the same HTC phone / PDA that he briefly showed off in the video here.
  
  The ability to have MS Reader and all the associated readability elements is probably the only thing that has allowed me to actually keep reading anything other than, well TechNet basically.
  
  I never knew how, but something about reading books on Reader has always just been as natural as reading an actual book.  It’s absolutely fascinating to hear about all the research that went in to achieving that experience.

   

  Thank you. Your work is very much appreciated.

  
  

• 

  The problem with MS Reader is, it allows six activations, and unfortunately it counts re-activations of the same device, and there's no way to "de-activate" a device or something. Furthermore, you cannot buy a book on a device that is not activated.
  
  The only device I actually read on is my Axim. But I can't buy books with that, you need desktop Windows for that. So I must have either my desktop or my laptop activated as well. Over the years, by re-installing Windows and upgrading my Axim's ROM I have accumulated 6 activations. So when I tried to re-activate my desktop a few months ago to buy a new book, it told me I'd run out. You can apply for one additional activation per 180 days, which I did; I never got a response. No activated reader means I can't buy new books.
  
  Of course I could use a different Live ID and activate with that. But then, in order to read the new book, I would have to change the activation of my Axim as well, which means I can no longer read any of the books I already own (if I ever get a new PDA or need to hard reset this one, this will happen anyway). And of course, in a few years I'd end up in the same situation with those new books as well.
  
  So, MS Reader DRM has successfully driven me away. I will not buy another book in MS Reader format until this DRM scheme is changed. Fortunately, eReader works just as well and doesn't have this stupid activation system, and doesn't require any software on the PC when buying books.

• 

  I haven't watch the video yet, so apologies if this was covered, but re: fonts...can't Silverlight package up fonts?  Kind of lame (and would be way nicer to have in the browser), but if you wanted to, couldn't you render text in Silverlight and use whatever font you wanted?  I'm not super familiar with how it works and what the restrictions are, but I thought I remembered reading that a while back.

• 

  More Good stuff from Bill  !
  
  Often I have seen logos done as a bitmap when if they could have embeded a few letters they could have had a better result.
  another one of the places where the web tends to lock into pixels and will break with hi-res displays.
  
  if the body is at say 10pt and the logo is a fixed bitmap for 96ppi then what happens when you have a 300ppi display?
  it bet the logo becomes tiny and the text is larger than the logo!  won't that look grand!
  
  love to see an open standard for web type embeding!
  
  most folks , including folks who build web sites just render stuff to bitmaps cause that's the only way they are sure it will look right on all clients ... that's a place that will need a *lot* of work in the next few years.
  

• 

  HC, I think I did read that SL can embed fonts.... I'd love to see a bit on how that works etc.... I have not seen one on silverlight.net that I recall.
  
  perhaps bill can look into that and tell us / intro the sl folks who cover it or some such ??

• 

  A really cool interview.
  

• 

  Bill suggested an interview with Greg Hitchcock. Is any one at Channel 9 heading over to him to hear about hinting fonts?

• 

  Sven I understand the issues you've had. The only thing I'll say is that I feel your pain and to me DRM is problematic at best.
  
  It's just not an issue that I usually worry about to be honest.  Between the amount of DRM free classical literature and the ability to freely convert Word documents to .lit format (http://www.overdrive.com/readerworks/downloads/default.asp?Download=RWSTAN), it's just not an issue I've run into.
  
  If I were reading the latest book, or had to purchase them and deal with activation the way you have, I'm sure I'd feel the same.  My point is more about the "visual" and "readability" aspects. Those thing that Bill was talking.  The only real refrence he made to IP issues I totally agree with, no one originator of content should be paid only once. To which the larger question of course is how? 
  
  I have no idea.  What I do know is that whatever content I get in the MS Reader format is easy on my increasingly antiquated eye-balls.
  
  

• 

  Hi. Bill Hill here.
  
  "Manotype" is my new C9 username. For some reason I couldn't sign on to my previous account so I created a new one.

  I'll make sure the issues you point out with Japanese Windows UI conflicts with some parts of the UI being in Meiryo, while others are not, are passed on to the relevant folks in Windows.
  
  Glad you like Meiryo. It was built by the usual suspects -us. 
  
  I managed the group that did it and personally argued (in a very civilized way) with Bill Gates to get it funded, arguing that although it was a lot of money for a single font project, we (the ClearType and Readablity Research team) would use it as a testbed to develop new technology which could be used to improve Simplified and Traditional Chinese and Korean as well.
  
  Typographers Geraldine Wade and Mike Duggan in the ClearType team did a lot of work. Geraldine managed the project and did a fantastic job. Greg Hitchock was another big contributor.
  
  We worked with a Japanese font company, (C&G, if my memory serves me right - which it often doesn't these days!), a tremendous Japanese type consultant called Eichii Kono - and Matthew Carter again.
  
  One of the big issues with previous Japanese fonts was that they required hundreds of thousands of hand-tuned bitmaps. making one used to be a 50 man-year job. We developed new technology to use TrueType hinting, so the bitmaps are created on the fly and are truly scalable.
  
  Matthew and Eichii worked together to solve another problem with East Asian fonts, which is that mixed Kanji and Latin characters looked terrible. In the first lace, the Latin characters themselves were always awful. Matthew, using the Verdana work, and Eichii, worked to integrate the Verdana glyphs with the Kanji and harmonize the way they worked together.
  
  The project was a huge success. We completed it under budget and on time, in under 18 months (thanks to Geraldine!), and the new Chinese and Korean fonts in Vista used the same hinting technology.

• 

  In Internet Explorer only for now. We're hoping once it's a standard the other browsers will implement.
  
  Go to https://www.microsoft.com/typography and download the WEFT tool. It's free. Make sure you read the documentation and go through the tutorials before you try it for real.

• 

  Thanks Jason:
  
  I agree with your comments about bookmarking, navigation, etc. I created that book just to show that you really could create text on a screen that someone would happily read for a very long time. I must be doing something right - an hour is an incredibly long read on the Web! Glad you used F11; removing all distractions apart from the content helps.

  I'm not a UI designer. I know that could have been made much better. I started off with "Next Page" buttons at the bottom of each page. Then I made a VCR-like bank of buttons. A real UI designer could do this so much better than me - I am only an egg (Michael Valentine Smith in Robert Heinlein's "Stranger in a Strange Land").

• 

  If you're having activation issues, try using "Contact Us" on the Reader website:
  
  http://www.microsoft.com/reader
  
  

• 

  Re: using other fonts in a larger size than Verdana.
  
  You know, I find I do exactly the same thing myself. For reading on screen with Verdana, I found the ideal was 11pt; whereas with Cambria and Calibri, I find 12pt is optimal.
  
  There's good reason for that. First, in relation to other fonts Verdana has a large x-height. Matthew designed it that way, so the characters are very open. Verdana looks bigger than its point size would indicate. The other factor built into Verdana is that it has very generous spacing.
  
  You also have to remember that Verdana was designed pre-ClearType, in 1995. We didn't invent ClearType until 1998, and it was even later than that before it shipped in Windows and Office. In 1995, average screen resolution was quite bit lower, and in the black-and-white world, you were stuck with whole-pixel resolution. ClearType gave us a theoretical 3x improvement in the X-direction resolution - which also happens to be the one where we needed it most, especially for Latin faces.
  
  What I'm trying to say is that on Verdana, Matthew was working under a set of brutal constraints. He began by creating bitmaps at the reading sizes, then we created the outlines and hinted them so they'd reproduce those bitmaps at those sizes.
  
  There was a lot less room for the subtleties of design. It was a real challenge designing a serif face (Georgia) or a sans serif (Verdana) which looked different enough from other existing serif and sans serif faces in 10 and 12pt bitmaps.
  
  ClearType gave us a lot more scope. So Calibri (now my favorite sans serif face for reading on screen) and Cambria (my favorite serif) can be quite a bit more sophisticated. Compare Calibri to Candara, for instance.
  
  

• 

  Yes, Silverlight does support using fonts that are packaged up inside the Silverlight content. Still you have to be aware of font licensing when you do this.
  
  -mark
  Silverlight Program Manager
  Microsoft
  This post is provided "as-is"

• 

  Fonts can be embedded in the DLL assembly that contains your SL content and refered to via XAML using the FontFamily attribute. See http://msdn.microsoft.com/en-us/library/cc189010(VS.95).aspx">http://msdn.microsoft.com/en-us/library/cc189010(VS.95).aspx for details. Again, please respect font licenses.
  
  -mark
  Silverlight Program Manager
  Microsoft
  This post is provided "as-is"

• 

  Re your request: (Edit: links to the different chapters would also be nice. )
  
  Just did that.
  
  Re: The request to have the Page/ Chapter navigation buttons at the bottom right rather than middle top. I started out with "Next page" buttons at the bottom right of the pages. Problem is they might be hidden until the window is made FullScreen. This is one of the areas where I plan to go back and do some more experimentation.
  
  I like the idea of putting the nav buttons at the bottom right. I may have to go in and adjust columns of text to make space on some pages. The Javascript I use for multicolumn does some weird linebreaking in certain circumstances so adjusting columns can be non-trivial (ie extremely fiddly).
  
  I think I'd also like to experiment with more subtle arrow buttons that don't stand out as much but are there where and when you need them.
  
  The big - and I mean big - task is to convert the whole book from Project Gutenberg's plain text into standards compliant HTML. I've built 77 separate Web pages so far, and will probably end up with at least 100... Anyway, I'd like to have a "whole book" rather than just a few "demo pages" with which to experiment. And I'd love other people to try reading it too and send feedback.
  
  The other thing to say is that the files are incredibly disorganized. I started out thinking I'd do just a few pages. Once I saw how good they looked, I got excited to try the whole thing. Along the way, I should of course have been creating "Chapter" folders with the files for each chapter in them. That way I wouldn't have to scroll so much when opening files for editing. Techniques that you can get by with for just a few pages don't work for a production-level task like this.
  
  However, the whole purpose of the exercise was:
  

  • To see how far I could push readability with Web-standards content
  • To explore production issues
  • To experiment with "Reading UI"
  • To figure out what's still missing in terms of Internet Explorer functionality, Web-standards markup, authoring tool support, etc.

  Thanks so much for your interest and comments. Stay in touch, and drop in on my site from time to time, since it's developing day by day,
  
  best wishes,
  
  bill

   

• 

  Good stuff. Now for part 2!!! =)