Recently I have been playing around with the anchor tags' css of the page http://nate.fm/articles/ If you assign border around the link Light or Pro-Life vs Pro-Birth and change their font-weight to more than 500 then suddenly the vertical alignment changes from middle to top. Below I have added images showing this:
Font Weight 700:
Font Weight 500:
More to the surprise, this bug disappears for any other font family than Crimson Text. I tried to replicate the bug on local but failed.
Could anyone shed some light over this bug?
Since you mentioned it only happens with Crimson Text, it's probably just the way that font renders when bold. A similar question was asked here: Bold text line-height is higher than normal text line-height
I played around with disabling all the other styles on the page, to see if maybe something was overriding it, but couldn't find any culprits.
A possible work around might just be adding some padding-top.
Related
I am using two different fonts in my website - "sans-serif" and "tradeGothicLTStd". Here is how these fonts are rendered in the browser.
You can notice that in the first screenshot there is some extra space above the font (If you see the uppercase text. Please open it in a new tab with black background to properly see the difference) and while using another font there is no extra space above the font (uppercase text).
Here is how they are rendered when used in a button.
Because of these inconsistencies the fonts go out of position vertically. i.e if I design my css with first font in mind the all uppercase fonts are centered vertically (inside a button or anchor tag etc) but when I change the font to the second font all text kind of moves little upwards since there is no extra space above the font in this case. Because of this my font is not perfectly vertically aligned in the center.
Is there any way to fix this or can someone even tell me why this is happening?
On your second picture the font also appears to be stretched.
You can scale the font with transform: scale(1, 0.9);. This will scale the font vertically on 90%.
Then, I would use line-height
I'm doing a website, and I'm having some trouble with icon alignment. I have researched everywhere for a solution, and one has not been forthcoming.
Essentially, every time I use an icon and make it smaller than the main text (say, 14px), the icon is forced down by a couple of pixels, and if I keep it the same size, it isn't forced down, but instead extends downwards. This can be corrected with position: relative; top: [pixels]px;, but that feels dirty. I have tried vertical align baseline and middle, and I've tried some other things too.
Here's an example with the icon made smaller than the text:
And here is an example with the icon the same size as the text.
The problem is minor, but the icon should be aligned alongside the text. It would seem a lot of people have this problem, but no solution has worked for me.
What is the solution? Should I consider images instead of icon fonts? Or SVG, perhaps? I suffered the same problem when I attempted to use SVG icons instead.
Previously, I blamed the font. Now, with further work, it appears the font is partially to blame - odd sizes of font throw things off and require tweaks to get elements to line up. So, there's always the option of tweaking the font itself.
If the font still isn't working, or if you can't edit the font, a <span> with position: relative;top: -1px (or any other px/em/rem value, until it looks right) does the trick. But this isn't very cross-browser friendly - in Firefox, this got things looking right, and the same in IE and Edge. But in Chrome, everything was off by 0.5-1px.
Bizarrely, the CSS reset doesn't seem to fix that.
Odd problem which makes me suspect I'm missing something simple. Any ideas on the following:
I have a H1 tag with a sans-serif font (loaded from Google fonts) and if I give it a background-color you can see the text isn't aligning to the left of the containing tag:
If I add a serif font you can see taht it does behave how I need it to, the text is up against the left hand side. When I turn it on/off in dev tools it is simply adding/removing the serifs:
There are no styles applied to the H1 other than a font-weight. Tried resetting my margins but to no avail.
I can set a nagtive margin but that won't work for all resolutions.
It's in the font glyph itself, so no way to circumvent it easily via CSS unless you edit the font itself. See the following screenshots.
Serif:
Sans-serif:
Tool for reference: http://nodebox.github.io/opentype.js/glyph-inspector.html
The kerning will be off. It occupies a set width, irrespective of whether the letter is at the edge. Free fonts are known for it. The best way to combat this is to use a different font.
I imported a font in my CSS file with font-face and used it in my navigation menu.
The problem is that the letters are cropped at the bottom and it kinda ruins the font.
See for yourself: dev.windbournecitizen.com/frontpage
It should look like this (with the changed text of course)
The font looks normal when you zoom in (with CTRL+Scroll) but not when you are not zommed in.
Is there any way to fix this?
The problem is encountered on Chrome 35 and Firefox 30 running on Windows 7
I managed to fix it.
By adding a stroke to the text it is possible to make the letters a bit bigger and the bottom of each letters is showing (almost) correctly. There are no more gaps.
I used this code to fix it:
-webkit-text-stroke-width: 0.5px;
-webkit-text-stroke-color: #fe9f00;
It can also be (kinda) fixed using text-shadow. It can be used as an alternative for browser who do not support -webkit-text-stroke
In Google Chrome(34.0.1847.131), possibly other browsers too, we're having an odd rendering issue with a web font using MyFonts.
As shown in the screenshots below there is a pixel at the top of the text which is loading the default/previous colour.
When hovered the top pixel line is white (the normal state colour), when inactive the top pixel line is the default text (non-anchor) colour.
This happens on all parts of the site where using the font and only occurs when using the webfont.
I've tried adjusting text rendering modes and line heights, neither fixed the problem.
The font-size is set to 100% (on all elements) and this inherits 16px from the body element, interestingly changing this to 18px resolves the rendering problem.
Have tried with other standard fonts, not with another webfont yet. The font files, I believe, are loaded directly not remotely.
SOLUTION
Changed the anchor from display: inline; to display: inline-block; as the anchor wasn't fitting the text correctly.
Thanks
It's hard to say without looking at an actual example, but I think you might be experiencing this problem. The font metrics allow the font to run outside its container, and a bug in Chrome prevents these parts from recieving the hover color.
Try setting a background color on the element to see if there are any pixels actually running out of the element. To fix it, you'd need to make the element really wrap the text (by giving it a top padding, for example.)