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.2k

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
350
How to be the best web designer in the world.
Avatar for Swwweet swwweet
6
1.3k
Design for loading
Avatar for Swwweet swwweet
5
530
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
One Size Fits None
Avatar for Swwweet swwweet
12
880
One Size Fits None - From the Front 2013
Avatar for Swwweet swwweet
2
730
Responsively Responsive
Avatar for Swwweet swwweet
23
1.6k
The future of code
Avatar for Swwweet swwweet
4
610
RWD: Dealing with navigation
Avatar for Swwweet swwweet
5
530

Other Decks in Design

See All in Design
不確実性の時代にみんなで試したFigma × MCP × Cursor ハンズオン
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
7
1.2k
Findyのプロデチームの 歩みとこれから
Avatar for Satty satty9556
0
340
モビリティプラットフォームの未来を築くクラウド基盤
Avatar for Hajime KOSHIRO kossykinto
0
100
21 Ways to Call American Airlines Customer Care Full Guide USA
Avatar for Sonny americanhub
0
310
新卒の目から見たサイボウズのデザイン組織
Avatar for 小林諒大 ryota5884
0
250
1年目デザイナーが実践する、チーム貢献のための2つのアプローチ
Avatar for kinomi kinomidesign
0
130
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
Avatar for Hiromi Morikawa hiromitsuuuuu
1
970
kintone_aroma
Avatar for kintone kintone
0
710
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
Avatar for 株式会社ログラス loglass2019
1
3.1k
文字コントラストを改めて考える / Reevaluating Text Contrast
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
630
プロダクトリニューアルと同時に進める初めてのデザインシステム
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
170
Crisp Code inc.｜ブランドガイドライン - Brand guidelines
Avatar for So Kotani / Crisp Code inc. CEO so_kotani
1
220

Featured

See All Featured
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
57
6.1k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.2k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
127
54k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
162
23k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
76
5.1k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Visualization
Avatar for Eitan Lees eitanlees
150
16k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
274
41k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k

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!