Caps, Lowercase & x-Height: The Development of Sassoon Joiner Fonts

I think we left off talking about why all CAPS is a bad thing to do to text, especially more than just a couple of words, especially when using a monospace typeface, because when you try to look at each word as a single unit, all words look alike -- boxes of varying widths:

The above is an image from Robin Williams' excellent book The Mac is Not a Typewriter and was produced to show the difficulty in reading whole words written in all-caps, especially monospaced all-caps.

Note that the two pairs of words are of the same number of characters; thus when the eye detects them as shapes, the two shapes look alike. When Rosemary Sassoon was asked to consider which would be preferable typefaces for children learning to read and write, she realized that studying children and their preferences had been left out of the study equation.

I was astonished that although various ‘experts’ had their own views, no one had bothered to ask the actual users – children... The design was based on the children’s preferences and surprising explicit comments – a slight slant, a plain top (sans serif) and a flickup like Times Italic. When rationalised that suggested that an exit stroke bound the word together. That feature, coupled with slightly extended ascenders and descenders (which had been eroded in other modern typefaces) accentuated the word shape hence made for easier recognition.

Ascenders, Descenders & x-height

Before we see why ascenders, descenders and x-height can make a great deal of difference is seeing entire words as shapes (or at least help in decoding), a few definitions are in order:

x-Height characters are everything else and have the vertical dimensions of, say, a lowercase x: They are a, c, e, i, m, n, o, r, s, u, v, w, & x. Why do ascenders, descenders and x-height assist in decoding words? It's a matter of creating visual contrast:

Still skeptical? Consider the following:

In the two above examples, Ascenders (signifying either a capital letter or one of the lowercase letterforms with an ascender) and descenders provide important clues as to what the words are. As children become more expert readers they learn to read whole words, partly by shape. As Sassoon notes, modern typefaces that seek to erode the visual contrast between letterforms with ascenders, descenders and how they relate to overall x-height make that text more difficult to read more expertly by new readers.

Thus we have the Sassoon family of fonts:

In the next post, we will discuss using type creatively and how to avoid some of the common don'ts of using type.

Monospaced vs. Proportionately-spaced Typography

In a follow-up to the previous post, we learned that choosing an appropriate typeface can bridge the gap between learning to read and learning to write in young children as well as demonstrate learning cursive handwriting skills by taking a look at the Sassoon Joiner fonts and software, a demo of which is freely downloadable. In this post, we will discuss those monospaced vs. proportionately-spaced typefaces.

We talked a little in the previous post about the days of the dreaded typewriter. For the benefit of those whose eyes glazed over and rolled into the back of their skulls at the reference, let's take a trip back in time... time... time...:

In the beginning...

The first thing to learn is the difference between a monospaced typeface and a proportionally-spaced typeface (remember Steve Jobs talking about that in his Stanford commencement speech?). Below is the same sentence rendered in two similar-looking typefaces (both are serif typefaces; more on that in a minute):

The first line is in Courier; Courier is a monospaced font. The second line is in Times New Roman, which is a proportionally-spaced font. Both are 24 pt. Notice that the proportionately-spaced font takes up less horizontal space. That is because a monospaced typeface allots the same "cushion" space around the letterform for a capital W as for a lower-case i. The first line was indented two spaces; the second was indented five spaces. The third shows the difference between five and two spaces for the typeface Times New Roman. Below you can see how, in Courier, each character occupies the same horizontal amount of paper or screen real estate as any other in the typeface:

Notice how all the characters on row 1 line up with all the characters on row 2, regardless of how much horizontal space any given character actually requires to be properly represented. The monospace aspect of using typewriters can be a good thing when you need to properly align things like a column of numbers in a word processing application. It's less of a good thing when it comes to reading, because every single word has pretty much the same shape as every other word, making it difficult for the brain to engage in pattern recognition and chunk words into a single object rather than reading each character individually and then forming a word. Secondarily, for those of us who learned to type on a typewriter, the only way to create visual space demarcing the end of one sentence and the beginning of another was to type two spaces after the terminal period of a sentence, something now discouraged in this age of proportionately-spaced typefaces of the digital era. (I must admit that I have not been able to break the habit!)

