Facebook Instagram 社群圖片文字大小範例 The samples of font sizes of making images on social media websites

Facebook Instagram 社群圖片文字大小範例 The samples of font sizes of making images on social media websites

做社群網站圖片時,拿不定怎樣的文字大小可以在裝置上看起來最舒服嗎?
Can’t you decide what sizes of fonts to be more readable on every device while creating images for social media websites?
 
以下範例圖片以常用的尺寸 1080*1080 製作,以 20px ~ 60px 字型大小,再分別列出常用字體代表類別(圓體、明體、粗體等)
The example images below were made of common sizes 1080 x 1080, the font sizes are 20px ~ 60px, and list common font styles as categories.
 
使用方式:
Tutorial:

  1. 直接看這篇文,判斷要用多大的字體。
    See this article to decide what the sizes of the fonts should you use.
  2. 直接將圖片另傳上你的測試帳號,查看在手機上、動態牆上、IG 牆上呈現的樣子。
    Save these pictures directly to your test account, to see what it looks like on phones, post walls and the Instagram wall.

文字大小也與線上製圖軟體 Canva 相同。
The font sizes are the same as the online designing software – Canva.

License: CC BY-SA 4.0
授權方式:只要標示原作者 (Vsy),允許商業使用、改作、隨意轉貼 (你要重傳到別的地方也都OK,只要圖片或文章有寫是 Vsy 原製作就可以喔)。簡單說就是只要標了我的名字,要怎麼用都可以。

解決 Google 網頁字型思源黑體 Noto Sans TC 跑版問題

解決 Google 網頁字型思源黑體 Noto Sans TC 跑版問題

在手機解析度下,版面會呈現這樣

看了一下CSS,沒找到什麼可疑的兇手,把 Noto Sans TC 字體關掉之後就恢復了
但我就是要用 web font 啊

把原本的 font-family:'Noto Sans TC', Arial,sans-serif;
加入第一個內建指定字型
font-family: Arial,'Noto Sans TC', Arial,sans-serif;

這樣就搞定收工囉!