Leading is set via the line-height CSS property, or more commonly applied in the font property shorthand like font: 1em/1.2em Helvetica, Arial, sans-serif. box-sizing: border-box; In general, you’ll find that improperly spaced text feels dense and impenetrable or airy and hard to scan, depending on whether the spacing is too narrow or too broad. background: #eee; Type takes on Metric Kerning as a default. In smaller amounts of text or single lines, tracking can be increased in greater amounts and can often help the font take on an entirely different design quality. Increasing the leading (which is measured in points, pt) will increase the line-spacing across your paragraph. line-height: 2; To adjust tracking, use the tracking field on the character palette. 0 0 0 1px #5b9dd9, If the font is well-designed, it will naturally create space as needed. For the below example, the leading of “of the” is being increased. In some cases you might have lines of text that are smaller or larger than the other lines of text. The character palette can be accessed in Photoshop in Window > Character. html { background: #f1f1f1; Typographer Ilene Strizver recommends approaching kerning in this way: two straight letters need the most space; a straight and around need slightly less to look equivalent, and two round letters need slightly less than that. padding: 0; It doesn’t have to measure that, of course, which is what leads to disagreements between different typefaces on what a specific font size means. 'Special' lighting Therefore, thin letters like l take up comparatively too much space in the text, making it hard to read fluidly, especially in longer text blocks. a:hover, -webkit-box-shadow: 0 0 3px rgba(0, 115, 170, 0.8); } For an example of a font with poor kerning by design, look at monospace fonts like Courier New. It’s nominally a measure of the height of the character. A negative value subtracts from the default letter spacing. For display text, which makes up headlines, titles, and section headings, you may need finer control. background: #fafafa; } font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; This ensures a perfect display in large sizes, with pixel-perfect balance and organization. If you’ve seen some of Bigstock’s inspiring posters, you might be interested in learning some typography principles yourself. white-space: nowrap; The space between letters is just as important for legibility as the text itself. box-shadow: 0 0 3px rgba(0, 115, 170, 0.8); This is typically measured in the same units as the text size is denominated. clear: both; The spacing can be denominated in different unit from the font size, but it typically makes sense to match them. And, if you’re new to Bigstock, why not sign up for our 7-day Free Trial? .button:focus { box-shadow: 0 1px 0 #ccc; The distance between the baselines must be as large as or larger than the type in order to prevent overlapping lines. Setting the leading to Auto will apply InDesign’s default leading for the font size you currently have applied. box-shadow: } font-size: 14px ; margin: 25px 0 20px; Short and Sweet plus examples! #error-page .wp-die-message { Try this kerning game. border-radius: 3px; You might also be interested in the following posts: Filed Under: CSS, Design, Typography Tagged With: css, fonts, line spacing, typography, Modern Handwritten Fonts for Fresh Design Trends, The Art Of Mixing Typefaces – Google Fonts Edition [INFOGRAPHIC], Adding Customization Options to Your User Interface. 2. Letter width is a measurement of how wide the individual letters are, based on a percentage. Also, avoid stretched and compressed fonts, instead adjust the leading, kerning, and tracking. Ultra-Thick Diamond Glitter Business Cards, Die-Cut Business Postcards (Standard Shapes), Die-Cut Business Hangtags (Standard Shapes), Up to 50% Discounts to our Services and Apps. padding-bottom: 7px; Some fonts include robust kern-pair specifications. The goal of kerning is for the type to look optically correct. Reducing the leading from 120% creates a denser element while risking collisions of. When working with a paragraph, or just more than one line of type, leading is the distance between the baselines in the paragraph. color: #0073aa; The lead would create more or less space between lines of text, decreasing the words per inch. The computer, through the font, takes care of it all. Kerning can be manually adjusted in the kerning field in the character palette while the cursor is between two letters. Without a minimum of sufficient space between words, lines, and letters, text becomes impossible to read. If a selection of type is changed to Optical Kerning, photoshop (or whichever program is being used) will adjust the kerning automatically. margin: 0; line-height: 2.15384615; For text heavy projects, serifs are often terrible for video. .button.button-large { Text written on top of text is the most extreme consequence of improperly set leading and kerning, but most text display engines must be explicitly told to make that mistake. } For a quick shortcut, hold down the option key and press the up/down arrow keys while the actual text is selected. Leading. These fonts are purposefully designed so that each letter occupies exactly the same space as the next. Not every font manages height the same way. Kerning. In hand typesetting, leading is the thin strips of lead that were inserted between lines of type in the composing stick to increase the vertical distance between them. So, if you set letter-spacing: 0.2em, you’re adding 0.2em to the existing spacing between letters. box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); Image via BMCC. Kerning between individual letters can’t be easily adjusted in CSS, at least not without creating a class for every pair of letters. WordPress › Error A baseline is the imaginary guideline that type sits on. display: inline-block; The letter-spacing CSS property allows for adjustment of the space between letters on a wholesale basis. border-color: #999; A serif is the small projection that extends off the main strokes of a character. .button:focus { } Leading is the distance between individual lines. One helpful way to look at kerning is imagining that each space between kerning pairs is filled with liquid, and the same amount of liquid should put poured into each space. Kerning is an adjustment of space between two specific letters. -webkit-box-shadow: font-family: Consolas, Monaco, monospace; border: 1px solid #ccc; margin-top: 50px; The standard porportion of leading to type size is typically 120%. This tutorial will cover leading, kerning, tracking, and when and how to apply them. 0 0 2px 1px rgba(30, 140, 190, 0.8); These typography principles of leading, kerning, and tracking can be applied to Bigstock’s lettering images. It helps to visualize this (check out the example below). Display text should have liberal spacing, while body text should be closer and easier to follow from one word to the next. 1. For example, take letter joining, performed by the text as needed. Click to share on Twitter (Opens in new window), Click to share on Facebook (Opens in new window), Click to share on LinkedIn (Opens in new window), Click to share on Pinterest (Opens in new window), 8 HOLIDAY IMAGES TO GIVE YOUR BIZ A BOOST, UNLUCKY SEVEN: SCARY IMAGES FOR HALLOWEEN, 4 Tips to Help You Decide What Fonts to Use in Your Marketing, 4 Reasons Your Retail Business Needs a Facebook Presence, 7 Facebook Tips You Should Already Be Doing, 6 Invoice Elements That Will Get You Paid. Reducing the leading from 120% creates a denser element while risking collisions of ascenders and descenders (see the “Eye of the Tiger” above). Text size or font size is a measure of how much space the text takes up. Optical kerning adjusts the spacing between adjacent characters based on their shapes. .button:hover, We’ve put them in practice In the example below using some tiger-ish letter images. Every font is different.3. vertical-align: top; cursor: pointer; #error-page { Check out some more of Bigstock’s lettering images in this lightbox. However, the two words are used interchangeably, even by designers that might know better. #error-page p, padding: 0 12px 2px; Leading is the vertical spacing between lines of type. border-color: #5b9dd9; -webkit-box-shadow: 0 1px 0 #ccc; Manual Kerning – One helpful way to look at kerning is imagining that each space between kerning pairs is filled with liquid, and the same amount of liquid should put poured into each space. For a shortcut, select the text you would like to track, and hold down the option key and press the left/right arrow keys. font-size: 14px; Whether in pixels, ems, rems, percentages, or points, leading measures the distance from baseline to baseline. border-bottom: 1px solid #dadada; 04. The goal of kerning is for the type to look optically correct. A g might have less space on the right than an h or n, for example, and an l will be thinner than an x. To adjust the leading in Photoshop, use the leading field in the character palette while the type layer is selected. We briefly explained what kerning does to our words, now it’s time to go to the next important term: Leading. However, when a font includes only minimal built‑in kerning or none at all, or if you use two different typefaces or sizes in one or more words on a line, you may want to use the optical kerning option. $ Take care of leading and tracking before kerning _ Tracking is the overall spacing between groups of letters. But the faster and more commonly-used way is to use the shortcut by placing the cursor in the space you would like to kern, then hold down the option key while pressing the left/right arrow keys. When designing layouts and setting type, it is important to understand the basics of working with text, line spacing, and letter spacing. In typography, leading (/ ˈ l ɛ d ɪ ŋ / LED-ing) is the space between adjacent lines of type; the exact definition varies.. It’s the amount of breathing room between stacked lines of texts. Positive values expand the spacing, while negative values decrease it. } Bigstock Blog - Small Business and Design Tips. This can be adjusted bluntly with font-stretch, though it’s not very appealing visually. Try turning your type upside down and kerning it. Instead, we adjust tracking, which controls the space between letters as a whole. 0 0 2px 1px rgba(30, 140, 190, 0.8); The baseline is the imaginary line upon which the bottoms of most letters (and the bowls of letters with descenders, like g, p, and q,) rest. } OK, so we know this is a deliberate, ironic example of bad kerning, but this design still does what it says on the tin and drives us to distraction. The goal of kerning is to create a consistent rhythm of space within a group of letters and to create an appearance of even spacing between letters. Use a trial section of the website to compare various spacings, not just at the letter scale, but across the whole page. } padding: 1em 2em; } It’s also managed by the typeface itself, which includes hinting and rules for displaying text. Sometimes kerning can be missed because your eyes tend focus on the whole word or sentence. Text Size/Font Size. ul li { A positive value adds that to whatever the default letter spacing is. For the below example, the leading of “of the” is being increased. margin: 2em auto; a:focus { 0 0 0 1px #5b9dd9, If design terminology confuses you, get the skinny on the difference between leading, kerning, and tracking right here. In that case it is used more subtly and sometimes to fill space. In blocks of text or paragraph, tracking is usually only increased by a small amount, because the legibility can become difficult. Start with the most difficult pairings, like capital/lowercase pairings, diagonal letters and round letters.2. The goal of kerning is to create a consistent rhythm of space within a group of letters and to create an appearance of even spacing between letters. There has been a critical error on your website. background: #f7f7f7; As leading increases, lines of type become more independent graphic elements rather than parts of a paragraph.