New Perspectives On Web Design

By Marko Dugonjić CHAPTER 9 If Web fonts are self-hosted, we can subset them with FF Subsetter^58 or the aforementioned Font Squ ...

CHAPTER 9 The Next Steps for Web Typography Content-based Media Query Breakpoints To determine where to introduce breakpoints, w ...

By Marko Dugonjić CHAPTER 9 Some users zoom into websites. To allow for proportional scaling with zoomed-in text, we can use ems ...

CHAPTER 9 The Next Steps for Web Typography white Space hierarchy There are three white spaces within a paragraph that are inter ...

By Marko Dugonjić CHAPTER 9 Obviously, there are natural boundaries for both line length and line height. While we need to reduc ...

CHAPTER 9 The Next Steps for Web Typography @media only screen and (min-width: 62.5em) { p { font-size: 1.312rem; /* 21px */ lin ...

By Marko Dugonjić CHAPTER 9 This becomes especially handy at small screen sizes, where not many bits of information compete for ...

CHAPTER 9 The Next Steps for Web Typography Correctly spaced letters and words should be invisible to a non-trained eye, so if t ...

By Marko Dugonjić CHAPTER 9 CSS3 Text Module Level 3 Working Draft^69 proposes the new spacing-limit value type, which represent ...

CHAPTER 9 The Next Steps for Web Typography p { hyphens: auto; hyphenate-before: 2; hyphenate-after: 3; hyphenate-lines: 3; } CS ...

By Marko Dugonjić CHAPTER 9 hanging Symbols and numbers Instead of relying on the list-style property which we cannot control, w ...

CHAPTER 9 The Next Steps for Web Typography /* — or — */ blockquote p:first-child: before { content: "“"; font-size: 4em; color: ...

By Marko Dugonjić CHAPTER 9 Vladimir Simović goes a little further and explains how to apply automatic numbering to headings^75 ...

CHAPTER 9 The Next Steps for Web Typography Modular Scales The most common way to establish hierarchy is with a typographic scal ...

By Marko Dugonjić CHAPTER 9 On smaller screens there are only a few elements on the screen at the same time and the signal-to-no ...

CHAPTER 9 The Next Steps for Web Typography One possible scenario in responsive typography is switching between style variations ...

By Marko Dugonjić CHAPTER 9 th, td { border-top: .1em solid #ccc; padding: .65em 1em .75em; / .75em = 1.5em/2 / vertical-align: ...

CHAPTER 9 The Next Steps for Web Typography table { border-collapse: collapse; border-spacing: 0; table-layout: fixed; max-width ...

By Marko Dugonjić CHAPTER 9 iA graded fonts In print design there is rough paper; in Web design there is a coarse low resolution ...

CHAPTER 9 The Next Steps for Web Typography @media only screen and (min-device-pixel-ratio: 1.5) and (orientation: portrait) { @ ...