By "typographic grids," I assume the question is about a letter grid, the grid upon which the designer draws each character. They are useful concepts because they provide some visual relationship of size and width to an alphabet. They permit the notion of a "line" of text. However, this does not mean (I've learned) that every letter uses the same grid. Rounded letters are slightly higher than the grid boundary, narrow letters often do not use the allotted space. Nor do alphabets within families have the same grid proportions.
Grids are easier for writing codes because one can hard-code a kerning width rather than measure the width and offset of a suite of polygons that form a letter. Leading similarly becomes faster and easier. Secondly, designing on a grid for code makes perfect sense since the entire screen is a grid. The curves and lines can be highly specified, one needs a grid notion in order to digitize a font.
This applet uses the structure and font I developed for problem set 5 and applies a color to different classes of phonemes: stop, affricate, fricative, nasal, liquid, and glide. The more garish the color, the more garish the sound made. Might I add at this point that using the English alphabet to represent phonetic sounds is a hopeless kloodge?
This applet extends the structure of p2 to include the visual effects, blur and noise, from a continuous range of values, applied to the seven different phonetic classes (including vowels). Noise is represented metaphorically: the louder and harsher the intrinsic sound, the greater monochromatic color value. Blur is represented as a corrolary of the flow of air: the greater the tension involved in the sound production, the greater vibration applied to the letters. The letters with greatest tension also "carry" the farthest (although this is not exactly true...), blowing parts of themselves along the horizontal axis. Since noise and blur are complementary effects, I allowed them to be adjusted separately, but are constantly applied together.