@font-face – variety of quirky styles
Wood type poster
Slide 210
Slide 210 text
@font-face – variety of quirky styles
rgba color – texture, double-printing
Wood type poster
Slide 211
Slide 211 text
@font-face – variety of quirky styles
rgba color – texture, double-printing
:before + content – chromatic type
Wood type poster
Slide 212
Slide 212 text
No content
Slide 213
Slide 213 text
MAGAZINE
Spread
Slide 214
Slide 214 text
No content
Slide 215
Slide 215 text
No content
Slide 216
Slide 216 text
No content
Slide 217
Slide 217 text
No content
Slide 218
Slide 218 text
No content
Slide 219
Slide 219 text
DESIGN
SYSTEM
Slide 220
Slide 220 text
Idea DESIGN
SYSTEM
Slide 221
Slide 221 text
Idea PRINTED BOOK
PERIODICAL
STANDARD SIZE
Slide 222
Slide 222 text
Elegance
High-contrast type
Photos / color
Full use of page
PRINTED BOOK
PERIODICAL
STANDARD SIZE
Slide 223
Slide 223 text
DESIGN
SYSTEM
Elegance
High-contrast type
Photos / color
Full use of page
Slide 224
Slide 224 text
DESIGN
SYSTEM
Elegance
High-contrast type
Photos / color
Full use of page
Slide 225
Slide 225 text
FONT-FACE
COLUMN-COUNT
BACKGROUND-SIZE
RESPONSIVE
Elegance
High-contrast type
Photos / color
Full use of page
Slide 226
Slide 226 text
No content
Slide 227
Slide 227 text
No content
Slide 228
Slide 228 text
@font-face
Slide 229
Slide 229 text
from TypeTogether
Slide 230
Slide 230 text
from Phil’s Fonts / Darden
Slide 231
Slide 231 text
No content
Slide 232
Slide 232 text
responsive design
Slide 233
Slide 233 text
responsive design
“The control which designers know in the print
medium, and often desire in the web medium, is
simply a function of the limitation of the printed page.
We should embrace the fact that the web doesn’t have
the same constraints, and design for this exibility.”
John Allsopp, “A Dao of Web Design”
Slide 234
Slide 234 text
No content
Slide 235
Slide 235 text
No content
Slide 236
Slide 236 text
Fluid layout
Flexible images
Media queries
Slide 237
Slide 237 text
Fluid layout
Slide 238
Slide 238 text
Fluid layout
Horizontal measurements in %
Slide 239
Slide 239 text
Fluid layout
Horizontal measurements in %
FitText.js for full-width heading
Slide 240
Slide 240 text
Fluid layout
Horizontal measurements in %
FitText.js for full-width heading
$(function() { $('.heading h1').fitText(5.7) });
Slide 241
Slide 241 text
Fluid layout
Horizontal measurements in %
FitText.js for full-width heading
Viewport meta tag for mobile devices
Slide 242
Slide 242 text
Fluid layout
Horizontal measurements in %
FitText.js for full-width heading
Viewport meta tag for mobile devices
Slide 243
Slide 243 text
Flexible images
Slide 244
Slide 244 text
Flexible images
Scaling background image using background-size
Slide 245
Slide 245 text
Flexible images
Scaling background image using background-size
html {
background: #00a3b0 url(images/background.jpg)
no-repeat top center;
background-size: cover;
}
Slide 246
Slide 246 text
Media queries
Slide 247
Slide 247 text
Media queries
Overriding CSS properties in certain situations
Slide 248
Slide 248 text
Media queries
Overriding CSS properties in certain situations
@media screen and (max-width: 400px) {
.heading h2 {
font-size: 2em;
}
}
Slide 249
Slide 249 text
Media queries
Overriding CSS properties in certain situations
Choosing breakpoints
Imitate a form
Translate an idea
Full use of medium
Slide 273
Slide 273 text
No content
Slide 274
Slide 274 text
is hiring!
Slide 275
Slide 275 text
is hiring!
bit.ly/typekit-api-engineer
Slide 276
Slide 276 text
Get the
LOOK
[email protected] – seanmcb.com/sxsw2012
#SexyType
@smcbride
Slide 277
Slide 277 text
Fashion 1 by Stephen Drake
1
Hey there by Petra Cross
2
Flickr
Image
Credits
Soda Crackers by Lane Pearman
18
Hand-Made Signs in Baltimore by Colin Dunn
17
Brooklyn Circus SF by Damon Styer
19
The Phoenix Pub by Damon Styer
19
Quiet by Damon Styer
19
Far West Harvest by Damon Styer
20
Hand-Made Signs in Baltimore by Colin Dunn
24
Glyphs hunter by Camil Tulcan
59
The a Mano / Dean... by Nick Sherman
60
On the press by Nick Sherman
57
????? by Nick Sherman
61
Moldy kiss by Nick Sherman
62
Hamilton's Wood Type... by Nick Sherman
63
Modern Honors Bound by Nick Sherman
63
1987 Vogue layout spread by Nate Bolt
95
Responsive Web Design by Jason Santa Maria
108
Moldy kiss by Nick Sherman
62