Tag Info

Hot answers tagged

15

Robert Bringhurst's Elements of Typographic Style is a thorough and wonderful reference for things like this. It's long but very valuable. A lot of designers recommend a standard grid of lines so that a line+padding will always fit within, say, 16 pixels. So anything less than that would have a line height of 16, everything above that would have line height ...


11

Short answer: "No." Long answer: There are four factors involved in deciding the leading (nowadays meaning the distance from one baseline to the next, also called line height): the x-height of the characters, the measure (length of the line), the weight of the strokes of the characters themselves and the size of the type. In this answer, for simplicity, ...


9

The very short answer is "No." Oldstyle figures ("lowercase") are specifically drawn that way. Legacy Postscript and TrueType fonts, for the most part, contain only tabular figures, which are lining or oldstyle according to the way the font is designed. The Unicode Consortium isn't suggesting that lining figures can be distorted into oldstyle figures, ...


4

The correct way to render lowercase digits/numbers or "Oldstyle figures" is to use CSS to select a suitable font feature. Obviously, the used font should then support this font feature in the first place. Real world support with webfonts does not seem to be too strong. The CSS setting you are looking for is font-feature-settings: "onum"; and the ...


4

In illustrator do this (see footnotes for InDesign changes): Draw a line with the line tool Select the line and right click on it and choose Transform → Move... In the vertical slot type how much you ant each line separated. Then hit Copy. Hit ctrl + D† to make a third line (with equal spacing). Color the strokes and apply dashing in the ...


3

Let's say you want a 2 pixel line and a 4 pixel gap. Create a new image that is 1 pixel wide by 6 pixels in height, transparent background. Take the pencil tool and set it to 1 pixel, this should be a square Zoom in with Ctrl+Plus / Cmd+Plus until the grid appears Pencil the very top with two 1 pixel points You should now have 2 solid pixels followed by 4 ...


3

1.2 ems is standard accepted for best readability. Often it gets to be a bit bigger on websites. http://kingdesk.com/articles/optimal-line-height/ longer lines of text can benefit from more spacing as well (easier to find the next line as you're reading)


3

The initial value of line-height depends on the font (and on the browser), but if you have set line-height on body, that value will be inherited (unless inner elements have their own settings for it). However, line-height does not dictate the height of inline element boxes. The CSS 2.1 spec says about inline, non-replaced elements (like a elements): “The ...


3

The line-height property will not change the size of your font. line-height is essentially drawn behind the type and if smaller than the font size it will have no effect on the actual type. Setting a smaller line-height actually works to change the height, but it doesn't change the font-size. You can set an overflow property to hide portions of text, but ...


2

Yes you are correct line height changes according to font-face. SEE Edit Below On block level elements, the line-height CSS property specifies the minimal height of line boxes within the element. https://developer.mozilla.org/en-US/docs/Web/CSS/line-height The operative phrase is "minimal height" Depending on the browser and typeface used, ...


2

This may depend on what you're trying to create. If you're looking to have text next to an icon–You may consider using list items with the icons as custom bullets. This would center the image automatically with the text no matter the font size. In this example you can edit the line height by adjusting the margin-bottom of each 'li' element. There are many ...


1

line-height in CSS was not designed by a typographer. It's not really related to the print world. What line height specifies is the 'minimum height of the row inline objects will fit in to. It's not directly related to font size. For example, if you set your line-height to 24px, it simply means that each row will be a minimum of 24px height. Whether you ...



Only top voted, non community-wiki answers of a minimum length are eligible