typography on web how browsers render text · to design and develop the digital products ......
TRANSCRIPT
![Page 1: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/1.jpg)
TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT
Igor Trindade Oliveira @igortolivei
![Page 2: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/2.jpg)
OUR MISSION
To design and develop the digital products people use every day.
![Page 3: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/3.jpg)
2013FOUNDED
BrooklynHEADQUARTERS
EMPLOYEES
172
OFFICES
ORPortland
BRRio de Janeiro
![Page 4: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/4.jpg)
KEY ENGAGEMENTS TO DATE
![Page 5: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/5.jpg)
Refuse to accept that unfamiliar things are black boxes full of magic that can’t be touched.
WHY?
![Page 6: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/6.jpg)
Diversity
TYPOGRAPHY
![Page 7: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/7.jpg)
Diversity
TYPOGRAPHY
Baseline
X-height
Cap Height
![Page 8: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/8.jpg)
TYPOGRAPHY
حكمةਿਸਆਣਪ
![Page 9: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/9.jpg)
TYPOGRAPHY
حكمة ح ك م ة ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ
![Page 10: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/10.jpg)
WEB BROWSER
Render Tree SVG Animation WebGL Web APIs
HTML Parser DOM CSS Parser Workers JS Engine
Open GL Text Layout AudioHarfBuzz (Linux) CoreText (MacOSX) DirectWrite (Window)
![Page 11: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/11.jpg)
WEB BROWSER
Render Tree SVG Animation WebGL Web APIs
HTML Parser DOM CSS Parser Workers JS Engine
Open GL Text Layout AudioHarfBuzz (Linux) CoreText (MacOSX) DirectWrite (Window)
![Page 12: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/12.jpg)
DOM Render Layout Paint
HIGH LEVEL FLOW
HTML
CSS
![Page 13: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/13.jpg)
DOM Render Layout Paint
HIGH LEVEL FLOW
HTML
CSS
![Page 14: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/14.jpg)
NetworkByte Stream
DecoderTokenizer
Input Stream Processor
DOM Tree Builder
Script Execution
document.write
PARSING HTML
![Page 15: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/15.jpg)
PARSING HTML • The parsing algorithm is spec’d
• It is extremely forgiving
• Reentrant
• The WebKit implementation has 10k LOC
![Page 16: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/16.jpg)
<!DOCTYPE html> <html> <head> <meta charset=utf-8"> <title>Title</title> </head> <body> <span> Hi WebBR! </span> </body> </html>
PARSING HTML – EXAMPLE
![Page 17: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/17.jpg)
1: BODY 0x1231b08f0 (renderer 0x1175d6af0) 2: #text 0x1174bac80 "\n " 3: SPAN 0x1231b0958 (renderer 0x11749d540) 4: #text 0x1174bacd0 " Hi WebBR! " 5: #text 0x1174bad20 "\n\n\n"
PARSING HTML – EXAMPLE
![Page 18: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/18.jpg)
<!DOCTYPE html> <html> <meta charset=utf-8"> <head> <title>Title</title> </head> <body> <div style="unicode-bidi: plaintext"> שלו Unicode مرحبا </div> </body> </html>
PARSING HTML – EXAMPLE
![Page 19: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/19.jpg)
PARSING HTML – EXAMPLE
![Page 20: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/20.jpg)
1: BODY 0x11bb2e270 (renderer 0x1176d4e38) 2: #text 0x11bb162d0 "\n " 3: DIV 0x11bb2e2d8 (renderer 0x1203d4230) STYLE=unicode-bidi: plaintext; 4: #text 0x11bb16b40 "\n مرحبا Unicode שלו\n " 5: #text 0x11bb16b90 "\n\n\n"
PARSING HTML – RESULT
![Page 21: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/21.jpg)
DOM Render Layout Paint
HTML
CSS
PARSING HTML – EXAMPLE
![Page 22: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/22.jpg)
RENDER AND LAYOUT • It is a forest of Objects:
• RenderLayers
• RenderObject
• Line boxes
![Page 23: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/23.jpg)
LINE BOX • It represents a rectangle that occurs in a line.
• Encapsulates the Text Runs
![Page 24: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/24.jpg)
<!DOCTYPE html> <html> <meta charset=utf-8"> <head> <title>Title</title> </head> <body> <div> שלו Unicode مرحبا </div> </body> </html>
LINE BOX – EXAMPLE
![Page 25: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/25.jpg)
שלו Unicode مرحبا
RootInlineBox
InlineBox InlineBox InlineBox
LINE BOX – EXAMPLE
![Page 26: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/26.jpg)
1: layer at (0,0) size 800x600 2: RenderView at (0,0) size 800x600 3: layer at (0,0) size 800x37 4: RenderBlock {HTML} at (0,0) size 800x37 5: RenderBody {BODY} at (8,8) size 784x21 6: RenderBlock {DIV} at (0,0) size 784x21 7: RenderText {#text} at (0,1) size 119x18 8: text run at (0,1) width 32 RTL: "\x{645}\x{631}\x{62D}\x{628}\x{627}" 9: text run at (31,1) width 63: " Unicode " 10: text run at (93,1) width 26 RTL: "\x{5E9}\x{5DC}\x{5D5}"
RENDER TREE
![Page 27: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/27.jpg)
Line BreakerUnicode
BiDi Algorithm
White space collapsing
Construct Runs for segment
TextLine
Boxes
Text Shaper
LINE LAYOUT
![Page 28: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/28.jpg)
Line BreakerUnicode
BiDi Algorithm
White space collapsing
Construct Runs for segment
TextLine
Boxes
<br> word-break
LINE LAYOUT
![Page 29: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/29.jpg)
Line BreakerUnicode
BiDi Algorithm
White space collapsing
Construct Runs for segment
TextLine
Boxes
<br> word-break:
white-space:
LINE LAYOUT
![Page 30: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/30.jpg)
Line BreakerUnicode
BiDi Algorithm
White space collapsing
Construct Runs for segment
TextLine
Boxes
<br> word-break:
white-space: Block / Inline dir=
unicode-bidi: direction:
Unicode characters
LINE LAYOUT
![Page 31: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/31.jpg)
Line BreakerUnicode
BiDi Algorithm
White space collapsing
Construct Runs for segment
TextLine
Boxes
<br> word-break:
white-space: Block / Inline dir=
unicode-bidi: direction:
Unicode characters
LINE LAYOUT
![Page 32: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/32.jpg)
UNICODE BIDI ALGORITHM
• It describes the algorithm used to render a bidirectional paragraph
• Defines the bidirectional character types(Strong, Weak, Neutral, Explicit Formatting)
• There is just one compliant implementation: libicu.
![Page 33: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/33.jpg)
DOM LayoutRenderer
HTML
CSS
Paint
HIGH LEVEL FLOW
![Page 34: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/34.jpg)
Apply Shaping
algorithm
Render Glyphs
Line Boxes
Generate Glyphs
PAINTING
![Page 35: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/35.jpg)
Apply Shaping
algorithm
Render Glyphs
Line Boxes
Generate Glyphs
ح + ك + م + ة حكمة
PAINTING
![Page 36: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/36.jpg)
Apply Shaping
algorithm
Render Glyphs
Line Boxes
Generate Glyphs
حكمة
PAINTING
![Page 37: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/37.jpg)
Apply Shaping
algorithm
Render Glyphs
Line Boxes
Generate Glyphs
Skia Graphics Library Qt
GTK Cocoa
PAINTING
![Page 38: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/38.jpg)
OUR WORK
![Page 39: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/39.jpg)
![Page 40: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/40.jpg)
![Page 41: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/41.jpg)
![Page 42: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/42.jpg)
![Page 43: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/43.jpg)
![Page 44: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/44.jpg)
![Page 45: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/45.jpg)
![Page 46: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/46.jpg)
![Page 47: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/47.jpg)
![Page 48: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/48.jpg)
Q&A
![Page 49: TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT · To design and develop the digital products ... TYPOGRAPHY ة م ك ح ةمكح ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ. WEB BROWSER Render](https://reader034.vdocuments.mx/reader034/viewer/2022051916/6007a68160d6a35bfa4641e2/html5/thumbnails/49.jpg)
www.work.co 244 Water St. Brooklyn, NY. 11201