Suitable font for the web

I am creating a comp for my website and I am using Ai. The default font was myriad pro. I was wondering if that would be read correctly online or will the font get substituted. If its not a good selection what would work, I think the font is close to being an Arial Narrow? Thanks! Dan

dvollmer57 wrote:
I am creating a comp for my website and I am using Ai.
As far as web fonts go, I have always thought that a principle of "near enough is good enough" but I have read some designers who seem to turn themselves inside out to get their typography just so. I understand that web fonts are dependent on the fonts installed on the users own machine and that although this has gotten more predictable over the years, it still isn't predicatble enough. You can use font stacks in your CSS so that you give a series of options or fallbacks in case your preferred font is not available and usually, these end up with "serif" or "sans-serif" or less so, "monospace."
I'm guessing that if you are using illy to comp your site, you might have a print background? If so, I think that you need to see the web as a slippery creature in comparison to print media. At times, the flexiblity of the web is unbearable. Screen sizes change, browsers are different between flavour and version, you have mobile and desktop, different platforms and OS and on top of all that, some bright spark thought it a good idea to give users some choices over how their browsers behave (text size, for one). Who'd have thought it?
These days, we can be quite creative with choice of fonts because of the @fontface thing. I have used some whacky fonts on a couple of sites but only very sparingly.
HTH
Martin
http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/
http://www.google.com/webfonts#ChoosePlace:select

Similar Messages

HT2509 Hello I wonder if anyone knows how to find, download and install a suitable IPA (phonetics) font for the Mac Air? I need to be able to use a pop up window of fonts.

Hello I wonder if anyone knows how to find, download and install a suitable IPA (phonetics) font for the MacBook Air? I need to be able to use a pop up window of fonts.

Unless you've done anything to change it, Google keeps every email that ever passes through their server in your All Mail folder/mailbox/label. Even if you delete stuff, they hold onto it, there. You have to go out of your way to actually delete anything permanently.

Save for the web jagged fonts nightmare

Hi
Can't export anti-aliased smooth fonts using save for the web. The fonts are jagged.
How can save for the web the same smooth quality that I see on the screen?
Using Illustrator CS6 on Mac OS X 10.8.3
Thanks.

What is the size of the art and are you enlargening it in the browser using CSS or manually adjusting the size?
In both cases I am using save for web. In the first instance I am exporting at 100% size, 200% size in the next instance. If you are resizing in CSS/manually, export from Illy at the desired size.
Mike

Why can't font graphics for the web be created with sophisticated "hinting" in Photoshop?

It seems when a font is generated as a web graphic -- either a GIF or a high quality JPEG -- it never looks as clean as live fonts in HTML? I've been researching fonts a bit, and apparently they come with built-in "hinting" that makes them appear better on screen. But if you set the same type in Photoshop or Illustrator and export for the web, it's blurrier and never as good. Is there a way around that?

http://en.wikipedia.org/wiki/Subpixel_rendering

I've just bought a Macbook Pro 15" and I'm trying to use Photoshop, but the resolution its displaying the images at for 100% are too small. I have to design for the web, so need to be intricate with detail, but I'm finding it adjusts the resolution of the

I've just bought a Macbook Pro 15" and I'm trying to use Photoshop, but the resolution its displaying the images at for 100% are too small. I have to design for the web, so need to be intricate with detail, but I'm finding it adjusts the resolution of the image right down. (I mean you can see the image clearly, but it's too small to edit). When I look at Safari and see a web page at 100% it's clear, but the same page displayed in Photoshop CC appears 50% of the size (even though it says it's 100%) If I move the application window to another screen it adjusts it correctly – leaving all the pallettes, menus and tools correctly sized as they are on the retina display Is there some way to adjust the way Photoshop CC displays images so it is more consistent with what you actually see? There doesn't seem to be any answer on the Adobe forum, so hopefully someone here can shed some light. MacBook Pro with Retina display, 15", OS X Yosemite (10.10.2), Photoshop CC 2014

I tested both ways. With "open in low resolution" ckecked the size of the images is cool, but it is low-resolution including Photoshop appearance.
If "open in low resolution" is unckecked the appearance is good but the very small size.
See the image below. It has 650 x 732 px, 72 dpi. The font of the text "Neste aniversário ..." is with 18pt.

Save for the web seq

I need to save for the web an animation of about 100 frames. The problem is the only way to do that seems to be saving the file as a gif but I need to keep them frame by frame. I was wondering if there is a way to save for the web the entire sequence and keep it as a jpg or png.
Tx

