What is your normal method on styling print style sheets when it comes to font faces.
Traditionally serif fonts are better for printed media, but if the sans serif font is still clear and legible, would it be a better option for a print style sheet, if it made the print outs match the website more.
I usually use the same font as on the website. The only things I change are the font-color and background-color for light text on dark background. Using the same fonts the print out look more like your actual page and the line breaks will usually stay at the same position.
If you have a website like a blog or any page that has it's main focus on text, there is not argument against using serif fonts for the print out.
It depends on what you want the print out too look like.
If youre trying to make it look exactly like the screen version, then obviously you don't want to change anything.
If youre trying to make the printout as legible as possible without retaining the same look and feel as the screen, then it is a good idea to replace the fonts, adjust the colours, line and letter spacing, sizes etc.
Related
I have a chart in a dashboard I am creating.
I have been using the Calibri font (my bad).
The font in the chart looks different from the font in the tables and text boxes.
I added the textbox on top with the same font, weight and size to see the difference.
Is there someway to make them look the same? Arial doesn't look so blocky in a chart.
Or a way to determine which fonts render normally in a chart?
The reason this occurs is because that chart is being rendered as an image. The font choice and size impacts the differences between the image and the browsers interpretation of the chosen font. You might be able to adjust the weight and or make a bolder section to hide the difference. Sticking with true type fonts is usually a safe bet.
I'm trying to use the Oxygen font from Google Fonts in my website, but I'm having strange problems with it.
Firstly, it doesn't seem to want to render at certain sizes, like I can't make it 19px. It will do 18px or 20px, but not 19px.
I also notice that the heights of the letters are borked. Take a look at the attached pic, how the 'S' is out. That's a screengrab of the font at 19pt. However, everything is 18px tall except the 'S' which is the one thing that sticks out to 19px.
And at larger sizes to this, other letters start antialiasing oddly too.
Whether I try ems or pxs or pts, I'm getting these glitches.
If you go to Google Fonts and search for Oxygen at the left and type in some text at larger sizes, it does the same thing, strange S's, etc. But strangely, if you search for specimens of this font in Google Images, it seems to render and antialias much better than this (Oxygen specimens in Google Images). Any way to fix it or is this font broken at source?
I hate to tell you but the font is broken at the source. It was obviously made unprofessionally or designed to be exactly that way. I'd recommend just using a new font or dealing with it as a regular user wont exactly mind it. Maybe a web analyst would but it's a nice font to a normal user.
In my website, I want my header to use the 'Tw Cen MT Condensed Extra Bold' font. However, I am only able to create a font using 'Tw Cen MT Condensed' even with adding the bold effect, it does not look the same. I created the banner in photoshop and now I want to replicate the text in CSS.
Below is the link to my current code on Fiddle. Below that is an example of the text I want to create via Photoshop.
Also, is there a way so that I can include the same pattern from my background onto the text?
If all else fails, I could just upload the text itself as an image onto the website, but I would only do that as a last resort.
Thanks.
Link to Fiddle
Banner I want to create
Your going to need to find a web font version of that font for the best results, you can google for it or if the license for the font allows you to create one you can do that.
A good one is
http://www.fontsquirrel.com/tools/webfont-generator
And you'll have to include those files alongside your html and css to load it, otherwise someone who doesn't have the font won't be able to see it and the system will default to a different font.
Unfortunately, it won't work because the font is "non-standard"--as has already been explained.
To get the look you want, create the text banner you want in your image editor (Photoshop?) and save it as a ".png" image file, directing Photoshop to "keep transparency" (I'm using a different image editor, so the command wording will probably be different in Photoshop). To minimize file size, set the image frame bars as close to the font as you can (the more area a ".png" covers, the greater the file size--clear space included--and the size difference seems to increase exponentially [by square]).
All you'll have left to do is manipulate the position of the text banner in the div (float, padding, margin, etc.).
I know this is isn't the answer you want, but it works--and you don't have to worry about contingency code for different browsers, script blockers, etc. (you still have to code for the few who still block images and for accessibility standards, but IMHO it's more effective--and cleaner--than writing contingency code and having to allow for the variability between this font and the widest/narrowest contingency font in your designated family.
At least one part of your page will render the same in just about every browser.
I have some text on my website that I would like to make 'bold', and its font-size to be 'x-small'. But whenever I apply the font-size, the text loses its bold. When I remove the font-size, and the text goes back to default, it's bold again. What's going on here?
<span style="font-size:x-small; font-weight:bold;">TESTING</span
Have you tried other font families? If I remember correctly, Arial in small sizes looks the same in bold and normal weights. Give Verdana a shot.
the thing is that true type fonts DO render differently on various sizes.
If you have bitmap fonts, its just resampled to whatever size necessary.
TTF are based on vector graphics and can be scaled to any size needed.
However there are, depending on the font family, differences in how the font is rendered in different sizes.
Theese changes are intentionally and coded by in by the designer of the font.
Usually lines get thinner the smaller the font is rendered, this could cause the effect you are experiencing. You can try different fonts, but rest assuered that, unless you use certified standardized fonts, there is no guarantee of how they will be rendered.
Some font families will appear as normal when you shrink them.
Try using Type Tester to see exactly how your fonts look. It will use the web safe ones as well as what's on your machine if your using #font-face.
http://www.typetester.org/
I'm not talking about just to mke print css or media=print
Questions:
I am talking what other things we should do in XHTMl and screen css and print css (other
than disply:none in print css) we
should care to get good print from
website pages.
And do we need any special care for
images, background images in css,
flash, silverlight, iframe
How to save printer ink with print
css?
There are a couple helpful articles on A List Apart on this topic: Going to Print and Printing a Book with CSS: Boom!
Background images are not printed. It is possible, but the default setting in your browser is; don't print background images.
I make sure the images have a resolution of 150dpi. Then they are not to big for the screen and acceptable for paper. The GIF format does not store the dpi information in the file, but you can give it an acceptable size with CSS.
Smaller font need less ink.
From the XHTML point of view there's not much to do besides making sure the code is valid and semantic.
Now about the print css. You could consider that some people might print your page in black and white, or they might have very little color ink (and thus get fainter colors). So if you have any light colors, pastels or places where there's not a lot of contrast between the text and the background, make sure you bump up the contrast in the print style.
Try printing your page in black and white and see how it looks.
I'm not sure how plugins like flash and silverlight get printed, but you could add background images to them in your print.css so if they don't get printed at least you can get a snapshot of the flash instead of a white hole.
For images I'd suggest what Ton van Lankveld said. Make them 150dpi, and also make sure they look good on CMYK (you can do this in Photoshop by going to View > Proof Colors).
Check your fonts too. Some might need to be smaller, some bigger. If you have a lot of text you might want to consider using a more "print-based" font like Helvetica, or Times New Roman (Specially if you're using screen-based fonts like Verdana).
Finally to save ink I would remove anything that's not absolutely necessary (yup display:none). I'd stay away from background images in print.css for that same reason. I would set all hyperlinks to black (or the text color) with no underline, since there's no reason to have them in a printed page.
You could also save some ink by using #111 or #222 instead of #000 (but it might affect legibility).
The following technique actually uses more ink but is relevant to making a print version of a page.
Let's say that there is a page where the hyperlinks actually are very important to the content -- say, it's a listing of useful websites for topic xyz. Not sure why someone would print this out, but if they do, a bunch of underlined sentences isn't going to help much.
You can actually use CSS to print out the urls.
For posterity, the code is
a:link:after, a:visited:after { content:" [" attr(href) "] "; }
I'd recommend only doing it for selected links by using a class, something like
a.printable:link:after, a.printable:visited:after { content:" [" attr(href) "] "; }
I've always liked angled brackets for this purpose, so I'd probably rewrite it
a.printable:link:after, a.printable:visited:after { content:" <" attr(href) "> "; }
It's important to keep in mind that entities aren't allowed in the "content:" value in css. Basically you just put in the raw text that you want.
Also, for print you should probably use pt rather than px or em for sizing. You can make the size smaller than the screen equivalent. The default size is often set at 12 point but you can easily make it 11 point and still maintain plenty of readability. That will save a fair amount of ink (and paper!) in the long run.
With the possible exception of content-graphics (in other words, graphics which make up the meaningful content of the page, as opposed to graphics used for layout, beautification or eye candy), almost no non-text should make it to the page. Borders and backgrounds should be eliminated except in rare occasions (such as when attention must be drawn to a section of text, although simply setting it in bold would probably be just as effective, and again save ink). If you are using css to make fancy looking <hr>s, get rid of the styling altogether when printing and just use the built in styling, or replace all <hr>s with a plain black or gray line (and, again, use pt, as in 2pt, rather than px, to change the height).
I can't think of many situations where you'd have content in an iframe that you'd want to be printed. If that's the case, it may very well be worthwhile to make a printable version of the page that takes the content out of the iframe and directly into the document, making it far better for printing.
While I admit that this is not likely to be the most practical answer you receive, you might want to consider ecofont, a font designed especially for saving printer ink.
See comment.