Principle app letter spacing manual#

Check your line spacing when you change font or font size.В Different fonts have different maximum heights (x-heights) even when theyвЂ™re the same size in points.

If you want to play with less line space, stick to pull quotes and similar shorter text areas.

Experiment with tighter spacing on pull quotes or other short texts.В If typography is mostly about how we present language in text form for optimal readability, itвЂ™s also partly about beautiful avant-garde design.

This is because smaller fonts are already more difficult to read, and need more space around them for the eye to easily follow.

Small fonts need more spacing.В Line spacing as a % should actually increase with smaller font sizes.

In apps for bigger displays likeВ TVs, you will need to go to about 32pt.

Font size should be minimum 16pt.В This long-standing rule of thumb still applies.

If you must use longer lines, increase the line spacing to help protect readability.

Limit line length to 70-80 characters.В Longer lines of text can confuse the eye, particularly when reading text on a screen.

Any smaller and the text will be cramped and difficult to read.

Aim for about 140%-180% for optimal readability and accessibility.

The problems tend to kick in around 250%, as the readerвЂ™s eye might find it more difficult to pass to the next line without getting confused. Less serious is having too much line space. Setting spacing much below 100% will render it completely unreadable. This makes for poor readability and atrocious accessibility. Setting line spacing at 100% means that letters on adjacent lines can touch, because thereвЂ™s no additional space between the lines. Most serious is having too little space between the lines. There are two main risks when it comes to line spacing: too little, and too much.

You should experiment to see what looks best with your text. In fact, anything from about 120% up to 200% is acceptable, but 140% tends to be the most quoted sweet spot. Conventional wisdom is that line spacing of 130%-150% is ideal for readability. Line spacing is commonly measured as a percentage of font size. The importance of line spacing for UX design comes from the power it has to render a block of text more or less readable. Leading, line spacing, and line height all refer to the same thing. Some modern design applications like Photoshop still use the term leading, while in HTML and CSS, the attribute is called line-height. So itвЂ™s thanks to typewriters that double-spacing lives on today in the age of the computer.

And because double-spaced lines leave more room for comments and notes, double-spacing caught on in academic, legal, and industrial contexts where text can be pretty heavy.

The only way of increasing line spacing on a typewriter was to add an extra carriage return after and insert a whole empty line, doubling the line spacing. Because they had fixed line-height (usually 12pt per line), typewriters were mechanically incapable of offering line space options. When typewriters appeared later, line spacing went through a process of standardization. So itвЂ™s вЂleadingвЂ™ to rhyme with вЂbeddingвЂ™, rather than вЂbeadingвЂ™. Its technical name, leading, actually refers to thin strips of lead metal which were used to separate the lines of text.

Principle app letter spacing manual#

Line spacing theory dates back to the earliest days of manual typesetting on printing presses.