It is very common issue with font-face, e.g.
font: 20px/20px 'ITC Avant Garde Gothic Std'; font-style: 'book'; letter-spacing: 1px; text-transform: uppercase;
The problem is that I'd expect text vertically centered. However, it is not. Is there a way to offset the line-height base line? Without actually changing the line-height.
The phenomenon depends on the font. It is up to the font designer to decide how the font uses its height. For example in Arial, when set solid, uppercase basic Latin letters are vertically centered, whereas in Verdana, they appear a bit lower (i.e., a little more space above than below).
You can fine-tune this by using relative positioning, but you then need extra markup, e.g.
<div><span>text</span></div>
with CSS for the span setting, say,
position: relative;
top: 2px;
This may cause nasty effects if the font used in the user’s browser is different from your expectations.
I did not consider the possible effect of font-style: 'book', as I have no idea of what it might mean. No CSS resource I know mentions anything like that (the font-style values are unquoted keywords and do not inlcude book).
Related
I was wondering if someone could point me in the right direction. I am looking to display the Google Font Orbitron at consistent weights at every given font size. Sounds pretty easy, right? Not in my scenario. At certain font-sizes, some characters have multiple weights within the same character.
Note: I am testing this in Windows 7, Chrome v27
The Code:
<link href='http://fonts.googleapis.com/css?family=Orbitron:400,500,700,900' rel='stylesheet' type='text/css'>
.sixteen{
font-family: Orbitron;
font-weight: 400;
font-size: 16px;
line-height: 22px;
}
.nineteen{
font-family: Orbitron;
font-weight: 400;
font-size: 19px;
line-height: 22px;
}
<h4 class="sixteen">Home of Front End Developer and</h4>
<h4 class="nineteen">Home of Front End Developer and</h4>
Here is a fiddle to explain my issue. If you take a look at the fiddle, you'll see in the first line that the top line of the uppercase F, E, and D characters have more weight/thickness than the rest of the characters in that line. But as you'll notice on the next line, that
In case you cannot replicate what I'm seeing, here's a screenshot:
My question is two-fold:
What would the best way to technically describe this? 'Multiple font weights in one given character' lacks brevity, and isn't likely to have any valuable Google results.
Is there a way to fix this and make the weight consistent in every character at every font-size?
What you describe is as such just variation of the visible width of strokes in glyphs, or stroke width variation to put it briefly. Such variation is normal in serif fonts and also appears, at least to some extent, in many sans-serif fonts. However, in this case, the font is designed to have a rather constant stroke width, so the visible effect is caused by font rendering differences.
There is no way to remove the font rendering differences. Font rendering is a complex issue, and although some proposed or experimental CSS settings might affect some aspects of it, it’s basically outside your control. For example, font smoothing (also known as anti-aliasing) depends on the operating system and its settings as well as the browser and its settings.
I've found this issue with a bunch of fonts used online when you go down to a certain size. It's the way the font is being anti-aliased.
You can see the same issue from Google showing off that font: http://www.google.com/fonts/specimen/Orbitron
I must have went through every page of google but haven't found the solution yet. I have a custom font that I'm using through css font-face. The font adds extra padding on the bottom depending on the browser and OS that I am using. The picture below shows an example with mac being on the left and windows on the right. It looks correct on the right (in windows) and i want it to be the same on mac.
#font-face
{
font-family: universLight;
src: url('http://www.viggi.com/fonts/UniversLTStd-Light.otf');
font-weight: normal;
font-style: normal;
}
#button{
font-family: universLight;
border: 1px solid black;
background: #ccc;
}
The code is located at http://jsfiddle.net/ZDh5h/
Here is what I already know won't work from my research.
line-height adds padding to the top and bottom so the extra padding on the bottom remains.
using different extensions such as .otf or .ttf also doesn't work. Just produces the same results
changing the font-size also doesn't really do anything
I use this font a lot through out the site and don't really want to add different CSS sheets for mac vs windows. If anyone knows anyway to fix this without having javascript add extra padding I will be very grateful.
Thank you.
See http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height
normal
Tells user agents to set the used value to a "reasonable" value
based on the font of the element. The value has the same meaning as
. We recommend a used value for 'normal' between 1.0 to 1.2.
The computed value is 'normal'.
I think the behaviour you observe comes from different "reasonable" values across browser as normal is the default line-height value.
So specify your value (say line-height: 1.5em;) to get rid of the differences.
On MS Word we have a text feature called "Small Capitals". It turns all letters uppercase, but the lowercase letters turn smaller then uppercased. I need to know if it is possible in CSS.
Example:
Original: Hello World
Small Capitals: HELLO WORLD
Notes: SO Markdown does not support CSS font-size style in tags nether small, so I show as a hack. Well, the strong letters is bigger than normal letter in small capitals.
Is it possible in CSS? How I can do that?
It’s called “small capitals” or “small caps” in English. In typography, small capitals are separately designed (by font author) versions of letters. They have the shapes of capital letters, but their height is usually just a litter larger than the x-height (the height of the lowercase letter “x”) of the font. They may be implemented in a small caps font, but more often, they are glyph variants inside font.
In MS Word up to and including Word 2007, as well as in CSS implementations for font-variant: small-caps, the “small capitals” are really just reduced-size capital letters. (Word 2010 gives access to OpenType features and real small caps.) This typically means that their stroke widths are too small, and to avoid this effect from getting all too bad, the font size reduction is rather modest, so the fake “small caps” are not that much smaller than normal capitals.
For such reasons, “small caps” are mostly best avoided on web pages.
However, there is ongoing work in giving access to OpenType features in CSS. Currently, support exists in the form of browser-prefixed versions of the font-feature-settings property as proposed in CSS3 Fonts. Example:
<style>
body {
font-family: Calibri, sans-serif;
}
.sc {
-moz-font-feature-settings: 'smcp';
-webkit-font-feature-settings: 'smcp';
-ms-font-feature-settings: 'smcp';
font-feature-settings: 'smcp';
}
</style>
<div class=sc>Hello world</div>
<div><span style="font-variant: small-caps">Hello world</span>
(fake small caps)</div>
This works on supporting browsers (Chrome, Firefox, IE 10), provided that the font has small capitals (e.g., Calibri, Cambria, Candara, Constantia, Corbel, Palatino Linotype).
yes, you can do it with font-variant. I think you mean "capitalized"
<span style="font-variant:small-caps;">Hello World</span>
I think you are talking about small caps, So try:
font-variant: small-caps;
Usually by "small caps" it's intended a style where all capital letters are preserved as they are and lowercase letters are rendered in uppercase using as a smaller variant of the font.
Using text-transform: uppercase; will convert all letters to uppercase, but will not achieve the effect of rendering them with a smaller font.
https://www.w3schools.com/cssref/pr_text_text-transform.php
Using font-variant: small-caps; will achieve the result described above, i.e. render all lowercase letters to uppercase using a smaller font size (which, as mentioned by #jukka-k-korpela) is usually done via dedicate glyphs within the font itself.
https://www.w3schools.com/cssref/pr_font_font-variant.php
There's also font-variant-caps: all-small-caps; which forces the small-caps effect on all letters (lowercase and uppercase alike). This might be useful in some edge cases, e.g. in older styling conventions where 'A.D.' and 'B.C.' would be rendered with smaller letters, i.e. combining the effects of text-transform: uppercase; and font-variant: small-caps;.
https://www.w3schools.com/cssref/css3_pr_font-variant-caps.php
Image below displays the result for:
div.test { background: #00F; font-size: 50px; line-height: 50px; color: #FFF; margin: 50px 0; font-family: Wiesbaden; }
One using Wiesbaden (which is font-face) and the other without.font-face font seem to ignore the line-height property.
Is it font-face issue or the font?
The property line-height only specifies the vertical distance between the start of one line and the start of the next. If you typed out something that took up two lines, the start of the 2nd line should be in the same vertical position using either font.
It seems like that's just how your font looks at 'font-size: 50px'. If you wanted to, you could increase the font-size while keeping line-height: 50px to correct it.
In short, it's not an issue with either. They're behaving exactly how they should be. See your blue background? That's your line-height. Line-height doesn't affect the font itself, but rather the spacing of the lines of the text.
Some fonts are different sizes even when set to the same font-size. It's the way the glyphs are rendered. If you want your text larger, increase the font size. If you want fallbacks to be the same size, you can use similarly-sized fonts (look up "font stack generators" for help on this), or check out the CSS3 font-size-adjust property (do note that it is CSS3, so you'll want to double-check support of it).
I had a similar issue, but I used a Cufon script instead of fontface to avoid browsers issues. To solve my line-height issue I changed the doctype from transitional to strict. Try that.
The following fiddle illustrates the differences between 4 fonts (3 being very common fonts found on Macs, PCs, etc). One is a Google-font. Regardless, 4 fonts - four different results. If a design is going to rely heavily on a 'non-standard' font, be sure the fallbacks don't blow the whole thing up.
Pay particular attention to the differences in:
the top spacing between the capital Q and its parent's border
the various heights of the Xx (especially, the lower-case vs capital)
descender of the lower-case G (some actually come out of their
parent)
_http://jsfiddle.net/suK2U/
I tried this and it works perfectly!! just play with percentage until you find the needed result.
Apply this on your #font-face:
ascent-override: 90%;
Hope it helps!
More info:
https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face/ascent-override
Check out the following screenshot:
http://www.jesserosenfield.com/beta/descenders.png
My problem is that descending (like the "7" in the screenshot) numbers are vertically aligned with the bottom of the span, while other numbers are vertically aligned more towards the middle. Is there a way to "equalize" the vertical alignment of all numbers, regardless of ascender / descender?
Thanks!
The code:
<div class="postDate">
<span class="postDay"><?php the_time('j'); ?></span><br/>
<span class="postMonth"><?php the_time('M'); ?></span>
</div> <!-- postDate -->
and CSS
.postDate {
width: 99px;
height: 74px;
position: relative;
left: -30px;
font-family: Georgia, "times new roman", times, serif;
background: url(images/dateFlag.png) no-repeat;
text-align: center;
color: #ffffcc;
padding-top: 9px;
}
.postDay {font-size: 42px; border: 1px solid red;}
.postMonth {font-size: 17px; text-transform: uppercase}
Use a different font. Arial puts all the bottoms of its numbers on the same baseline. So does Microsoft Sans Serif. So does Trebuchet. So, for that matter, does Times New Roman.
The fact is, numbers have different ascenders and descenders depending on the typeface. What typographers do is center the "body" of the number based on what they believe looks good, then go up or down from there. Usually that variation is on serif faces, but not always. You can't control it, in any case. BTW, the 3, 4, 5, 7 and 9 are the ones that usually have the descenders and the 6 and 8 usually have the ascenders.
I'm not sure if it would work, but one of the things I would try:
It looks like you have a php function to output the day and month. Instead of just outputting the number why not try wrapping it in a span that positions/styles each number appropriately.
Rough sketch of CSS & PHP:
.georgiaFixNum7 {
position: relative;
top: 5px;
font-size: 18px;
}
echo '<span class="georgiaFixNum' . $num . '">' . $num . '</span>';
I understand the need for a pure css/html solution with the fonts, but if you are really desperate you could try using seperate images to display the numbers. Your php function would need to work in a similar way.
echo '<img src="/img/' . $num . '.png" />';
Again, just some things I would try out, not certain if they'd work.
Georgia has old-style figures. If you really need lining figures, you should check if there is an OpenType version of Georgia that has this option.
That said, I don't see the problem in using old-style figures in the context you show; no need to have everything align everywhere all the time :)
Just set up spacing so that there is reasonable space above and below.
All you can control is the vertical alignment of the text baseline within its parent. However, you can't control the specific font position of the various characters outlines with regards to the text baseline.
As #Robusto said, one solution is to change the font you are using, so that all numbers end at the baseline. Georgia is particularly bad for numbers, because some numbers (36 or 84 for example) look weird due to one of the digits having ascender and the other having a descender. (Not that you'll have to worry about 36th of May of course :-))
Another solution is to stay with Georgia font, but to increase the vertical padding so that the descenders on 3, 4, 5, 7 and 9 are not as prominent. In your case adding 4-5px below and above the number ought to do it. Of course, that would increase the overall size of the date flag, which might not be desired.
The alternative to increasing the vertical padding that much would be to tweak down the font size couple of pixels, which would make the ascenders and descenders less prominent. This one works only if the user's browser zoom is set at 100% and regular DPI. If the zoom is at 120% or the user uses high DPI, the font visual size is increased and the ascenders/descenders are more prominent.
You might want to consider simply using numbers from a more commonly available similar font. Times New Roman, for example, isn't too different, and mixing the numerals from Times with those of Georgia doesn't look too bad.
Here's an example:
The problem here has to do with proportional vs tabular figures.
You can prevent this behavior by using the CSS font-feature-settings rule with the tnum property:
p {
-webkit-font-feature-settings: 'tnum';
-moz-font-feature-settings: 'tnum';
-ms-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
}