Another bad habit carryover from the days of the typewriter, is the custom of using ALL CAPS WHEN WE WISH TO DRAW EMPHASIS TO SOMETHING. Because it was that or underlining (or, if you were especially clever, backspacing and double-striking each letter, because backspacing in a mechanical device never really got you to the exact same place on the paper, thus resulting in a double-strike that mimicked boldfacing a word).

Next post: Ascenders, Descenders, & x-height!

Sassoon Joiner & the Importance of Typography & Handwriting

In Steve Jobs' famous 2005 Stanford University commencement speech, the college dropout noted the profound effect that auditing a course in calligraphy had on him:

Reed College at that time offered perhaps the best calligraphy instruction in the country. Throughout the campus every poster, every label on every drawer, was beautifully hand calligraphed. Because I had dropped out and didn’t have to take the normal classes, I decided to take a calligraphy class to learn how to do this. I learned about serif and san serif typefaces, about varying the amount of space between different letter combinations, about what makes great typography great. It was beautiful, historical, artistically subtle in a way that science can’t capture, and I found it fascinating.

None of this had even a hope of any practical application in my life. But ten years later, when we were designing the first Macintosh computer, it all came back to me. And we designed it all into the Mac. It was the first computer with beautiful typography. If I had never dropped in on that single course in college, the Mac would have never had multiple typefaces or proportionally spaced fonts.

People who remember the days of the typewriter can tell you of the excitement when the Mac came around and we had something like 32 typefaces with up to four or five different "effects" that could be combined when using them. And now we have so many more and yet, how often do we pause to think about which typeface to use instead of using the default? Moreover, how relevant is typography to software design, a question which Rosemary Sassoon believes is worth asking?

As she notes in her book Computers and Typography, choosing the correct typeface in an education setting has can have a positive effect in bridging the gap between reading and writing for children. As she says,

Remember Sassoon's claim that choosing the right typeface can bridge the gap between reading and writing for children? What exactly is that gap -- and what would be wrong about using any of the very standard and commonly-available typefaces shown below in an educational software product aimed at new readers?

Still can't see it? Let's try again:

Look at the incongruence between how children are taught to print a lowercase "a" and how the same letter is given an entirely different representation in the "standard" typefaces above. Bonus points if you can spot the additional letter in some of those typefaces which is similarly problematic.



Thus was born the Sassoon font family and Sassoon Joiner educational software program, a program made possible and designed by Sassoon (in the midst of a Ph.D. program in Typography and Graphic Design) and an associate in LiveCode and fine-tuned by a LC developer.

The font family alone is useful in the preparation of student practice sheets or for webpages or software programs; the program, however, is useful in showing on-the-fly the art of handwriting, an art that many say is on the decline:

Click here to see video

As Joiner and her colleague Adrian Williams note, Sassoon® Cambridge Joiner is needed to assess which join is used with the starting letter and the next letter. Even when joins have been calculated for a word, the joins may be changed in view of the Preferences set by the User or the combination of letters. This isn't your father's "Hello World" type of programming. It involves examining the position of every character and having multiple representations of each character depending upon whether the character occurs at the beginning, the middle, and the end of a word, or by itself; Williams notes that The test word was not the usual "Hello world" but "success" because it used two forms of c, a tricky e join and three forms of s:

Click here to see the different letterforms and the application in action as it determines which letterform to use. The screen video doesn't quite show it here, but when I was typing in the application, you could see the app "change its mind" about which letterform to use, which is interesting to see.

Why LiveCode? Williams continues, A program was required to control the fonts. I had been following the progress of Runtime Revolution for some time, I took the plunge and bought it, giving me the opportunity to quickly make a first test program. As I had never coded before, its language quickly endeared me to it.