Simply render the animation to whatever format you find suitable using File --> Render Video, then convert the result using batch processing.
Mylenium

How to create clean text for the web in Photoshop/Illustrator

I am puzzled to death on how in the world to get clean text for the web in Photoshop/Illustrator, particularly white text. I want my text to turn out exactly like the text at this website: thepainteddoor.org
If you scroll down to the bottom of that page, notice the titles "Featured Media", "Social Networking", and "Contact Information". They are all .gif images. I have tried to replicate what these images look like for about 3 hours now to no avail. Can anyone tell me how to do this? It just looks like a simple outline or drop shadow, but I can't get it to show up like that. If someone could help me replicate that effect with text (aka make it show up clean as an image), I would graciously give them money through PayPal*.
* = I will only give cash if it will replicate it exactly (and I mean exactly)..and it won't be too much..I'm a poor college student. :-P
Thanks in advance!
Thomas

You would do it the way I created it:
Select the Text tool in Photoshop and set the font and parameters as I have listed. Then enter whatever text you like. It will be rendered over the top of the lower layers you may have in the document. Save as an image of the appropriate type and you're there.
Note that "lower layers you may have in the document" could conceivably be none at all (i.e., you render the text over a transparent document). You could imagine saving that as a .png with transparency and get light text in an image that could then be put over the top of anything else. The alpha mixing will see to it that the edges smoothly blend with the background. I haven't actually tried this (I usually do try my own suggestions) because of lack of time right now.
-Noel
Edit: Markerline and I seem to be on the same crystal-controlled wavelength.

Is Hoefler Text safe for the web?

I notice that Hoefler Text is the default font for the Highlighter theme. Yet it does not appear in the web-safe fonts list.
Should I change all my pages from Hoefler Text to a font on the list?
Will I run into problems by leaving them as Hoefler?

Keith Raygor wrote:
I notice that Hoefler Text is the default font for the Highlighter theme. Yet it does not appear in the web-safe fonts list.
I started with Hoefler and ran into trouble with the way my text looked in Windows, particularly with IE. So, after some experimentation, I changed to Verdana.
Phil

Clip for the web

Hi. A client has asked us to create a clip suitable for the web for a project we recently edited for them. What the best programme to use to this? I heard Mpeg Steamclip is good but there is sooo many settings. The clip was edited in FCP 7 its 5 minutes longs. Client simply wants the file so they can upload to their site. could someone please advise settings which result in the clip loading pretty fast while keeping the quality good.
Thanks.

Any serious converter will have many settings for your indulgence. Before you do any conversions ask your client of the size he requires. You can use compressor to convert to H264, or a load of other programmes such as MPEG Streamclip. The problem with other converters is that they cost money whereas compressor is part of FCS and MPEG Streamclip is free.

Fonts in the WEB FONTS GROUP: Are those the only *safe* fonts?

I notice that iWeb allows me to choose from a variety of fonts. There are some that I like (Zapfino and Optima) but they are not in the category labeled WEB FONTS. I always believed that if you do not choose a WEB font, then your viewer may not see the font in the style that you choose because it may not be resident in that viewer's browser.
SO, QUESTION:
If I choose Zapfino or Optima, which are NOT in the WEB fonts group, do I run a risk that my viewers will possibly not see the text in Zapfino or Optima?
If I choose fonts from the WEB fonts group, can I be assured that this is what a viewer will see?
— Lorna in Southern California

Most template pages already have a box to enter text
into OK
If you type in that no problems - but as soon as you
change one word in that big text box to a non-web
friendly font the entire text is converted to an
image.
So type all the text in the text box with a
web-friendly font - then when you come to the non-web
friendly font part click on the T (ext) button in the
toolbar at the bottom in iWeb and it will create a
new text box on the screen.
Type your non-web friendly font text in this box.
Then when you publish the big text box will be text,
but the non-web friendly font text box will be
converted to an image meaning your site guests get to
see the site text as you intended and your site isn't
slowed down by loading a big image of text which
isn't required
hope that's clearer
cheers
Jason
Hmm. OK. I'm printing this out or I'll never remember how to do it. Thank you for explaining this, Jason.
— Lorna in Southern California

The save for the web function has stopped working in my copy of photoshop elements 12. I get this message, " The operation could not be completed. The system cannot find the path specified" Resetting preferences did not fix.

