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

כללי אצבע וטיפים לעיצוב טקסטים דיגטליים

כללי אצבע וטיפים לעיצוב טקסטים דיגטליים

כל מה שרציתם/ן לדעת על טיפוגרפיה דיגיטלית ולא העזתם לשאול. בהרצאה זו אחזור לבסיס של העיצוב והטיפוגרפיה עם כמה כללי אצבע לעיצוב טקסטים דיגטליים וטיפים לשדרוג העיצוב של אתרי הוורדפרס שלכם. אדבר על מושגי מפתח בטיפוגרפיה עברית שכל מעצב/מתכנת ישמח להכיר: קרנינג, טרקינג, לדינג, ניקוד, רינדורי טקסט, שילובי פונטים ומשקלים, סריפים, היררכיה, מחוללי טקסט וטכניקות מיוחדות לעיצוב אתרי וורדפרס בקוד סמנטי.

WordCamp Israel

March 28, 2016
Tweet

More Decks by WordCamp Israel

Other Decks in Design

Transcript

  1. םיפיטו עבצא יללכ
    םיילטגיד םיטסקט בוציעל
    דלפנרוק םהרבא

    View Slide

  2. ילע תצק

    View Slide

  3. ןכות

    View Slide

  4. 
 הז טנרטניאל בוציע
    היפרגופיט 95%
    ןייטשנכיר רבילוא
    A.I. MAGAZINE

    View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. PPI

    View Slide

  11. PPI

    View Slide

  12. PPI

    View Slide

  13. PPI

    View Slide

  14. View Slide

  15. עבצא יללכ
    טסקט דומיעל

    View Slide

  16. הרוש ךרוא

    View Slide

  17. הרוש ךרוא
    12הלימ

    View Slide

  18. (Leading/line-height) הרוש־הבוג

    View Slide

  19. (Leading/line-height) הרוש־הבוג
    1.5

    View Slide

  20. הרוש ךרואל סחיב הרוש־הבוג
    םילימ תומכ
    הרושב
    הרוש הבוג
    8
    12
    16
    20 4
    1.6
    1.4
    1.5
    1.3
    1.2

    View Slide

  21. הרוש ךרואל סחיב הרוש־הבוג
    םילימ תומכ
    הרושב
    הרוש הבוג
    8
    12
    16
    20 4
    1.6
    1.4
    1.5
    1.3
    1.2

    View Slide

  22. תוא לדוגל סחיב הרוש־הבוג
    1.6
    1.4
    1.5
    1.3
    תוא לדוג 15
    30
    45
    60 0 px
    1.2
    הרוש הבוג

    View Slide

  23. תוא לדוגל סחיב הרוש־הבוג
    1.6
    1.4
    1.5
    1.3
    תוא לדוג 15
    30
    45
    60 0 px
    1.2
    הרוש הבוג

    View Slide

  24. בא
    תויתואה ןיב חוור
    (letter-spacing/Tracking)

    View Slide

  25. תוא לדוג / תויתוא ןיב חוור
    ןיב חוור
    תויתוא
    תוא לדוג
    0
    16
    2-
    1-
    24
    32
    40 8
    1
    px

    View Slide

  26. תוא לדוג / תויתוא ןיב חוור
    ןיב חוור
    תויתוא
    תוא לדוג
    0
    16
    2-
    1-
    24
    32
    40 8
    1
    px

    View Slide

  27. (text-align) קולב :רושיי

    View Slide

  28. (text-align) קולב :רושיי

    View Slide

  29. הקסיפ עבצ

    View Slide

  30. הקסיפ עבצ

    View Slide

  31. המותי הלימ

    View Slide


  32. המותי הלימ

    View Slide

  33.  

    View Slide

  34. View Slide

  35. matthewlein.com/widowfix
    WidowFix

    View Slide

  36. matthewlein.com/widowfix
    WidowFix

    View Slide

  37. View Slide

  38. View Slide


  39. View Slide

  40. םיטנופ

    View Slide

  41. םיטנופ םיאצומ הפיא
    תירבעב
    ?

    View Slide

  42. םיטנופ םיאצומ הפיא
    תירבעב
    ?

    View Slide

  43. זירדנואפ־פייט

    View Slide

  44. זירדנואפ־פייט
    םיפרגופיט
    םייאמצע

    View Slide

  45. זירדנואפ־פייט
    תוצובק
    םיפרגופיט
    םיפרגופיט
    םייאמצע

    View Slide

  46. זירדנואפ־פייט
    תורבח
    םיטנופ
    תוצובק
    םיפרגופיט
    םיפרגופיט
    םייאמצע

    View Slide

  47. זירדנואפ־פייט
    ףטנופ
    תורבח
    םיטנופ
    תוצובק
    םיפרגופיט
    םיפרגופיט
    םייאמצע

    View Slide

  48. זירדנואפ־פייט
    ףטנופ
    רזע דדוע
    תורבח
    םיטנופ
    תוצובק
    םיפרגופיט
    םיפרגופיט
    םייאמצע

    View Slide

  49. זירדנואפ־פייט
    ףטנופ
    רזע דדוע
    עלס לאומש
    תורבח
    םיטנופ
    תוצובק
    םיפרגופיט
    םיפרגופיט
    םייאמצע

    View Slide

  50. זירדנואפ־פייט
    ףטנופ
    רזע דדוע
    עלס לאומש
    ןתנ ןב
    תורבח
    םיטנופ
    תוצובק
    םיפרגופיט
    םיפרגופיט
    םייאמצע

    View Slide

  51. זירדנואפ־פייט
    ףטנופ
    רזע דדוע
    עלס לאומש
    ןתנ ןב
    הדליגה
    תורבח
    םיטנופ
    תוצובק
    םיפרגופיט
    םיפרגופיט
    םייאמצע

    View Slide

  52. זירדנואפ־פייט
    ףטנופ
    רזע דדוע
    עלס לאומש
    ןתנ ןב
    הדליגה
    אאא
    תורבח
    םיטנופ
    תוצובק
    םיפרגופיט
    םיפרגופיט
    םייאמצע

    View Slide

  53. זירדנואפ־פייט
    ףטנופ
    רזע דדוע
    עלס לאומש
    ןתנ ןב
    טנופרטסאמ הדליגה
    אאא
    תורבח
    םיטנופ
    תוצובק
    םיפרגופיט
    םיפרגופיט
    םייאמצע

    View Slide

  54. זירדנואפ־פייט
    ףטנופ
    רזע דדוע
    עלס לאומש
    ןתנ ןב
    טנופרטסאמ
    טיבטנופ
    הדליגה
    אאא
    תורבח
    םיטנופ
    תוצובק
    םיפרגופיט
    םיפרגופיט
    םייאמצע

    View Slide

  55. זירדנואפ־פייט
    ףטנופ
    רזע דדוע
    עלס לאומש
    ןתנ ןב
    טנופרטסאמ
    טיבטנופ
    פייטנופ
    הדליגה
    אאא
    תורבח
    םיטנופ
    תוצובק
    םיפרגופיט
    םיפרגופיט
    םייאמצע

    View Slide

  56. זירדנואפ־פייט
    ףטנופ
    רזע דדוע
    עלס לאומש
    ןתנ ןב
    טנופרטסאמ
    טיבטנופ
    פייטנופ
    הדליגה
    אאא
    תורבח
    םיטנופ
    תוצובק
    םיפרגופיט
    םיפרגופיט
    םייאמצע

    View Slide

  57. םיימניח םיטנופ

    View Slide

  58. םיימניח םיטנופ

    View Slide

  59. תירבע סנאס ןפוא

    View Slide

  60. ףלא

    View Slide

  61. שומיש תונוישיר

    View Slide

  62. שומיש תונוישיר

    View Slide

  63. שומיש תונוישיר

    View Slide

  64. שומיש תונוישיר

    View Slide

  65. שומיש תונוישיר
    פוטקסד
    OTF / ”טנירפ“ / OpenType

    View Slide

  66. שומיש תונוישיר
    טנופבוו
    WEB / תשר־ןפוג
    פוטקסד
    OTF / ”טנירפ“ / OpenType

    View Slide

  67. שומיש תונוישיר
    טנופבוו
    WEB / תשר־ןפוג
    פוטקסד
    OTF / ”טנירפ“ / OpenType
    היצקילפא
    APP / הנכות

    View Slide

  68. (הרושו) תיתלחתה תוא

    View Slide

  69. השעת לא – תושגדה

    View Slide

  70. השעת לא – תושגדה

    View Slide

  71. השעת לא – תושגדה

    View Slide

  72. השעת לא – תושגדה

    View Slide

  73. השעת לא – תושגדה

    View Slide

  74. תושגדה

    View Slide

  75. תושגדה

    View Slide

  76. תושגדה

    View Slide

  77. תושגדה

    View Slide

  78. טסקט ןומיס

    View Slide

  79. View Slide

  80. ־ה תא וחכשת לא
    Hover
    ?

    View Slide

  81. ־ה תא וחכשת לא
    Hover
    ?

    View Slide

  82. ־ה תא וחכשת לא
    Hover
    ?

    View Slide

  83. View Slide

  84. View Slide

  85. םילשמ יזעול טנופ

    View Slide

  86. םילשמ יזעול טנופ

    View Slide

  87. PX
    vs
    em
    vs
    REM

    View Slide

  88. PX
    vs
    em
    vs
    REM

    View Slide

  89. View Slide

  90. View Slide

  91. View Slide

  92. םולש
    יל םיארוק

    View Slide

  93. םוספיא םרול ללוחמ

    View Slide

  94. alefalefalef.co.il/hameholel

    View Slide

  95. alefalefalef.co.il/hameholel

    View Slide

  96. View Slide

  97. יח וגול

    View Slide

  98. View Slide

  99. 
םע המ לבא
    
Save image as
    ?

    View Slide

  100. View Slide

  101. !סונוב שי ,עגר

    View Slide

  102. View Slide

  103. Schema.org

    View Slide

  104. Schema.org

    View Slide

  105. View Slide

  106. View Slide

  107. View Slide

  108. View Slide

  109. View Slide

  110. View Slide

  111. 
.הדות

    דלפנרוק םהרבא
    avrahamcornfeld.com
    alefalefalef.co.il

    View Slide