I'm using <em> to make part of an #font-face styled <h1> italicized. The problem I'm having is that it's too italicized.
I'm using the font Impact, which, to my knowledge, does not have an italic version. In Photoshop, the text is only partially slanted using the slanted text option in the charter panel. With <em> on the site, though, it's extremely slanted. Is there any way to adjust this with CSS? Or does anyone have a truly italic version of Impact I can use?
If using Impact is, for whatever reason, absolutely mandatory, you can mimic italics using CSS3.
http://www.w3schools.com/css3/tryit.asp?filename=trycss3_transform_skew
However, this isn't supported in a lot of older browsers (and some newer ones) so I'd be hesitant. Considering you want to change how Impact actually wants, you probably just want a different font, but that still requires CSS3 to load properly, unless you intend to generate some images on the server side for your headers, which I hugely don't recommend.
http://www.w3schools.com/css3/css3_fonts.asp
My recommendation? Just use the CSS3 skew on the <em> tag. In worst case scenario, a browser doesn't support it, and it's slightly too italicized. That's not a big deal. In best case scenario, your site looks great! If the original italics are wayyyyy too much for you, I would remove them on the <em> tag, and just do my solution anyway. That way, if CSS3 isn't supported, you still get a nice, Impact header.
The Impact font does not have an italic version. So what you get by asking some software to italicize it is just the upright version or some mechanically (algorithmically) slanted distortion of it. The algorithm is up to the software but does not produce italic. So just don’t do it.
Related
I want to specify two different fonts in a font-family (font-family:A, B;) but the sizes of these two fonts are different.
It seems font-size-adjust onlys work in Firefox. So how can I adjust second font size if the first one is not available?
You cannot. The conclusion is that you should list only fonts that are sufficiently similar in their properties.
Well, there are some tricks used to detect the availability of a font on the basis of its properties. You could use font A (only) for an invisible inline test element containing some text and then compare, using JavaScript, the width of the test element with its measured width (allowing some small difference, since different implementations of font A may yield slightly different widths). If the widths don’t match, you would change the font size setting for the element(s) that have font-family: A, B, so that the size is suitable for B. Well, you would still have the problem that font B might not be available either. So it would be messy, with no real guarantee of success.
You are right, font-size-adjust isn't standard, and is hence won't work.
I think that the best way to solve your problem isn't to try and work around two completely different font sizes, but to select two fonts that are sufficiently similar as so the sizing is consistent.
Preferably, I would use Web Fonts (Also, http://www.google.com/fonts is a good place to start), so ensure that everyone gets the same experience, and you can load consistent, beautiful fonts across browsers and platforms. If the performance hit is a problem, then consider using reliable font stacks.
I understand that this isn't a strict answer to your question, but it may be a better way to go. :)
My client (who is obsessed with pixel perfection) dislikes the way browsers render font-face fonts.
At the moment I am using font-squirrel to convert OTF fonts to webfonts.
The problem is, I don't see any alternatives. I could create a PNG file holding all these texts, but that doesn't sound like a browser-user-friendly solution.
The typical example of a design I have to work on is:
What would be your approach?
I'm assuming that by "dislikes the way browsers render #font-face" your'e referring to the blink which happens. If not, you should elaborate.
The top one is web-font and the bottom one is screengrab from PSD. Both using same font family, same spacing. The client wants to look it more like the bottom one.
I'm assuming that by "dislikes the way browsers render #font-face" your'e referring to the blink which happens. If not, you should elaborate.
Currently there's only 3 options to remove that blink. The first two are obvious solutions - use images, or use web safe fonts. These, obviously, defeat the purpose.
The third option is to embed base64 code for the fonts in your CSS. This increases the size (kb) of your CSS files, but it will completely eliminate the blink which tends to occur because the font is loaded with the CSS so there's no blink when a secondary file is loaded.
usage for including bas64 fonts looks like this:
#font-face {
font-family: "FontName";
src: url("data:font/opentype;base64,[ the base64 code here ]");
}
There are a few online bas64 converters that you can feed a .otf file to and they'll spit out the base64 code. Here's one such converter.
An approach that I have used is to create background images to represent all display-text, and then use CSS to "hide" the actual text, and show only the image. For the sake of accessibility, the text should not be hidden using display:none or display:hidden though. Instead, use a large negative text indent to move the text off the left side of the display, or put it in a nested, absolutely-positioned element somewhere outside of the display area.
I usually use the negative indentation for all text not contained in a clickable element, and the nested, absolutely positioned element technique for anything that is contained in a clickable element (so the active element outline does not expand off the left side as can happen in some browsers).
Another common and popular way of handling this is automatic font replacement (using JavaScript). This solution is friendly to users of screen readers, because the HTML contains plain text and the replacement is done using JavaScript, in the browser.
An example of this is technique is sIFR, which is open source and uses Flash as the replacement.
It looks like it has been bolded. Try setting font-weight to normal.
Is it normal that fonts I used to create site layout are pixelated? I use Georgia, and in photoshop I've smooth lines everything looks great. But when I tried to slice it up and code the css, Georgia font same size looks noticeably uglier!
What are your thoughts?
p.s. I use em to declare sizes in css.
That's because photoshop is using anti-alias technique on text.
Both OS and browser will impact the appearance of text in web page.For example, Mac OS has anti-alias text on all system UI. For windows, I believe they have an option called 'ClearType', once switched on all system UI will have smooth texts.
All fonts on the web will look a little pixellated unless you're on a Mac which renders type considerably better than PC.
The best way I have found to replicate how a font will look on the web is to set the Anitialiasing in Photoshop to 'sharp'.
It is conceivable that there will be CSS markup in the future that will allow antialiasing in the browser rather than OS based.
It is a common problem.
See this article
http://jontangerine.com/log/2007/10/smoothing-out-the-creases-in-web-fonts
The alternative is to use something like Cufon that generates images for your text. Best practice would be to only use it for headings.
http://cufon.shoqolate.com/generate/
I've found this too - each browser renders fonts differently. I often find fonts look much better in IE. Sometimes I opt to use images created in PS to get that smooth look, but for the most part I think people are used to how fonts are rendered in their browser of choice.
In photoshop, there's an option to "smooth" text.
See this image. Bottom right corner.
Remove this anti-alising to have a better view (but not exact) of how the font will look in browser.
i've actually never encounter this problem before. I usually start designing my layout in photoshop then transfer it to my page.
Somehow, lately i've been using georgia font alot, and i love it when the style is italic, but what comes out in photoshop does not reflect back in the webpage when i set it in css.
in the pic above, 1. is what i saw in photoshop and what i wanted, but 2. is what i got, no matter what i try changing, be it font-weight or font-size it remains as bold. I want it thinner, is there a way? I tried font-stretch too btw.
It's not the bold, it is a system font smoothing.
You are able to change (or disable as in your case) font smoothing in Photoshop, but you can't do it with CSS, unless you are using CSS3 and compatible browser.
Added: I wouldn't recommend you to even try to change the font smoothing. That's the user right - to have fonts rendered the way she likes.
I'm working on a site that uses images diagonally aligned. The images are fairly simple and have some text inside so I can achieve the effect using either images or the CSS3 transform: rotate and border-radius properties, granted, with all the proprietary extensions.
However I'm wondering if there are significant advantages for using one over the other. I'm thinking maybe the CSS-only alternative would load faster, but a downside would be the use of more code for each image. Although using images I'd still have to do a lot of positioning for each element. Also, the CSS in the first case would not validate using browser-specific extensions, how important is this if I still make sure the site is correctly displayed in most browsers?
Is there a general approach for using either one of these options? What would you recommend?
The use of CSS3, versus images, is best answered by your need to support Internet Explorer (or other older, or CSS3-unaware, browsers): if a large portion of your user-base browses with IE then you should use images.
If you're only interested in the later, more standards-compliant, browsers (possibly including IE9, but I've no experience with it as yet) then CSS 3 is likely the better option, since it might involve a larger CSS file, but it does allow you to switch your layout more easily in future, without having to create/recreate a new set of images for the new design.
You could, of course, combine both approaches: use CSS 3 for the compliant browsers, but include an IE-specific stylesheet, with conditional comments, to supply the images as, perhaps, background-images to build up the design. This is, of course, likely to be a lot of work, though.
I would honestly recommend an image for this. CSS3 is cool, but browsers that don't support it might break your layout. Also (possibly more importantly), text really needs proper anti-aliasing to be readable when rotated or scaled, and you can get finer control over that with an image.
Two things I think you should consider here:
Images are a killer for those on mobile devices. So if you are targeting those with mobile or expect a large mobile audience, you may want to reconsider using a lot of images (and having your users pay a ton in bandwidth).
The text in your images (if you use images) will not be searchable by search engines and will not be accessible for those with accessibility issues, unless you are good at filling in your alt tags. ;-)