Skip to main content

Toss Product Sans

6F64BE.png

E0A8DC.png

BFDBF9.png

Usageโ€‹

@import url('https://static.toss.im/tps/main.css');
@import url('https://static.toss.im/tps/others.css');

* {
font-family: 'Toss Product Sans';
}
  • I figured it did not fully support Font Features.
  • Also, Toss Employee once told me not to use it ๐Ÿ˜”

์„œ์ฒด ๊ณ ๋ฏผ ์—†์ด ๋ณธ์งˆ์—๋งŒ ์ง‘์ค‘ํ•  ์ˆ˜ ์žˆ๋„๋กโ€‹

๊ฐœ์š”โ€‹

  • ํ™˜๊ฒฝ๋งˆ๋‹ค ๋‹ค๋ฅธ ์„œ์ฒด๋ฅผ ์“ฐ๋ฉด์„œ ๋น„ํšจ์œจ์ ์ธ ์ƒํ™ฉ ๋ฐœ์ƒ
  • ๊ฐ€๋…์„ฑ๊ณผ ์‚ฌ์šฉ์„ฑ์ด ๊ฐ€์žฅ ๋›ฐ์–ด๋‚œ ํ† ์Šค๋งŒ์˜ ๋ณธ๋ฌธ์šฉ ์„œ์ฒด๊ฐ€ ํ•„์š”
  • 2020๋…„ ์—ฌ๋ฆ„ ์‚ฐ๋Œ๊ณผ ํ•จ๊ป˜ ์„œ์ฒด ํ”„๋กœ์ ํŠธ๋ฅผ ์‹œ์ž‘
  • 7๊ฐœ์›” ๊ฐ„ 14๋ฒˆ์˜ ํ˜‘์˜ ๊ณผ์ •์„ ๊ฑฐ์ณ ํ† ์Šค ์ „์šฉ ์„œ์ฒด, ํ† ์Šค ํ”„๋กœ๋•ํŠธ ์‚ฐ์Šค ์ฒซ ๋ฒˆ์งธ ๋ฒ„์ „์„ ๊ฐœ๋ฐœ
  • ์ฒซ ๋ฒˆ์งธ ๋ฒ„์ „์€ 7๊ฐœ์˜ ๊ตต๊ธฐ(weight)๋กœ ๊ตฌ์„ฑ
  • ๊ทธ๋ฆฌ๊ณ  ๋‘ ๋ฒˆ์งธ ๋ฒ„์ „๋ถ€ํ„ฐ๋Š” ํฐํŠธ ๋””์ž์ธ ๋ฐ ๊ธฐ์ˆ  ์Šคํƒ€ํŠธ์—… ์ด๋„ํƒ€์ž…๊ณผ ๊ฐœ๋ฐœ

์ƒ์„ธโ€‹

  • ์„ธ ๊ฐ€์ง€์— ์ง‘์ค‘: ๊ท ํ˜•, ๋งฅ๋ฝ, ๊ทธ๋ฆฌ๊ณ  ํ˜•ํƒœ

๊ท ํ˜•โ€‹

  • ์ผ๋ฐ˜์ ์œผ๋กœ ๋ณธ๋ฌธ์šฉ ์„œ์ฒด์˜ ์ˆซ์ž์™€ ์˜๋ฌธ์€ ๊ตญ๋ฌธ๋ณด๋‹ค ์กฐ๊ธˆ ๋” ์ž‘์€ ํฌ๊ธฐ๋กœ ๋””์ž์ธ.
  • ๊ตญ๋ฌธ๊ณผ ๋™์ผํ•œ ๋‘๊ป˜๋กœ ๋งž์ถ”๋ฉด ์ˆซ์ž, ์˜๋ฌธ์ด ๋„ˆ๋ฌด ์–‡์•„ ๋ณด์—ฌ ์ˆซ์ž์™€ ์˜๋ฌธ์„ ๊ตญ๋ฌธ๋ณด๋‹ค ์กฐ๊ธˆ ๋” ๋‘๊ป๊ฒŒ ๋””์ž์ธ
  • ๋ชจ๋“  ๊ธฐํ˜ธ๋“ค์ด ์ค‘์•™์—, ๊ฐ™์€ ๋‘๊ป˜๋ผ๊ณ  ์ธ์ง€๋  ์ˆ˜ ์žˆ๋Š” ์ˆ˜์ค€์œผ๋กœ ๊ท ํ˜•์„ ๋งž์ถค. ๋„์–ด์“ฐ๊ธฐ ๊ฐ„๊ฒฉ๊นŒ์ง€

