Successfully reported this slideshow.
Upcoming SlideShare
×

# CS 354 Typography

3,230 views

Published on

April 12, 2012; CS 354 Computer Graphics; University of Texas at Austin

Published in: Technology, Design
• Full Name
Comment goes here.

Are you sure you want to Yes No
• Be the first to comment

### CS 354 Typography

1. 1. CS 354TypographyMark KilgardUniversity of TexasApril 12, 2012
2. 2. CS 354 2 Today’s material  In-class quiz  On path rendering lecture  Lecture topic  Project 3  Digital typography  Presentation of text with computers
3. 3. CS 354 3 My Office Hours  Tuesday, before class  Painter (PAI) 5.35  8:45 a.m. to 9:15  Thursday, after class  ACE 6.302  11:00 a.m. to 12  Randy’s office hours  Monday & Wednesday  11 a.m. to 12:00  Painter (PAI) 5.33
4. 4. CS 354 4 Last time, this time  Last lecture, we discussed  Resolution-independent 2D graphics  Path rendering  This lecture  Digital typography  Projects  Schedule demos with TA for Project 2  Project 3 due Wednesday, April 18, 2012  Get started!  Coming next: Project 4 on ray tracing
5. 5. CS 354 5 On a sheet of paper Daily Quiz • Write your EID, name, and date • Write #1, #2, #3, followed by its answer  What are the two standard  Multiple choice: fill modes for filling paths? Conflation artifacts are possible in path rendering _______ & ________ when  Multiple choice: The a) Opacity and sub-pixel curve for the stroke of a coverage are kept 2D cubic path segment is: separate b) Pixels are given color a) less than 3rd order values that exceed the b) 3rd order [0,1] range c) greater than 3rd order d) not defined by a c) A path self-intersects polynomial curve itself d) The scene is too complex
6. 6. CS 354 6 Project 3  Accept Biovision Hierarchy (BVH) files containing motion capture data  Hierarchy of affine transformations  Visualize a stick figure  Animate the figure
7. 7. CS 354 7 BVH File Example: Hierarchy HIERARCHY ROOT root { OFFSET 0.00 0.00 0.00 CHANNELS 6 Xposition Yposition Zposition Xrotation Yrotation Zrotation JOINT lfemur { OFFSET 3.80421 -3.76868 0.00000 CHANNELS 3 Xrotation Yrotation Zrotation JOINT ltibia { OFFSET 0.00000 -17.76572 0.00000 CHANNELS 3 Xrotation Yrotation Zrotation JOINT lfoot { OFFSET 0.00000 -16.34445 0.00000 CHANNELS 3 Xrotation Yrotation Zrotation JOINT ltoes { OFFSET 0.00000 -1.60934 6.00613 CHANNELS 3 Xrotation Yrotation Zrotation End Site { OFFSET 0.00000 0.00000 2.66486 } } } } } JOINT rfemur {
8. 8. CS 354 8 BVH File Example: Motion MOTION Frames: 36794 Frame Time: 0.008333 35.7416 40.7156 -2.9287 -0.9370 -5.2352 -2.6200 -2.7851 13.2004 4.3302 13.0957 0.0202 -0.0129 -11.9830 8.6358 1.0661 -4.2888 0.0247 0.0111 -2.4067 -3.3140 1.1483 12.0155 -0.0016 0.0030 -11.2183 -6.3590 -1.9419 -9.9284 -0.0039 -0.0030 -4.1054 0.3749 -0.0837 2.2164 0.9015 0.4619 0.1135 1.1612 0.4322 0.4981 -6.1446 -2.0691 -1.3898 -6.0820 -1.7213 -3.3008 -6.0705 -1.3006 -0.2821 1.1947 0.0054 -20.4349 -0.0327 -1.3623 -0.0780 -6.1668 0.0685 0.3048 11.4786 2.7558 -0.5726 -3.6453 -0.0360 -57.6996 8.0905 10.1719 -0.0236 19.2380 0.0399 33.3954 -26.0372 6.7530 35.7416 40.7156 -2.9287 -0.9365 -5.2352 -2.6195 -2.7850 13.2004 4.3303 13.0956 0.0202 -0.0129 -11.9830 8.6358 1.0661 -4.2888 0.0247 0.0111 -2.4066 -3.3140 1.1485 12.0154 -0.0016 0.0030 -11.2183 -6.3590 -1.9419 -9.9284 -0.0039 -0.0030 -4.1078 0.3751 -0.0879 2.2190 0.9024 0.4657 0.1129 1.1575 0.4347 0.5033 -6.1518 -2.0799 -1.3851 -6.0914 -1.7271 -3.2960 -6.0801 -1.3037 -0.2984 1.1874 0.0057 -20.3011 -0.0729 -1.3614 -0.0780 -5.9355 0.0689 0.0176 10.6160 2.9421 -0.5602 -3.6492 -0.0353 -57.6698 8.1021 10.1816 -0.0236 19.2560 0.0399 33.3102 -26.1956 6.6386
9. 9. CS 354 9 Legacy Typography  Metal movable type …but now we use computers
10. 10. CS 354 10 But Now Type ≈ Math  Fonts are now represented by filled paths  Defined by piecewise Bezier segments  Fonts are defined by math now  Not chunks of cast metal  Plato’s ideals win!
11. 11. CS 354 11 Cubic Bezier Segment Review  Four control points define a cubic Bezier curve  Over parametric range [0,1]  Defined by 3rd order polynomial
12. 12. CS 354 12 Connected Continuity Between Two Bezier Segments  4th point of 1st segment is 1st curve of the 2nd segment t en 2 nd gm se se gm 1 st en t control point shared by both segments
13. 13. CS 354 13 Tangent Continuity Between Two Bezier Segments  Tangent of 1st segment equal to tangent of the 2nd curve 2 nd t se en gm gm en se t 1 st control point shared by both segments
14. 14. CS 354 14 PostScript (Adobe) Fonts  Cubic Bezier control points  Good artistic control 4 control points per curved segments
15. 15. CS 354 15 TrueType (Apple/Microsoft ) Fonts  Quadratic Bezier Curves  Cheaper evaluation than cubics  Typically requires more control points 3 control points per curved segments
16. 16. CS 354 16 MetaFont Approach  Preceded PostScript and TrueType fonts  Designed by Douglas Knuth (Stanford)  Used by Knuth’s TeX typesetting system  Glyphs defined by strokes  Not filled path contours  Glyphs specified with a programming language  Not friendly to artists—don’t expect artists to write programs to define glyphs
17. 17. CS 354 17 One Word, Three Typefaces
18. 18. CS 354 18
19. 19. CS 354 19 Careful: Strong Opinions Ahead  Everyone who reads is arguably a student of typography  You can have an opinion about type  But designers and artists care about typography a lot  And for good reason! Example strong sentiment
20. 20. CS 354 20
21. 21. CS 354 21 Glyph Variety  Typeface  Serifs  Style  Weight  Point size  Character spacing  Mono-spaced, proportional, kerned
22. 22. CS 354 22 Oldstyle (Renaissance) typefaces
23. 23. CS 354 23 Modern typefaces
24. 24. CS 354 24 Slab Serif typefaces
25. 25. CS 354 25 San Serif typefaces
26. 26. CS 354 26 Most Famous San Serif Typeface  Hurray for Helvetica!  Exhibited at New York Modern of Modern Art  And subject of a documentary  Not to be confused with its TrueType clone, Arial
27. 27. CS 354 27 Style within a Typeface  Italic  Slanted with  Different glyph shapes  Oblique  Slanted but  Same glyph shape  Other styles  Small Caps
28. 28. CS 354 28 Weight  How “heavy” or “light” is the type?
29. 29. CS 354 29 Stretch
30. 30. CS 354 30 Text layout  Line spacing  Leading, inter-line spacing  Justification  Left, right, centered, justified  Style sheets or templates  Define document-wide layout parameters  Headers, footnotes, columns, etc.
31. 31. CS 354 31 Typographical Units  Legacy units  Specialized to the domain of typesetting  Pre-dates the Metric system  Points (pt)  Traditional: 72 pt ≡ 0.996 inches  Adobe: 72 pt ≡ 1in  Picas (pc)  12 pt = 1 pc  Font-relative units  Em—originally width of capital “M”  En—half the size of “M”  typically size of space between words  Now Em corresponds to Point Size of font
32. 32. CS 354 32 Point Size  Type is historically measured in points  1/72nd of an inch  Problem  Pixel size ≠ point size  Used to be approximately true for 72 dpi  DPI = dots per inch, or PPI = pixels per inch  Newer displays are 96 to 120 dpi  Often used as an approximation anyway
33. 33. CS 354 33 Font Metrics  Metrics for all glyphs in a font  Typeface at a particular point size  Point size of font ≈ ascender + descender
34. 34. CS 354 34 Glyph Metrics  Glyph metrics vary with each glyph in a font  Intended to be “consistent” with other glyphs in font Horizontal metrics Vertical metrics Image credit: FreeType 2 Tutorial
35. 35. CS 354 35 Kerning  Spacing between two glyphs is customized to the two glyph’s shapes  Improves readability  Generally encoded as ad hoc table by typeface
36. 36. CS 354 36 Ligatures  Joins two or more characters into a glyph  Given “type set” feel to text  Sometimes stylistic, Sometimes archaic  Sometimes called digraphs  Ligatures vary with language and script common modern system English ligatures
37. 37. CS 354 37 Combining Marks
38. 38. CS 354 38 Character Sets  Mapping of integers to characters  Then font maps character to glyphs  Used to be many character sets  Tower of Babel for text interchange   ASCII (7-bit) for America  IBM has EBCDIC  Extended Binary Coded Decimal Interchange Code  ISO/IEC 8859-1 for Western Europe  Huge problem for East Asian languages (CJK)  Unicode has fixed the problem…
39. 39. CS 354 39 Unicode  International standard (1991)  Now on version 6.1  New character points keep getting added  One encoding for basically all human writing systems  More than 249,763 characters so far  1,114,112 maximum  In over 100 scripts  TrueType and OpenType support Unicode  All typefaces are incomplete in their support
40. 40. CS 354 40 Overlaps with ASCII
41. 41. CS 354 41 CJK Extension-A
42. 42. CS 354 42 What is a computer font?  Map of character points to “characters”  Unicode, ASCII, etc.  Map of “characters” to glyphs  Font-wide metrics  Per-glyph information  Glyph outline  Metrics for each glyph  Kerning information w.r.t. adjacent glyphs  Hints
43. 43. CS 354 43 Encodings for Unicode  Can’t use 8-bit characters for all Unicode  Even 16-bit integer isn’t enough!  UTF-8  Variable-width 8-bit encoding  Can represent every Unicode character  Used by Linux and the web  UTF-16  Variable width 16-bit character encoding  Used by Windows  UTF-32  32 bits per character points  Easiest to process, least compact
44. 44. CS 354 44 Rendering Outline Glyphs  Conventional method  CPU-based scan-line rasterization  Augmented by hinting  Adaptively Sampled Distance Fields (ADFs)  MERL’s Saffron type system  Glyphs are static so pre-computation is effective  Bitmaps often cached
45. 45. CS 354 45 Massively Parallel GPU-accelerated Path Rendering Visualized Anchored triangle Anchored triangle fans geometry fans net stencil Stencil =1 Path commands and control points Resulting net coverage in stencil Curved segment Curved segment geometry net stencil Stencil -1 Stencil +1Credit: [Kokoji 2006]
46. 46. CS 354 46 Typographic Tension “Is the tex t positione d accurate other text ly relative and gr aph to ” ics?” ad? ” re ble? to ia sy ntif ac ea e c “Is tely xt rs id ur e e a t t he r ep “Is lett t y p r es e re “A ef a nt e ce d? Legibility & Geometric ” readability fidelity  Tension resolved by increased pixel density!  Challenge: PC displays have maintained a fairly constant pixel density over decades  New computing form factors changing this  Tablets, smart phones, e-readers, wall touch screens
47. 47. CS 354 47 Improving Legibility  When screens are 75 to 100 dpi  Legibility of text suffers  Strategies  Anti-aliasing glyphs  Disadvantage: makes characters blurry  Disadvantage: small features get lost  Hinting  Adjust glyph outline to preserve glyph features  Anti-anti-aliasing technique  ClearType  Exploit knowledge of pixel’s color geometry  Increase pixel density  Assumes resolution-independent 2D  Hard when window system depends on bitmap content
48. 48. CS 354 48 Pixel Density Helps  More pixels in the same area provide a sharper glyph
49. 49. CS 354 49 Font Hinting  Overall idea  “improving the appearance of small text at low resolution”  Constrains the scaling of glyphs to match designers intent at particular device resolutions  Harder than it sounds!  TrueType approach  Outlines defined with quadratic Bezier segments  Hints defined with an assembly-like imperative programming language to express per-glyph adjustments
50. 50. CS 354 50 Glyph Hinting Example  Modify the outline to better match the device’s pixel grid master outline better sampling poorly sampled after grid fitting
51. 51. CS 354 51 Glyph Hinting Example  Outline is fitted to the device grid  Diagonal control master outline fitted & rasterized to with hints device grid
52. 52. CS 354 52 ClearType  Advantages  Increases spatial resolution for glyphs  Uses sub-pixel rendering  Disadvantages  Color fringing on text  Assumes black text on white background  Text must be aligned to orthogonal pixel grid  Depends on knowledge of RGB pixel geometry  Can vary by monitor  Complicates text rendering  Requires knowledge of device grid, glyph geometry, and RGB pixel geometry  Windows only due to Intellectual Property restrictions
53. 53. CS 354 53 without ClearType with ClearType
54. 54. CS 354 54 Programs to Design Typefaces FontLab Studio 5.0
55. 55. CS 354 55 Font and Typographic APIs  Windows  DirectWrite atop GDI or Direct2D  Legacy GDI  Linux / cross platform  Cairo  FontConfig  FreeType 2  Pango  Mac OS X  Core Text  Advanced Text Services for Unicode Imaging
56. 56. CS 354 56 DirectWrite Functionality  DirectWrite integrates a lot of typographic functionality  Similar to Apple’s integrated approach with Apple Type Services for Unicode Imaging (ATSUI), now Core Text  Where Linux unbundles these components  Cairo = path rendering, including text  FontConfig = to locate font resources  FreeType2 = font loading, font rasterizer  Pango = text layout, script processing
57. 57. CS 354 57 OpenGL Ignores Text  OpenGL ambivalent about text  glBitmap closest thing API support  Relying on window system interfaces to populate display lists with bitmap  glXUseXFont, wglUseFontBitmaps  Quite unique among render systems in this ambivalence!  Xlib, GDI, PostScript, PHIGS, PEX, Quartz 2D, Java 2D, Qt, SVG, OpenVG, Flash, Cairo, Silverlight, Direct3D/Direct2D/DirectWrite support first-class text  Lack of text isn’t good; it’s anomalous and odd
58. 58. CS 354 58 OpenGL Bitmap Fonts  GLUT includes implementation  glutBitmapCharacter  Calls glBitmap with pre-compiled bitmap data  Also window system specific routines to get bitmaps from system fonts  wglUseFontBitmaps for Windows  glXUseXFont for X Window System (Linux)
59. 59. CS 354 59 OpenGL Stroke Fonts  Draw glyph’s stroke as line segments  Can transform arbitrarily  Use glEnable(GL_LINE_SMOOTH) for anti-aliasing  glutStrokeCharacter does this
60. 60. CS 354 60 Other Text Approaches  Pack glyphs in texture atlas  Then draw textured rectangles with the correct texture coordinates for each glyph
61. 61. CS 354 61 First-class Text Support in Various Rendering Systems Rendering system Vendor / Sponsor First-class text? Cairo Open source Yes Direct2D / Direct3D Microsoft Yes Flash Adobe Yes GDI Microsoft Yes Java 2D Sun Yes OpenGL Khronos No OpenVG Khronos Yes Office Open XML Microsoft / ECMA Yes PDF Adobe Yes PHIGS ISO Yes PostScript Adobe Yes Qt Nokia Yes Quart 2D Apple Yes Scalable Vector Graphics (SVG) World Wide Web Consortium Yes Silverlight Microsoft Yes Xlib X Consortium Yes
62. 62. CS 354 62 How did OpenGL’s lack of text support last for so long?  OpenGL was designed in 1992  Pre-Unicode world  Fonts were bitmaps of ASCII back then  Now TrueType and OpenType dominate  The primitive initial state of OpenGL’s font support has become mistaken for a philosophical dictate  Text-based applications uniformly ignore OpenGL  Not a good thing  3D applications have their expectations adjusted to expect lousy text  Not a good thing  Example: Quake 2 console text is miniscule because textured bitmap characters assumed text sized for 800x600 display
63. 63. CS 354 63 The World Has Changed Since 1992  Unicode universally accepted now  Systems ship with near-complete, resolution-independent Unicode fonts now  Good fonts come with your operating system license  International character of web makes UTF-8 text common today  Windows adoption of UTF-16 makes that common within Windows  Web has expanded font repertoire of systems  Content providers and users expect wide range of available fonts  Fonts have standard names embedded in web content  These font names span operating systems  Screen resolution has increased  1992: 640x480 aliased  2009: 1920x1200+ multisampled  Needing all text to be in small point sizes to fit screen isn’t a mandate anymore  3D support and acceleration is pervasive now  Text makes sense mixed with 3D content today
64. 64. CS 354 64 Direct Path Rendering of Text in OpenGL  Recent work  NV_path_rendering provides GPU-acceleration of paths, including glyphs  Glyph support is first-class
65. 65. CS 354 65 Digital Typography Trends  Hinting is going away  Mainly due to denser screens  Expectation of antialiased font appearance  Text not always presented axis-aligned  More font variety in web content  Improving standards  More available fonts  Even font variety for East Asian writing systems
66. 66. CS 354 66 Next Class  Next lecture  Ray casting and ray tracing  An alternative 3D rendering approach to rasterization  Project 3  Begin work  Due Wednesday, April 18, 2012  (Project 4 will be a simple ray tracer and immediately follow Project 3)
67. 67. CS 354 67 Credits  Pat Hanrahan (Stanford)  Microsoft Typography  http://www.microsoft.com/typography  Beat Stamm’s The Raster Tragedy at Low-Resolution Revisited  http://shop.ilovetypography.com/product/a-world-without-type