タイポグラフィベーシック (+ デザインアイデア)

274c474bb14a19f48ee86907c5be2a1d?s=47 Kite
November 24, 2018
2.3k

タイポグラフィベーシック (+ デザインアイデア)

Web にも DTP にも役立つタイポグラフィの基礎とタイポグラフィを利用したデザインアイデア。

274c474bb14a19f48ee86907c5be2a1d?s=128

Kite

November 24, 2018
Tweet

Transcript

  1. 1.
  2. 2.

    KITE KITERETZ inc. CEO & Founder ­ kite.koga ¬ ixkaito

    ® ixkaito Ŷ ixkaito Ʃ ixkaito ŧ ixkaito Web & graphic designer Programmer WordPress core contributer Ruby on Rails contributer React contributer Wocker developer Bathe developer Frasco developer
  3. 4.

    ݖ ར ຊ ஶ ʂ ϧ ϒ Π ό ͷ

    ܾ ղ ϧ ϒ ϥ τ ݖ ࡞  ݖ ར ຊ Ϋ Ϧ Τ Π λ ͷ ͷ Ί ͨ ͷ ஶɹେ۲ഹɹ๺ଜਸɹ໦ଜ߶େɹݹլւਓɹᜊ໦߂थɹ֯ాҁՂɹછ୩ণར ݱ৔ͰτϥϒϧʹͳΓ͕ͪͳݖརͷ໰୊ʹ͍ͭͯ ɹ ΫϦΤΠλʔͱͯ͠΍ͬͯ͸͍͚ͳ͍͜ͱ ɹ ݖརΛ৵֐͞Εͨ࣌ͷ۩ମతͳରॲ๏ Λɺ Θ͔Γ΍͘͢·ͱΊͨΫϦΤΠλʔͷͨΊͷόΠϒϧ ൃച ஶऀɿେ۲ഹɼ๺ଜਸɼછ୩ণརɼ໦ଜ߶େɼ ݹլւਓɼᜊ໦߂थɼ֯ాҁՂ IUUQTXXXBNB[PODPKQEQ ஶ࡞ݖτϥϒϧղܾͷόΠϒϧʂ ΫϦΤΠ λʔͷͨΊͷ ݖརͷຊ
  4. 11.
  5. 14.
  6. 15.
  7. 28.
  8. 34.

    Lorem ipsum dolor sit amet consectetur adipiscing elit hendrerit viverra

    nunc dapibus, condimentum odio turpis velit non scelerisque proin quisque felis tellus, ligula faucibus habitant tempor himenaeos vitae ridiculus per sapien curae.
  9. 44.

    Lorem ipsum dolor sit amet consectetur adipiscing elit habitant in,

    pretium dapibus dictum senectus luctus mollis ac non diam, interdum ultricies sollicitudin rhoncus mi imperdiet vel himenaeos. Consectetur dapibus orci rutrum donec dictum lobortis quam primis, class ipsum vulputate etiam augue nam tortor. Mattis dis nec mus praesent tortor suspendisse nascetur nunc, platea massa magnis habitasse parturient curabitur leo cubilia, elit fusce penatibus libero aliquam porttitor blandit.
  10. 45.

    Lorem ipsum dolor sit amet consectetur adipiscing elit habitant in,

    pretium dapibus dictum senectus luctus mollis ac non diam, interdum ultricies sollicitudin rhoncus mi imperdiet vel himenaeos. Consectetur dapibus orci rutrum donec dictum lobortis quam primis, class ipsum vulputate etiam augue nam tortor. Mattis dis nec mus praesent tortor suspendisse nascetur nunc, platea massa magnis habitasse parturient curabitur leo cubilia, elit fusce penatibus libero aliquam porttitor blandit. ϑΥϯτͷΤοΫεϋΠ τͷߴ͞ʹ΋ΑΓ·͕͢ɺ ߦૹΓΛج४஋ΑΓڱ͘ ͠ ͯ΋ಡΈʹ͘ ͘ͳΒͳ͍
  11. 46.
  12. 49.

    ϐΫηϧ ڃ ϙΠϯτ ϛ Ϧ ϝʔτϧ ηϯνϝʔτϧ Πϯν ύΠ Χ

     ࣃʢ)ʣ NN ໿ QY JO ໿ QY ໿ QY ໿ QY QY QU QY px Q pt mm cm in pc
  13. 50.

    ཁૉͷϑΥ ϯταΠζ ཁૉͷΤοΫεϋΠ τ ཁૉͷʮʯ ʢθϩʣͷ෯ ϧʔτཁૉͷϑΥ ϯταΠζ Ϗϡʔϙʔτ෯ͷ 

    Ϗϡʔϙʔτߴ͞ͷ  Ϗϡʔϙʔτͷ୹ลͷ  Ϗϡʔϙʔτͷ௕ลͷ  . Y DIBSBDUFS SPPUFN WJFXQPSUXJEUI WJFXQPSUIFJHIU WJFXQPSUNJOJNVN WJFXQPSUNBYJNVN em ex ch rem vw vh vmin vmax ˞ ε Ϋ ϩ ồ ϧ ό ồ ͷ ෯ Λ ؚ Ή
  14. 53.
  15. 54.

    { 9.6x + y = 48 3.2x + y =

    32 େ͖͍εΫϦʔϯ෯ͷ  খ͍͞εΫϦʔϯ෯ͷ  େ͖͍εΫϦʔϯͰͷϑΥϯταΠζ খ͍͞εΫϦʔϯͰͷϑΥϯταΠζ
  16. 61.
  17. 62.
  18. 63.
  19. 64.

    Lorem Ipsum Dolor Lorem ipsum dolor sit amet consectetur adipiscing

    elit, mi nisl nulla id in purus pellentesque parturient, curabitur dui ornare tristique mollis euismod. Tempus sociis felis semper curabitur lorem enim volutpat habitasse quam eleifend, platea nulla penatibus tempor viverra dictum erat ad feugiat dignissim, mollis consectetur dapibus morbi primis eget tincidunt egestas mus. Aenean mauris rhoncus tincidunt euismod fames vestibulum commodo malesuada, platea per risus congue elementum lacinia et quis, vehicula fusce neque dolor tristique lorem penatibus. Aenean Fermentum Aenean fermentum dolor donec facilisi montes pretium, lacus elementum placerat iaculis consectetur euismod et, aptent id dui congue enim. Rutrum sociis integer tincidunt parturient augue massa nostra, blandit nunc porttitor lobortis eros libero commodo, felis molestie morbi venenatis sed elit. Tempus vehicula fames quis enim cum mauris, rutrum montes sagittis lorem lectus eget, malesuada imperdiet ligula diam condimentum.
  20. 67.

    Ͳ͜ͰੜΕ͔ͨͱΜͱݟ౰͕͔ͭ͵ɻԿͰ΋ബ҉ ͍͡Ί͡Ίͨ͠ॴͰχϟʔχϟʔٽ͍͍ͯͨࣄͩ ͚͸هԱ͍ͯ͠Δɻޗഐ͸͜͜Ͱ࢝Ίͯਓؒͱ͍ ͏΋ͷΛݟͨɻ͔͠΋͋ͱͰฉ͘ͱͦΕ͸ॻੜͱ ͍͏ਓؒதͰҰ൪ᘑѱͳछ଒Ͱ͋ͬͨͦ͏ͩɻ͜ͷॻੜͱ͍͏ͷ͸࣌ʑ զʑΛั͑ͯࣽͯ৯͏ͱ͍͏࿩Ͱ͋Δɻ͔ͦ͠͠ͷ౰࣌͸Կͱ͍͏ߟ΋ͳ ͔͔ͬͨΒผஈڪ͍͠ͱ΋ࢥΘͳ͔ͬͨɻͨͩ൴ͷঠʹࡌͤΒΕͯεʔͱ ্࣋ͪ͛ΒΕͨ࣌Կ͔ͩϑϫϑϫͨ͠ײ͕͋ͬͨ͡͹͔ΓͰ͋Δɻঠͷ্ Ͱগ͠མ͍ͪͭͯॻੜͷإΛݟͨͷ͕͍ΘΏΔਓؒͱ͍͏΋ͷͷݟ࢝Ͱ͋ Ζ͏ɻ͜ͷ࣌ົͳ΋ͷͩͱࢥͬͨײ͕͡ࠓͰ΋࢒͍ͬͯΔɻ

    ޗഐ͸ೣͰ͋Δɻ ໊લ͸·ͩແ͍ɻ Ͳ͜ͰੜΕ͔ͨͱΜͱݟ౰͕͔ͭ ͵ɻԿͰ΋ബ҉͍͡Ί͡Ίͨ͠ॴ Ͱχϟʔχϟʔٽ͍͍ͯͨࣄ͚ͩ ͸هԱ͍ͯ͠Δɻޗഐ͸͜͜Ͱ࢝ Ίͯਓؒͱ͍͏΋ͷΛݟͨɻ͔͠ ΋͋ͱͰฉ͘ͱͦΕ͸ॻੜͱ͍͏ ਓؒதͰҰ൪ᘑѱͳछ଒Ͱ͋ͬͨ ͦ͏ͩɻ͜ͷॻੜͱ͍͏ͷ͸࣌ʑ զʑΛั͑ͯࣽͯ৯͏ͱ͍͏࿩Ͱ ͋Δɻ͔ͦ͠͠ͷ౰࣌͸Կͱ͍͏ ߟ΋ͳ͔͔ͬͨΒผஈڪ͍͠ͱ΋ ࢥΘͳ͔ͬͨɻͨͩ൴ͷঠʹࡌͤ ΒΕͯεʔͱ্࣋ͪ͛ΒΕͨ࣌Կ ޗഐ͸ೣͰ͋Δɻ ໊લ͸·ͩແ͍ɻ
  21. 68.
  22. 69.