Why does cursive handwriting still matter? As Williams points out, Surprisingly, in the past many schools had no consistent handwriting policy, but left it to individual teachers' methods to instruct pupils.  The idea for Sassoon Joiner arose from the decline of traditional blackboard and chalk in favor of whiteboard screens in classrooms, offering an ideal way to display handwriting to the whole class by any teacher. 

Other reasons for supporting cursive handwriting include There is now quite a lot of new data that indicates handwriting has a powerful and positive impact on reading. Moreover well-taught cursive writing is faster and more efficient than printing, and will consequently have a greater long-term effect on the student’s performance in school, according to Richard McManus of The Fluency Factory.

In The New York Times' essay The Case for Cursive, several observations are made regarding downsides of society's declining cursive writing skills:

For centuries, cursive handwriting has been an art. To a growing number of young people, it is a mystery. These range from issues regarding identity theft due to simple block printing signatures that are easy to duplicate and declining fine motor skill development in children. Perhaps the saddest observation was that a connection to archival material is lost when students turn away from cursive, noting that one college student and her cousin experienced great difficulties in reading their grandmother's handwritten journal.

And, finally, getting back to Mr. Jobs' observation on the utility of beauty, Richard S. Christen, a professor of education at the University of Portland in Oregon, points out that These kids are losing time where they create beauty every day... I’m mourning the [loss of] beauty, the aesthetics.

LiveCode User Conference in San Jose, CA

I recently returned from RunRevLive.11, the company's annual user conference which was this year held in San Jose, California, last week.

What a treat it was to meet with and socialize with so many other LiveCode users! It was exciting to organize what I think was probably the first education session in conference history and to see the many uses of the product in the educational community.

And, finally, it was an experience beyond definition to sit behind fellow attendee Robert Cailliau, co-inventor of the world wide web; across the aisle from Bill Atkinson, one of the main geniuses behind the development of Hypercard (and not ashamed to say so!); and in the same room as Larry Tesler, a member of the original Xerox PARC team who subsequently moved over to Apple and was influential in the development of the Apple Lisa and the Newton.

Remember that these three very important tech figures all enthusiastically use LiveCode the next time some imbecile tells you it isn't a valid development platform, or isn't a "real" development tool, or that we need to stop talking about Hypercard.

We had not one but two education presentations, the second of which went on for two straight hours! Perhaps the "hit" of the conference was Bill Waldman and his magical cigar box, wired up with various boards and circuits that, via a usb connection, "talked" with a LC program. I am hoping that he will do a LiveCode.tv video presentation on this for everyone to see. He used various common RadioShack components along with a USB board from Phidgets.com. And I hope he won't mind my saying so, but whenever I think about his box I am reminded of the Peter, Paul & Mary song Marvelous Toy.

Scott Morrow, from elementarysoftware.com , showed us a number of his "number sense" math programs aimed at elementary school learners. Scott himself has been an educator for 20 years and is keenly interested in the development of "software solutions with an eye towards elementary school students and faculty."

David Brooks also joined us and showed us programs that he's been working on. David has quite the impressive C.V. and has taught both chemistry and education at the university level.

Björnke von Gierke talked about his various educational initiatives, including chatRev, a chat client which connects to a server he operates which allows other LiveCode users to interact with one another in real-time (or something close to it), as well as livecode.tv, a weekly set of 2 or more video tutorials on various aspects of using LiveCode along with a live chat. He also has made a LiveCode stack BvG Docu, which is a much faster version of LiveCode's built-in language dictionary.

In the second presentation, we additionally had Carly Born, Educational Technologist for Carleton College, demonstrating her language learning revlet integrated into the Moodle course management system. The ability to integrate revlets into course management systems is important for educational users of LiveCode who also use course management systems.

Devin Asay, who teaches an introductory course to programming for humanities students at BYU, showed us his website with many resources as well as discussed his general approach to teaching a terminal programming course to non-computer science majors. Devin is a longstanding member of the LiveCode community who frequently co-teaches the beginner's Day Zero tracks at LC user conferences.

We also learned that doing your math homework needn't be dull or frustrating! Max Schafer's MathGadgets, featuring the awesome graphics work of LC developer Scott Rossi, gently guides students through the process of doing various K-6 math problems and can be purchased on a cool robot-looking USB thumb drive.