The save for the web function has stopped working in my copy of photoshop elements 12. I get this message, “ The operation could not be completed. The system cannot find the path specified” Resetting preferences did not fix.

my os is windows 7. elements 12 worked fine for many months then save for the web stopped working

HD video compressed for the web

I was doing some testing trying to figure out the best way to compress the HD video I get from the Sony XDCAM HD for the web (streaming). I shoot in HD (1080/30P) because it's needed for our videos. The web streaming is secondary.
I would prefer to make the web videos .flv because it works best and most easily cross-platform. In the real world, the majority of users have Windows PCs, which made me hesitant to use h.264 (.m4v) because it probably would require the average user to download things they may not wan to. Nonetheless, it has to be viewable on all computers in all browers.
So, I took three 10 second clips of steady camera video with audio from the camera that I used in all tests. I will refer to them by clip number...
Clip 1: 30P 16:9 High quality, 10sec=45mb
Clip 2: 30P 16:9 Low Quality, 10sec=24mb
Clip 3: 60i 16:9 High Quality, 10sec=45mb
First I tested making FLV is Adobe CS3 Encoder using the High Quality (700) setting.
Test 1 used size 848x480 (16:9)
Clip 1: 1.3mb
Clip 2: 1.1mb
Clip 3: 1.2mb
Comments: Looked very crisp, audio was clean, slightly darker image than original on default settings
Test 2 used size 480x270 (16:9)
Clip 1: 1.2mb
Clip 2: 1.1mb
Clip 3: 1.1mb
Comments: Looked very crisp, audio was clean, slightly darker image than original on default settings
Next, I tested making .m4v using the h.264 iPod settings in Compressor.
Test 1 used size 640x370.
Clip 1: 240kb
Clip 2: 1440kb
Clip 3: 204kb
Comments: Image wasn't quite as clean as the Flash files, but still good. Much lighter/brighter than the Flash files also. Low Quality HD video had high file size... why? I don't know, but I don't shoot on LQ for things anyway.
Test 2 used size 320x180.
Clip 1: 160kb
Clip 2: 865kb
Clip 3: 865kb
Comments: Image wasn't quite as clean as the Flash files, but still good. Much lighter/brighter than the Flash files also. Low Quality HD video had high file size... also the 60i file...why? I don't know.
In conclusion, I'm lucky that I shoot 30P since it worked well in all areas. The h264 codec provides a much smaller file size than Flash, with a good image. Amazing considering we started with a 45MB clip. What are the standards for aspect ratios for putting 16:9 video on the web? I haven't heard much set in stone like you have for 4:3 video. Nonetheless, the 640x360 or 480x270 seem to be a nice size for most uses.
I have heard that in Flash 9 you can chance the m4v extension to flv and it will work. IF that is true, that would be great because now my concern is that a base Windows PC cannot play these .m4v images without plugins/codecs. I suppose right now its a tradeoff between smaller file size/less compatibility with h264 or larger file size, great compatibility with Flash.
Any comments or suggestions to help out would be great. I typed this fast so forgive me if I left out any important info.

Hi APPLE27:
One comment from your post that immediately caught my attention was this, "Nonetheless, it has to be viewable on all computers in all browsers."
Unfortunately, it is unrealistic to expect one digital video file to be viewable on "all computers in all browsers" as there are simply too may variations in both hardware and software.
A common approach when offering digital video is to provide two formats to choose from and then within each of those two formats a few versions of the video for different bandwidths.
For example, a web site might offer Video for Windows and QuickTime. For each of these, there would be a low bandwidth Video for Windows file and QuickTime file and a high bandwidth Video for Windows file and QuickTime file (four files total). Of course, there's also Flash Video, Real Video, MPEG1, and so on.
For better or worse, YouTube.com has allowed video content creators the realistic expectation of creating a digital video file that is viewable on "most computers". But, the video is unavoidably tied to that web site.
When it comes to online distribution of video, it's still very open ended.
Also, computers are not all that's out there. Mobile devices are a huge market and you'd be hard pressed to create a single digital video file that will play on all mobile devices (iPhone, iPod Touch, Palm Treo, Sony PSP, etc.) either from local storage or from a mobile browser.
QuickTime offers a solution for creating a referencing movie - one file that links to other digital video files, but it too is imperfect at best when it comes to reaching the broadest audience possible.
With my few comments here, I'm just scratching the surface. But, it all starts where you are right now: caring about the image quality when exporting from your edited master.
-Warren

