{"id":247,"date":"2016-12-23T15:02:07","date_gmt":"2016-12-23T15:02:07","guid":{"rendered":"http:\/\/www.simon-li.com\/design-and-code\/?p=247"},"modified":"2020-06-30T15:10:21","modified_gmt":"2020-06-30T15:10:21","slug":"3-things-youll-need-to-do-when-using-a-large-font-size","status":"publish","type":"post","link":"http:\/\/www.simon-li.com\/design-and-code\/3-things-youll-need-to-do-when-using-a-large-font-size\/","title":{"rendered":"3 Things You\u2019ll Need to Do When Using a Large Font\u00a0Size"},"content":{"rendered":"

We are used to working with small font sizes. Body text of most documents falls somewhere between 9pt to 14pt. Small font sizes have also dominated the web for a long time. Not until recent years did web designers try to use more and more bigger and bolder texts (36px+). Large font sizes are intended to stand out and draw attention, and working with them is slightly different from working with small body text. There are adjustments to be made in order for the big text to make our design bold and attractive. Today I\u2019d like to talk about 3 things that you will need to do if you are using a large font size.<\/p>\n

<\/p>\n

1. Decrease the\u00a0Leading<\/h4>\n

Leading is the empty space between successive lines. In most creative software tools, leading is adjusted by changing the line height, which is represented as a proportion of the current font size. For example, in Word and InDesign, 1.2 is the default line height.
\nWhen you increase the size of your text, line height and leading will grow as well. In body text, line height can be as big as 2 because the text is small. However, the white space between lines has an ideal range, and this range will not change no matter how big or small your text is. If font size is big, the leading generated by a 1.5 or 1.6 line height could easily exceed the ideal range and make the text too airy. Decreasing the leading not only tightens the big text, making it comfortable to read, but also adds power to it.<\/p>\n

\"\"
While 1.5 is a very comfortable line height for body text, it is apparently too large for headings. Here, the font size is\u00a036pt.<\/figcaption><\/figure>\n
\"\"
When we reduce the line height from 1.5 to 1.0, the heading becomes much more comfortable to read.<\/figcaption><\/figure>\n

Line height between 1.0\u20131.1 usually works pretty well in big titles or headings. Next time you are working on your PowerPoint or Keynote presentation, remember to decrease the leading for the big text.<\/p>\n

2. Kern the\u00a0Letters<\/h4>\n

The spaces or gaps between different combinations of two English characters do not always look even because of the different shapes of the characters and the large number of possible combinations. In small text, these uneven spaces are not very noticeable, but when font size is big, like in a sign or in a logo, they become apparent and we will need to kern the characters to make them even. There is a fun online kerning game<\/a> you can play with to train your eyes and your kerning skills.<\/p>\n

\"\"
Top: the gaps between \u201cW\u201d and \u201cA\u201d, and \u201cA\u201d and \u201cV\u201d look a bit too wide in this example. Middle: we kern them to bring them closer together. Bottom: the result after\u00a0kerning.<\/figcaption><\/figure>\n

3. Pick a Display\u00a0Typeface<\/h4>\n

A big heading is a big statement. Try not using typefaces that are designed just for body text, because they do not to draw attention to themselves. They are humble and serve the purpose of an information transmitter. They work best when applied to a large block of text but not big headings.<\/p>\n

\"\"<\/p>\n

\"\"
Use a display typeface to grab people\u2019s attention if the font size is big. Compare the heading on the top which uses Times New Roman and the heading on the bottom which uses Playfair\u00a0Display.<\/figcaption><\/figure>\n

Words in titles or headings can be the hook of an article or the basic idea of a section. You want those words to stand out, and display typefaces can help you. A display typeface usually has certain characteristics that make it work well in big sizes. For example, Playfair Display<\/em> in Google Fonts has an extra large x-height and short descenders, making it perfect to be used along with small leadings which we mentioned previously. Its ball terminals and strong contrast of strokes also make it special, full of \u201cpersonalities\u201d and draw attention.<\/p>\n

\"\"
Playfair Display has an extra large x-height, short descenders, ball terminals and strong contrast of strokes. It is designed to be used in titles and headings.<\/figcaption><\/figure>\n

Final Thoughts<\/h3>\n

Big texts are intended to communicate important or powerful messages. When you are working with big font sizes, use the three techniques above to create stunning titles or headings and entice your readers.<\/p>\n

Did you like this article? If yes, share it with your friends. You can also follow me on Twitter<\/a>.<\/p>\n

Survey<\/h3>\n

What are your struggles related to typography? Answer this short survey<\/a> and let me know. It will help me create the best content related to typography for you.<\/p>\n","protected":false},"excerpt":{"rendered":"

We are used to working with small font sizes. Body text of most documents falls somewhere between 9pt to 14pt. Small font sizes have also dominated the web for a long time. Not until recent years did web designers try to use more and more bigger and bolder texts (36px+)….<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[87],"tags":[15,13],"class_list":["post-247","post","type-post","status-publish","format-standard","hentry","category-visual-design","tag-design","tag-typography"],"_links":{"self":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts\/247","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/comments?post=247"}],"version-history":[{"count":10,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts\/247\/revisions"}],"predecessor-version":[{"id":473,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts\/247\/revisions\/473"}],"wp:attachment":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/media?parent=247"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/categories?post=247"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/tags?post=247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}