When line-height in CSS is set to 1, my font vertically centered to lower letters.
When select letter
But I need center it to capitalized letters
Here is how it made in Roboto font
How to proper make it with Font Forge? I tried Element -> Transfomations and it works, but is it right way?
I have not experimented with how metrics change the appearance of selection highlighting within browsers -- and it's not entirely clear from your question what you're trying to achieve. But here's my advice for setting up metrics, which should be a good place to begin understanding your precise issue: http://benwhitmore.altervista.org/line-spacing-getting-right/
This may be possible by messing with the values in Element > Font Info > OS/2 > Metrics - by default I think Is Offset is checked, but if you uncheck that, you can manually set each of the ascent/descent values. Each of the settings has hover text that explains what they do, but short of understanding those (I'm not entirely sure I do), experimenting might be the easiest way to figure things out.
I had spent all morning looking for a tutorial for this. Here is a YT video that might help. I've figured that it's the ratio between the ascent and descent values that matters. In my case, the descent was 800 while the ascent was 2533 which was causing my font to be shifted more towards the top. When I reduced the descent to 600 and increased the ascent to 2733 (keeping the total same) with the instruction shared in the video, the font became much more centered visually.
Related
I got a really weird thing going on.
On my currently developing website the background positioning of social and e-mail buttons differ a lot between my mac from other computers.
This is how it looks on my screen on resolution 1600 x 1000 (I also checked on other so it's probably not the case)
(source: mikolajgrzyb.com)
The Question is: Why does it happen and how can i fix this problem (to display correctly on every computer)?
You're mixing em with px when you position the backgrounds in the CSS, which is probably the reason why it looks different.
.bluebtn {
background: url("../images/icons.svg") no-repeat scroll 0 -2.7em transparent;
}
You should use em for font-sizing only.
Check some of these links out for an explanation for when to use what:
em, px, pt, cm, in…
Why em instead of px?
em should be used when you want to define something relative to the size of characters in the current font. Unless you have overridden
font style (using px units for example), this will be affected by the
choice of fonts in the user's browser or OS if they have made one, so
it does not make sense to use em as a general unit of length except
where you specifically want it to scale as the font size scales.
Helpful suggestions
Preload the images. The first time hovering over your buttons makes it lag.
The lists on your right are annoying. Consider a more user friendly approach where it doesn't scroll back up after you mouse out, use the click-to-open click-to-close approach. The approach you're using now makes it difficult to navigate between the list items.
It also seems to get stuck at times.
Consider using a different color than blue for text that aren't links. It can be confusing to the average users who are used to blue text for links.
You misspelled processing, responsive, cutting, preparing and layout.
I should always be capitalized.
what are cons to use relative values em and % for fonts, What is rounding problem? and how to avoid/solve rounding problem. Is there any calculator?
How to use relative values as easy as we use px
There are not a lot of cons using em or %.
Sometimes i had trouble to make fonts look exactly the same size in IE and the normal browsers. But most of the time i have to do a IE CSS anyway so its not really a problem.
When you define fonts in PX, the fonts are not antialiased on some computers running windows. If you use EM or % they are and you have a very precise control of the font size. (1.249em for example).
Unlike #scunliffe i would always use EM as font-size. Even when you have fixed design withs. Sometimes its not possible to do a pixelperfect design with PX fonts, because fonts rendered by Photoshop looks different then in the browser.
I have made a test tool to show the differences:
http://bluesys.ch/csstest/
and here you can find a tool to convert your PX values in to EM:
http://pxtoem.com/
I may be preaching to the choir here, but I find the Firefox "Web Developer" addon is a real help when I'm dealing with font sizing.
https://addons.mozilla.org/en-US/firefox/addon/60/
Use 'Information' > 'Display element information' to view the exact pixel size for your (relatively sized) element. Tweaking the CSS (to within 1 decimal point) until the amount returned is a round number minimises the chances of your text being different sizes in different browsers / operating systems.
Oh, and from my current project:
Standard (appearing as 12px) font set on site wrapper is 75% (body is 100%) , then use:
14px: 116.7%
16px: 133.3%
18px: 150%
18px: 166.7%
There are loads of reasons to not use fixed text sizes (accessibility being the big one), and once you've spent a while getting your CSS sorted you'll never look back.
Here's a nice little trick for you.
In the your CSS, set the font-size on the BODY of the document to 62.5%.
Now, whenever you want to set a font-size, you use EM values. 1.1em would be equivelant to 11px and 1.2em to 12px and so on.
That's how I work anyhow.
Good luck.
Michael.
I don't believe there are (m)any cons. Using px limits your ability to scale text in IE6 but otherwise using % or em should allow you to scale nicely.
The only con I can think of is that if you want your text to be exactly 12pt, or 13px then using % or em isn't what you want. However If you are trying to create a fixed width design where everything is measured out to the pixel I would advise against it. The Web is a free-flowing canvas... each user has a different sized window, personal font/zoom size choice and Operating System differences. Your content should look good on any screen by adapting to the real-estate you are provided with.
em vs px is like a holy war. Everyone has their own ideas on what's best. Using px is perfectly fine, the only real problem is that text will not resize in IE6.
One other issue is how much you will change your mind about the general font size. If you do everything in absolute values (px, pt), then decide the font size across the site is too small, then you might have to change a lot of values to make everything bigger. Conversely, if you do everything in relative values (em, %) then you want to change the size of one thing only, it will affect all its child elements.
In the end, the best choice is to simply be consistent.
I remember reading a style guide explaining what the proper line-height should be for each element. I can't find it on google.
I would appreciate it if anyone could link me to such a guide, or perhaps explain it in an answer.
Thanks!
Edit: SORRY, please let me clarify. I'm not asking about how to use CSS to set line-heights, but what the recommended line-heights are for various elements. eg headers, paragraph text, etc.
Thanks!
Maybe these references are more like what you're looking for. I haven't found a definitive rule, but at least here are some things to consider.
This one suggests that it depends on your choice of font-family:
http://www.webteacher.ws/2009/09/30/improve-readability-with-line-height/
This one suggests that it depends on the width of the lines:
http://kingdesk.com/articles/optimal-line-height/
This reference essentially agrees with both of those:
http://www.wpdesigner.com/2007/06/21/web-typography-line-spacing/
The main rules seem to be (1) wider lines of text require greater line-heights, and (2) greater line-height is required based on font if the height of lower-case letters is a high percentage of the height of upper-case letters.
The best approach is probably just to eyeball it, and try to avoid impenetrable walls of text.
The info here is pretty basic, but useful.
To summarize:
The default line-height:normal gives line-height:1.2, 120% of the font size. If you're going to change it, it's still usually best to use a number with no units, e.g., lineheight:1.5 (150% the font size), because then the line-height for an element will be computed from that element's font size, even if the line height was inherited from an element with different font size.
If you instead say line-height:10em, it's computed from the font on the element where the line-height was specified . . . that may be wrong if this line-height is inherited by an element with a different font size.
Likewise a specific number of pixels such as line-height:10px could certainly be wrong if it's inherited by elements with different font size.
It's usually 120% (of the font size).
W3 schools recommends (here) a line height of 1.6, though I've seen that between 1.2 and 1.45 is good as well
Normal line-height value is normal. You can edit that with numbers like 1.6 2 etc
I have an < mx:Label > tag that has a set width, which is usually large enough to display the text it needs to show. Every once in a while though the text is a little too long and gets chopped off and "..." gets appended. Instead of this happening I would like to decrease the font-size just low enough to show the whole text.
Does anyone know of a nice way to do that?
Thanks
Fonts are a complicated beast. For a given text, you can find the string length and calculate the maximum allowable font-size very simply using the following approximate formula:
var max_allowable_size:int = yourLabel.width / yourLabel.text.length;
This could lead to serious issues for some fonts, namely:
Remember not all fonts are equal i.e. they cannot all be resized gracefully.
Anti-aliasing may break
Fonts may not look good/text may become illegible
The above naive formula will probably break when applied to non-roman characters
Also, this is an inefficient way.
I would rather suggest that you define two different styles, one regular and another fallback one with font-size set to the smallest, which you switch to when you encounter longer label texts. You can calculate the threshold limit to switch by using the default font-size on the above mentioned formula. Of course, some experimentation is in order, if you have to support localization/multiple languages.
Finally, always embed the fonts if you are going to use anything other than the most common fonts.
There is a measureText function. Check out:
http://frankieloscavio.blogspot.com/2008/01/flex-use-measuretexttxt-to-calculate.html
http://livedocs.adobe.com/flex/3/langref/mx/core/UITextFormat.html#measureText()
You can probably use measureText and decrease the font size till it fits.
This question already has answers here:
What is the difference between px, em and ex?
(4 answers)
Closed 1 year ago.
When setting the size of fonts in CSS, should I be using a percent value (%) or em? Can you explain the advantage?
There's a really good article on web typography on A List Apart.
Their conclusion:
Sizing text and line-height in ems,
with a percentage specified on the
body (and an optional caveat for
Safari 2), was shown to provide
accurate, resizable text across all
browsers in common use today. This is
a technique you can put in your kit
bag and use as a best practice for
sizing text in CSS that satisfies both
designers and readers.
Both adjust the font-size relative to what it was. 1.5em is the same as 150%. The only advantage seems to be readability, choose whichever you are most comfortable with.
From http://archivist.incutio.com/viewlist/css-discuss/1408
%: Some browsers doesn't handle
percent for font-size but interprets
150% as 150px. (Some NN4 versions,
for instance.) IE also has problems
with percent on nested elements. It
seems IE uses percent relative to
viewport instead of relative to
parent element. Yet another problem
(though correct according to the W3C
specs), in Moz/Ns6, you can't use
percent relative to elements with no
specified height/width.
em: Sometimes browsers use the wrong
reference size, but of the relative
units it's the one with least
problems. You might find it
interpreted as px sometimes though.
pt: Differs greatly between
resolutions, and should not be used
for display. It's quite safe for
print use though.
px: The only reliable absolute unit on
screen. It might be wrongly
interpreted in print though, as one
point usually consist of several
pixels, and thus everything becomes
ridiculously small.
The real difference comes apparent when you use it not for font-sizes. Setting a padding of 1em is not the same as 100%. em is always relative to the font-size. But % might be relative to font-size, width, height and probably some other things I don't know about.
Given that (nearly?) all browsers now resize the page as a whole, rather than just the text, previous issues with px vs. % vs. ems in terms of accessible font resizing are rather moot.
So, the answer is that it probably doesn't matter. Use whatever works for you.
% is nice because it allows for relative resizing.
px is nice because it's fairly easy to manage expectations when using it.
em can be useful when also used for layout elements as it can allow for proportional sizing related to the text size.
As Galwegian mentions, px is the most reliable for web typography, as everything else you do on the page is mostly laid out in reference to a computer monitor. The problem with absolute sizes is that some browsers (IE) won't scale pixel-value elements on a web-page, so when you try to zoom in/out, everything adjusts except for those elements.
I do not know whether IE8 handles this properly, but all other browser vendors handle pixels just fine and it is still a minority case where a user needs to enlarge/diminish text (this text box on SO perhaps being the exception). If you want to get really dirty, you could always add a javascript function for making your text size larger and offer a "small"/"larger" button to the user.
Regarding the difference between the css units % and em.
As far as I understand (at least theoretically/conceptually, but possibly not how these two units might be implemented in browsers) these two units are equivalent, i.e. if you multiply your em value with 100 and then replace em with % it should be the same thing ?
If there actually is some real difference between em and % then can someone explain it (or provide a link to an explanation) ?
(I wanted to add this comment of mine where it would belong, i.e. indented just below the answer by "Liam, answered Sep 25 '08 at 11:21" since I also want to know why his answer was downvoted, but I could not figure out how to put my comment there and therefore had to write this "thread global" reply)
Yahoo User Interface library (http://developer.yahoo.com/yui/) has a nice set of base css classes used to "reset" the browser specific settings so that the basis for displaying the site is same for all (supported) browsers.
With YUI one is supposed to use percentages.