๋งฅ๋ฝโ€‹

  • ํผ์„ผํŠธ, ์‰ผํ‘œ, ๋”ํ•˜๊ธฐ, ๋นผ๊ธฐ, ํ™”์‚ดํ‘œ ๋“ฑ UI ์š”์†Œ๋กœ ํ™œ์šฉ๋˜๋Š” ๊ธฐํ˜ธ๋“ค์˜ ๊ฐ€๋…์„ฑ์„ ๋†’์—ฌ, ๋„“์€ ์—ฌ๋ฐฑ์œผ๋กœ ๋””์ž์ธํ–ˆ์ฃ . ๋˜ํ•œ ๋‹ค๋ฅธ ๊ธ€์ž์™€์˜ ๊ท ํ˜•๊ณผ ์ผ๊ด€์„ฑ์„ ๊ณ ๋ ค.
  • ๋ชจ๋“  ํ™”์‚ดํ‘œ, ์ˆ˜ํ•™ ๊ธฐํ˜ธ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์ผ๋ฐ˜์ ์œผ๋กœ ํ™œ์šฉํ•˜๋Š” ํŠน์ˆ˜๋ฌธ์ž๊นŒ์ง€ ์žฌํ•ด์„
  • ํ”„๋กœ๋•ํŠธ ์‚ฐ์Šค๋Š” ๊ฐ€๋ณ€ํญ๊ณผ ๊ณ ์ •ํญ ์ˆซ์ž๋ฅผ ๋งˆ๋ จ

ํ˜•ํƒœโ€‹

  • ์ผ๋ฐ˜ ์„œ์ฒด์— ๋น„ํ•ด ์˜๋ฌธ, ์ˆซ์ž, ๊ธฐํ˜ธ๊ฐ€ ํฌ๋‹ค ๋ณด๋‹ˆ ๊ธ€์ž๋“ค์˜ ์†๊ณต๊ฐ„์„ ๋„“ํžˆ๋ฉด์„œ ์ข€ ๋” ๋‘ฅ๊ธ€๊ณ  ์‹œ์›ํ•œ ์ธ์ƒ์„ ์คŒ. ํš์ด ์ค‘์ฒฉ๋˜๋Š” ๋ถ€๋ถ„์€ ๋ฐ–์œผ๋กœ ํŒŒ๋‚ด์„œ ์ข€ ๋” ๊ฐ€๋ฒผ์šด ์ธ์ƒ์„ ์ฃผ์—ˆ๊ณ ์š”.

๊ธฐํƒ€โ€‹

  • ๋””์ž์ธ ํ”Œ๋žซํผ ํŒ€๊ณผ ํ•จ๊ป˜ ์ œ์ž‘ํ•œ ๋งˆํฌ๋‹ค์šด ๊ทœ์น™์œผ๋กœ ํŠน์ˆ˜ ๋ฌธ์ž๋ฅผ ์“ธ ์ˆ˜ ์žˆ๋„๋ก
  • ํŠนํžˆ ์„œ์ฒด ํ…Œ์ŠคํŠธ๋ฅผ ํ”„๋ ˆ์ด๋จธ(Framer)์—์„œ ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ๋„ ํฐ ์žฅ์ 
  • ๋” ๋น ๋ฅธ ๋กœ๋”ฉ์„ ์œ„ํ•ด ์„œ๋ธŒ์…‹(subset) ํŒŒ์ผ๋„ ๋ณ„๋„๋กœ ์ œ์ž‘
  • ์•ˆ๋“œ๋กœ์ด๋“œ, iOS, ์œˆ๋„์šฐ, ํฌ๋กฌ, ์‚ฌํŒŒ๋ฆฌ ๋“ฑ ๋‹ค์–‘ํ•œ ํ™˜๊ฒฝ์—์„œ ์›ํ™œํ•˜๊ฒŒ ์ž‘๋™ํ•  ์ˆ˜ ์žˆ๋„๋ก ์ตœ์ ํ™”๋œ ๋ฒ„ํ‹ฐ์ปฌ ๋ฉ”ํŠธ๋ฆญ์Šค๋ฅผ ํ…Œ์ŠคํŠธ
  • ๋ฒ ํŠธ๋‚จ ๋ฌธ์ž์˜ ๊ตฌ์กฐ์ƒ ๋ฐœ์Œ ๊ตฌ๋ณ„ ๊ธฐํ˜ธ(diacritic) ์œ„์น˜๊ฐ€ ํ•œ๊ธ€์— ๋น„ํ•ด ๋งŽ์ด ๋†’์•„ ๊ธ€์ž์˜ ์–ด์„ผ๋”(ascender)๊ฐ€ ์˜ฌ๋ผ๊ฐ€ ์žˆ์Œ.
    • ์ƒ๋Œ€์ ์œผ๋กœ ํ•œ๊ธ€์ด ์ค‘์•™์— ์ •๋ ฌ๋˜์ง€ ์•Š๊ณ  ์•„๋ž˜๋กœ ์ณ์ ธ ๋ณด์ด๋Š” ๋ฌธ์ œ.
    • ๋””์„ผ๋”(descender)๋ฅผ ๋‚ฎ์ถฐ ์•„๋ž˜ ๊ณต๊ฐ„์„ ํ™•๋ณดํ•จ์œผ๋กœ์จ ํ•œ๊ธ€์ด ์ตœ๋Œ€ํ•œ ์‹œ๊ฐ์ ์œผ๋กœ ์ค‘์•™ ์ •๋ ฌ๋˜์–ด ๋˜์–ด ๋ณด์ด๋„๋ก ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ฃผ๋กœ ํ•œ๊ธ€์„ ์‚ฌ์šฉํ•˜๋Š” ํ™˜๊ฒฝ์„ ๊ณ ๋ คํ•œ ์„ ํƒ์ด์—ˆ์ฃ .
  • ๋ฐ˜๋ณต์  ๊ฐœ๋ฐœ