Exporting FCP 16:9 to QT for the web in 16:9?

Hello everyone,
I recently began doing my projects in 16:9 mode. I shoot them with my GL2's in 16:9, then capture to FCP as usual. FCP then automatically recognizes the 16:9 footage and adjusts everything perfectly for me. I figured out how to get the footage to DVDSP by 'forcing letterbox'. This plays the true 16:9 footage on a widescreen TV perfectly.
Now, I've come to another bridge that I can't seem to cross... that is... exporting the video to QT for the web in 16:9. I did a lot of searching here and all of the topics related to this did not help me at all. So, what I'm going to do is explain what I used to do when I shot in 4:3 mode:
1. In FCP... File>Export>QT Conversion
2. Format: QT Movie> Options
3. Settings> Sorenson Video 3
4. Frame Rate>15
5. Key Frames: Every 150 frames
6. Compressor> Medium
7. Data Rate: Automatic
8. OK
9. Sound>Settings>Mpeg-4 Audio, 16bit, Stereo
10. OK
11. Prepare for Internet Streaming> Fast Start
12. OK
13. SAVE
This usually turns a full sized 5 minute clip into a nice little presentation for the web no larger than 35 or so MB's. You can see a boat load of files like that on my website at (www.buerhausdesign.com).
Now, what I want to do is get a similar sized video for the web, only in 16:9 as I'm now shooting and editing in 16:9.
Does anyone have step-by-step instructions on how to do this? I know it's possible as I see movie trailors in 16:9 all the time in QT.
Any help would be appreciated:)
Matt

Nope, tried all of that. It stretches the image way beyond 16:9. Currently, if I export as a 4:3 file, the widescreen displays correctly, but I get two black bars at the top and bottom of the frame. Manually sizing to a 16:9 size, to say 720x404, stretches everything... including the unwanted black bars.
When I export to DVDSP, the black bars go away when I 'force letterbox'. There's gotta be a way to get it to work in QT.

Saving JPG to PNG using Save for the Web