We were also treated to a very different, education-oriented product being developed using LiveCode by Larry Tesler. His project aims to facilitate constructivist educators to construct year-long lesson plans in which they are able to meet each of the state's standards for curriculum development.

These are just a few of the many diverse educational solutions being developed or which have been developed using LiveCode. Others include Sassoon Joiner, which teaches children the formation of cursive lettering; Jim Hurley's Turtle Graphics and other games, simulations and tools; TwistAWord, a fun word game which has been previously reviewed on this blog; and my own little Multiplication Bingo which aims to make practicing one's multiplication tables a little more fun.

Many of the attending educators walked away with a renewed commitment to evangelizing LC in the educational community and sharing and developing new learning resources. We have also initiated an education-focused FaceBook community which can be found here and hope to see you there!

Multiplication Bingo Released as Shareware

Unbeknownst to me, the game of "Bingo" has long been used as a means for third and fourth grade students to learn their multiplication tables.

Learning one's multiplication tables is journey of descent into the pit of drill and kill -- endless rote memorization of individual multiplication families, endless repetition of multiplication problems that make students simply hate learning in general and math in particular.

And my kids were looking at those twin evils dead in the eye. They were not happy campers.

Enter my idea to use a Bingo motif to get them to voluntarily practice their multiplication tables.

If you Google "multiplication bingo" you will find a bazillion sites that provide printable multiplication bingo cards. Regrettably, this means that someone, preferably a responsible adult like, oh, say, a parent, supervise the Bingo activity.

I wanted something that the little dears could preferably do endlessly on their own without my intervention.

Enter Multiplication Bingo.

I used Rev (erm, LiveCode it's called now) to create a simple program that provided a Bingo card for each of the 2 through 12 times tables families. Each card has 2 or 3 pre-determined routes to achieving Bingo. Each card presents a randomized series of multiplication problems for each number's family. After the 12 family, one can select one of the three randomized cards containing multiplication problems from among the 12 families. The learner can concentrate on a specific multiplication family or families or choose the randomized Bingo cards. Fun sounds provide the learner with feedback.

Again, it is probably not the best coded project anyone has ever seen. But I was able to complete it in time for my kids to learn their times tables and they played and still play the game enthusiastically. I call that kid-tested and kid-approved. The most difficult thing was that I wanted to fake the menu bar rather than use LC's built-in menu builder to keep everything on the Bingo card, and to get that working in an HIG-satisfactory manner, I had to pay somebody else to code that. But that's cool. I'm fine with that :-)

Many kind thanks to Mark Schonewille of economy-x-talk.com for his encouragement and assistance in making this a reality, as well as for making the bloody fake menus actually work :-)

Rev Studio $50 until June 14

Yup. Build neat little Mac standalone applications with the world's easiest to learn programming language, RevTalk!

Kick the tires of its free sibling, RevMedia, but don't spend too long because this offer is set to sail into the sunset in less than two weeks.

We're talking about pizza and beer money here... a serious no brainer. RevStudio normally retails for US$249, hence slashing that first digit makes it a serious price-point contender against its rivals. For more information on how the various Rev products differ in terms of features, see here.

Basically, if you don't need seriously geeky things like externals or Oracle database connectivity (and if the mention of these things makes your eyes glaze over, you probably don't need them) and would prefer to be able to deliver a standalone executable application which does not need a player object, RevStudio may be for you. If you don't know what an SSL is, don't spend the extra $$$ on the Enterprise version. Other funky new things I still haven't wrapped my feeble brain around -- datagrid, I'm looking at you! -- you may also not need.

One limitation which must be pointed out is that you can only deliver a standalone application on the same platform that you write it on (but I don't think that precludes delivering for the other platforms using the company's free stack player). In normal human English, this means that if you have a Mac at home, you'd better be making standalones for a classroom of Macs and similarly for the other supported platforms.

