Upgrade to Pro — share decks privately, control downloads, hide ads and more …

La letra con píxel entra

Avatar for Swwweet Swwweet
April 20, 2013
Design
0
1.1k

La letra con píxel entra

Presentación de Marta Armada en Entretipos el 20/04/13

Avatar for Swwweet

Swwweet

April 20, 2013
Tweet

More Decks by Swwweet

See All by Swwweet
Wonders from the Full Stack Fest website
Avatar for Swwweet swwweet
1
340
How to be the best web designer in the world.
Avatar for Swwweet swwweet
6
1.2k
Design for loading
Avatar for Swwweet swwweet
5
510
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
224
9.9k
One Size Fits None
Avatar for Swwweet swwweet
12
860
One Size Fits None - From the Front 2013
Avatar for Swwweet swwweet
2
710
Responsively Responsive
Avatar for Swwweet swwweet
23
1.6k
The future of code
Avatar for Swwweet swwweet
4
590
RWD: Dealing with navigation
Avatar for Swwweet swwweet
5
510

Other Decks in Design

See All in Design
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
1
150
FigmaのFigmaファイルから学ぶTips & Tricks
Avatar for Hiroki Tani hilokifigma
0
650
ブランドパーソナリティ言語化における生成AI活用の実際
Avatar for Hiroki Hosaka h0sa
0
270
【最新】マズロー安達の弟子実績（1期-4期の26人分）
Avatar for マズロー安達 maslow_akkun
0
1.9k
アプリ360onWeb使い方と裏ワザ？紹介！
Avatar for ikejun360 ikejun360
0
240
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
Avatar for Yu Morita securecat
5
1.6k
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
Avatar for HIROYUKI SAITO crearedesign
0
280
読書シェア会 vol.5 / Yumemi.grow 20250526
Avatar for Rakus_Dev rakus_dev
0
1.7k
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
500
「UXとUIの違い」v2
Avatar for Shirasu3 shirasu3
0
230
そのUIコンポーネント、これから先も使えますか？―Headless UI,Open UI,グローバルデザインシステム
Avatar for sakito sakito
2
1.6k
SAMSUL KAMAR ABDUL RAHMAN
Avatar for SAMSUL RAHMAN samsulrahman32
0
150

Featured

See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3k
KATA
Avatar for Megan Lloyd mclloyd
32
14k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
614
210k
Docker and Python
Avatar for Tania Allard trallard
45
3.5k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.4k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
185
54k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
51
5.6k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.4k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k

Transcript

  1. MARTA ARMADA @MARTUISHERE #ENTRETIPOS la letra con píxel entra

  2. ¡hola!

  3. ¡hola! me llamo Marta y diseño webs en swwweet.com

  4. ¿y tú?

  5. informationarchitects.net/blog/the-web-is-all-about-typography-period

  6. Optimizar la tipogra a es optimizar la legibilidad, la accesibilad,

    la usabilidad, el equilibrio gráfico general. [...] Entonces, ¿por qué se descuida tanto este tema? “ ” Oliver Reichenstein

  7. flickr.com/photos/alexanderwolf/2452809327

  8. None

  9. diepresse.com

  10. meneame.net

  11. None

  12. ¿por qué?

  13. arial georgia verdana courier new times new roman

  14. None

  15. colly.com/journal/

  16. seedconference.com/seed

  17. ¡cuida la web! ♥ ♥ ♥ ♥ ♥ ♥ ♥

    ♥ ♥ ♥
  18. None
  19. None

  20. .mi-texto{ width: 30em; }

  21. informationarchitects.net/blog/100e2r revista vs. pantalla

  22. bit.ly/16pixelstype

  23. None
  24. None

  25. contrastrebellion.com

  26. D ET ALLES

  27. DETALLES

  28. rufián coliflor

  29. ru án coli or

  30. h1{ text-rendering: optimizeLegibility; }

  31. "t'estimo"

  32. “t’estimo”

  33. “t’estimo” “ ’ ” “ ” '

  34. «t’estimo» « » « »

  35. – — − × … & – — - ×

    … &

  36. Llegó en el AVE de las 13:46.

  37. Llegó en el AVE de las 13:46.

  38. abbr{ font-variant: small-caps; }

  39. ve ido de có el

  40. h1{ font-feature-settings: “dlig”1; }

  41. h1{ -webkit-font-feature-settings: “dlig”1; -moz-font-feature-settings: “dlig=1”; font-feature-settings: “dlig”1; }

  42. webcatbcn.com

  43. ie.microsoft.com/testdrive/Graphics/opentype/opentype-fontbureau/index.html

  44. web fonts

  45. web fonts

  46. WEBFONTS

  47. bfonts

  48. @font-face{ font-family: “Adelle”; src: url(fonts/Adelle.woff); } body{ font-family: Adelle, Georgia,

    serif; }

  49. @font-face{ font-family: “Adelle”; src: url(fonts/AdelleBold.woff); font-weight: bold; } h1{ font-family:

    Adelle, Georgia, serif; font-weight: bold; }

  50. woff svg otf ttf eot

  51. woff svg otf ttf eot IE4 IE9 Safari 3.1 Safari

    3.1 Safari 3.1 Safari 5 Safari 5 Firefox 3.1 Firefox 3.1 Firefox 3.6 Chrome 4 Chrome 4 Chrome 6 iOS 3.2 Android 3 iOS 5 iOS 4.2 Android 2.2 Android 2.2

  52. @font-face{ font-family: “Adelle”; src: url(Adelle.eot) format(‘embedded-opentype’); src: url(Adelle.eot#iefix) format(‘embedded-opentype’), url(Adelle.woff)

    format(‘woff’), url(Adelle.ttf) format(‘truetype’), url(Adelle.svg#svgAdelle) format(‘svg’); }
  53. None

  54. fontsquirrel.com/tools/webfont-generator

  55. typekit.com

  56. myfonts.com

  57. ¿eres tipógrafo?

  58. theharrietseries.com

  59. podemos hacerlo mejor

  60. jasonsantamaria.com

  61. kitchensinkstudios.com

  62. digg.com

  63. hola.jetblue.com

  64. arsenal.com

  65. greygoose.com

  66. @MARTUISHERE [email protected] ¡gracias!