Morning
I came across Paul Riggott's script for saving PSD to PNG which I changed to JPG to PSD.
The only problem with this is that the file size in most cases is larger than the original.
Is there a way to do a save as for the web as well?
Here is the original code:
#target photoshop
var imageFolder = Folder.selectDialog("Select top folder to process");
var folderList=[];
if (imageFolder != null) {
processFolder(imageFolder);
folderList.unshift(imageFolder);
createPNGfromJPG(folderList);
function createPNGfromJPG(folderList){
for(var a in folderList){
var fileList = folderList[a].getFiles ("*.jpg");
   for (var z in fileList){
    var file = fileList[z];
    open(file);
    var Name = fileList[z].name.replace(/\.[^\.]+$/, '');
    var saveFile = File(decodeURI(fileList[z].path+"/"+Name+".png"));
    SavePNG(saveFile);
    app.activeDocument.close(SaveOptions.DONOTSAVECHANGES);
function processFolder(folder) {
    var fileList = folder.getFiles()
     for (var i = 0; i < fileList.length; i++) {
        var file = fileList[i];
if (file instanceof Folder) {
folderList.push(file);
       processFolder(file);
function SavePNG(saveFile){
    pngSaveOptions = new PNGSaveOptions();
    pngSaveOptions.embedColorProfile = true;
    pngSaveOptions.formatOptions = FormatOptions.STANDARDBASELINE;
    pngSaveOptions.matte = MatteType.NONE;
    pngSaveOptions.quality = 1;
pngSaveOptions.PNG8 = false;
    pngSaveOptions.transparency = true;
activeDocument.saveAs(saveFile, pngSaveOptions, true, Extension.LOWERCASE);
Any help or support to head me in the right direction would be appreciated.
Iain

This uses "Fitimage"....
#target photoshop
var imageFolder = Folder.selectDialog("Select top folder to process");
var folderList=[];
if (imageFolder != null) {
processFolder(imageFolder);
folderList.unshift(imageFolder);
createPNGfromJPG(folderList);
function createPNGfromJPG(folderList){
for(var a in folderList){
var fileList = folderList[a].getFiles ("*.jpg");
   for (var z in fileList){
    var file = fileList[z];
    open(file);
    var Name = fileList[z].name.replace(/\.[^\.]+$/, '');
    var saveFile = File(decodeURI(fileList[z].path+"/"+Name+".png"));
    FitImage(640,640); //Resizes to the longest size
    //FitImage(128,128);
    savePNG8SFW(saveFile);
    app.activeDocument.close(SaveOptions.DONOTSAVECHANGES);
function processFolder(folder) {
    var fileList = folder.getFiles()
     for (var i = 0; i < fileList.length; i++) {
        var file = fileList[i];
if (file instanceof Folder) {
folderList.push(file);
       processFolder(file);
function savePNG8SFW(saveFile) {
    var desc8 = new ActionDescriptor();
        var desc9 = new ActionDescriptor();
        desc9.putEnumerated( charIDToTypeID('Op '), charIDToTypeID('SWOp'), charIDToTypeID('OpSa') );
        desc9.putEnumerated( charIDToTypeID('Fmt '), charIDToTypeID('IRFm'), charIDToTypeID('PNG8') );
        desc9.putBoolean( charIDToTypeID('Intr'), false );
        desc9.putEnumerated( charIDToTypeID('RedA'), charIDToTypeID('IRRd'), charIDToTypeID('Sltv') );
        desc9.putBoolean( charIDToTypeID('RChT'), false );
        desc9.putBoolean( charIDToTypeID('RChV'), false );
        desc9.putBoolean( charIDToTypeID('AuRd'), false );
        desc9.putInteger( charIDToTypeID('NCol'), 256 ); //Number of colours.
        desc9.putEnumerated( charIDToTypeID('Dthr'), charIDToTypeID('IRDt'), charIDToTypeID('Dfsn') );
        desc9.putInteger( charIDToTypeID('DthA'), 100 );
        desc9.putInteger( charIDToTypeID('DChS'), 0 );
        desc9.putInteger( charIDToTypeID('DCUI'), 0 );
        desc9.putBoolean( charIDToTypeID('DChT'), false );
        desc9.putBoolean( charIDToTypeID('DChV'), false );
        desc9.putInteger( charIDToTypeID('WebS'), 0 );
        desc9.putEnumerated( charIDToTypeID('TDth'), charIDToTypeID('IRDt'), charIDToTypeID('None') );
        desc9.putInteger( charIDToTypeID('TDtA'), 100 );
        desc9.putBoolean( charIDToTypeID('Trns'), true );
        desc9.putBoolean( charIDToTypeID('Mtt '), false );
        desc9.putInteger( charIDToTypeID('MttR'), 255 );
        desc9.putInteger( charIDToTypeID('MttG'), 255 );
        desc9.putInteger( charIDToTypeID('MttB'), 255 );
        desc9.putBoolean( charIDToTypeID('SHTM'), false );
        desc9.putBoolean( charIDToTypeID('SImg'), true );
        desc9.putBoolean( charIDToTypeID('SSSO'), false );
            var list3 = new ActionList();
        desc9.putList( charIDToTypeID('SSLt'), list3 );
        desc9.putBoolean( charIDToTypeID('DIDr'), false );
        desc9.putPath( charIDToTypeID('In '),File( saveFile) );
    desc8.putObject( charIDToTypeID('Usng'), stringIDToTypeID('SaveForWeb'), desc9 );
    executeAction( charIDToTypeID('Expr'), desc8, DialogModes.NO );
function FitImage( inWidth, inHeight ) {
if ( inWidth == undefined || inHeight == undefined ) {
alert( "FitImage requires both Width & Height!");
return;
var desc = new ActionDescriptor();
var unitPixels = charIDToTypeID( '#Pxl' );
desc.putUnitDouble( charIDToTypeID( 'Wdth' ), unitPixels, inWidth );
desc.putUnitDouble( charIDToTypeID( 'Hght' ), unitPixels, inHeight );
var runtimeEventID = stringIDToTypeID( "3caa3434-cb67-11d1-bc43-0060b0a13dc4" );
executeAction( runtimeEventID, desc, DialogModes.NO );

HT5182 How can I convert Raw images from iphoto to jpg for the web?

I have some pictures in Raw mode stored in my Iphoto that I need to convert in JPG for the web and to print in business cards, I have been going around e-mailing the pictures to myself in large or medium size and then saving them again to my iphoto. Is there a way to do this from iphoto directly?

iMac (24-inch Early 2009), iOS 6
Are your pictures on your iMac or on an IOS device?
On your iMac use "File > Export " set the jpeg quality and size you want:
Regards
Léonie
Sorry, Ralph, I see, we have been cross posting

Suitable font for the web

Similar Messages

Maybe you are looking for