Still -- have any oldies but goodies Hypercard stacks you've been trying to bring into the 21st century? Get this product. Fast. Because you can convert them into native Rev stack files (especially plain-vanilla Hypercard stacks without those pesky XCMDs & XCFNs).

Basically, as the company itself so aptly notes, You don't need a computer science degree to get things done with Revolution. So, what are you waiting for?

Hypercard, Hyperstudio, and why Revolution Can't, or Won't, Compete

It's an interesting component of modern culture that views anything that didn't hatch yesterday as completely obsolete, foreign, and useless for study. This regrettably leads us to recreate the wheel over and over again, and sometimes what results is simply NOT superior to that which preceded it in ways we should have seen coming but didn't because we decided it was uncool to look back in time.

Thus is is with the the Hyper-word that must not be uttered. If all you can look back and see are 1-bit icons and the floppy-swap and are willing to dismiss it at that, then you never really did ever "get it." And, btw, those 1-bit icons were and still are vastly superior to the load of 256-color icon crap that shipped with MetaCard and is shipping still with Rev. You think the Stack - Card metaphor is an embarrassment? Have any of you even LOOKED AT those MC icons?!? They look like they were drawn by 5-year-olds on a few too many acid drops. And, btw, we're talking 5-year-olds with ZERO artistic talent. On acid.

But I digress. When reminded that, at its height, the Hyper-thing was quite possibly THE most popular development environment (Can Rev say that now?) and attracted probably the greatest numbers of non-/novice programmers than any development environment before or since (does anyone even come close btw?), people's responses are: 'but where are they now?', or, 'oh, but those were the days of the floppy-swap,' or the subtly-deceptive argument-changing dismissal that such is the realm of the geriatric set that's clearly not with the program (pardon the pun).

The point that lots of people are blissful to ignore is that Hypercard (there, I've said it!) got lots of things right that, 20 years later, nearly everybody else, including Rev, insists on getting wrong by design (except for a certain competitor whose product sells extremely well). Hypercard succeeded wildly in getting people -- normal humans even! -- to use their *programming* product in a very short period of time. While other people wonder, 'where are those people now?', I wonder, 'how the hell did they do that?!'

And that's why HC is not irrelevant: how the hell did they do that, indeed! We like to think that todays user is so much more computer sophisticated than was the typical user 20+ years ago, a bit of back-patting that study after study indicates is simply dead wrong. We may have more computers in more homes and more schools but, other than surfing the web and sitting on Facebook all day, today's computer owner doesn't use his/her computer for anything markedly more complex or different than did the typical user of 20+ years ago. So, the idea that we need to explain things less because "they" know more? Fail.

20+ years ago the HC team understood that they had to make programming look fun and attractive, with a gentle learning curve and lots of ready-made things to copy <--> paste into new stacks, replete with clipart so that the user didn't get distracted when going off and ending up chasing the pretty butterfly while looking for artwork.

Today many consider such things to be coddling, and new Rev users with questions are tersely told to go read the documentation. I'll say it again: without a printed set of language documentation (WITH AN INDEX), online docs are of EXTREMELY LIMITED VALUE because you can't look up what you don't know to look up. The language model is sufficiently different from other programming languages that even programmers coming from other languages find using the documentation difficult, and people who lack a programming background altogether are likely to find the docs entirely unusable. Which means they drift away, because there's no substantial explanation of how to do things that anchors them. Buh-bye, new user. By design. Because we think they need to grow more hair on their chests and suck it up and become "real" programmers.

Trevor's lessons stuff is a HUGE step in the right direction, but consider this: you have to (a) know they exist to (b) go find them (no small feat, given how wildly Rev's website changes with each new rebranding) and then (c) search them, at which point you've likely lost considerably more than 50% of those new users. Considerably more. Do I need say it again? CONSIDERABLY MORE, like, nearly all of them. The HC dev team knew to have stuff up-front and visible, always and obviously accessible. They even recognized this importance after the development of that new-fangled internet thingy that people keep telling me about (I think I need to go swig a bottle of Geritol before I can grok that whole thing).

So, it would seem that there's a few things we can learn from 20+ years ago -- Don't intimidate people and make them feel stupid; DO give them a small subset of all the things they need to get started without leaving the IDE; DO provide a printed set of language and learning materials; make all this stuff obvious and visible; and speak to them in their, not your, language.

Think I'm going overboard a bit with the clipart & stuff? How many teachers do you think choose Hyperstudio (http://www.mackiev.com/hyperstudio/) at US$90 over Rev Media, which is FREE? Seems insane, doesn't it?! Visit their website and you'll see why they pick Hyperstudio. In droves. Look at the screenshot: Hyperstudio's not too embarrassed by the blast from the past of using a hand versus an arrow to indicate one particular state or modality over the other, because Hyperstudio knows that you don't use two very similar-looking icons to indicate two very different states. And Hyperstudio knows it because HC knew it. And because Hyperstudio has decided not to be embarrassed by yesterday's truth, they sell way more licenses to normal humans than does Rev, even though I think educators would be better off using Rev.

Hyperstudio also boasts podcasting support, importing from iTunes, Keynote, and YouTube, easy card navigation in its production environment, and text niceties such as kerning (how long have people been drooling for that in Rev?!). Like Rev, it has a plugin allowing Hyperstudio projects to be run in Safari. But, more significantly, it includes 1,300 clipart images, 500 background images, 200 animations, 280 sounds, and 30 movies, including QTVR; it imports PDF, PNG, JPG, TIFF, GIF, BMP, PICT & PSD for images, and MP3, AAC, WAV (I'll bet it's wayyyy less wonky than Rev is with WAV files), AIFF, M4A, M4B, M4P, SND, CDDA & AU for audio, and MOV, AVI, MPEG and QTVR for movie/video. Now I'm not claiming that Rev needs to match them, number for number, on included media, but it really does need to not be a string of 0s in all those categories if Rev wishes to compete in the educational market. Hyperstudio was smart: It looked at what worked for Hypercard and then did that in spades. It wasn't too cool to look back in time. And it shows because it sells.

And, another reason why educators take to Hyperstudio in droves? It has something else that Hypercard had and Rev sadly does not: a passionate former and current userbase with an emotional connection to the product and the willingness to be unpaid evangelists for the company and the product. And this is a company/product that really doesn't badly need such a thing, having few to no real competitors, unlike Rev, which is up against a bazillion other programming languages, most of which have been around longer and have significantly more adherents. And, as its wiki entry notes, Hyperstudio and its users aren't too proud to acknowledge Hyperstudio as a Hypercard clone. Indeed, on the webpages of Hyperstudio fans you will find frequent mention of Hypercard, and not in a negative manner either. Oh, and did I mention that Hyperstudio is wildly popular? Hmmm.... wonder why.

Higher education, teacher ed programs, and K-12 in general *lurves* Hyperstudio:

http://www.sillybilly.com/abcd123.html
http://www.cue.org/cuetoyou/hyperstudio
http://nschubert.home.mchsi.com/education/HSProjects.html
http://mathforum.org/sum95/suzanne/colortips.html
http://www.uen.org/utahlink/tours/tourFames.cgi?tour_id=14179
http://www.k12.hi.us/~mstlaure/tlcf2000/fun_hs.htm
--this site has an example of menus that make sense to educators.
http://geologyonline.museum.state.il.us/tools/lessons/8.6/lesson.pdf
http://writing.berkeley.edu/TESL-EJ/ej33/m2.html
--this site explains in copious detail why the edu community likes Hyperstudio.

Check out the testimonials and endorsements, and, ask yourself what does Hyperstudio do for $90 that Rev Media, for free, couldn't do better, and then consider why it is Rev currently cannot compete in that market, despite everything we've been able to observe about such software and the success of similar products over the last 20 years.

But, of course, few here care about the education market, so let me appeal to your base, my-bottom-line instincts: how many of your bugs might get fixed with the additional income brought in by hundreds of thousands of teachers buying a slightly modified Studio, based upon what went right with Hypercard?

Is it really worth it to diss Hypercard and its model? I think not.