?
Solved

Suggestions for text color and font on grey background

Posted on 2010-11-26
8
Medium Priority
?
793 Views
Last Modified: 2013-11-19
Can anybody suggest some colors and simple fonts fot text (heading) on a grey background. Please check the image attached.

Thank you!         color suggestion
0
Comment
Question by:dshrenik
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
  • 2
  • +2
8 Comments
 
LVL 3

Accepted Solution

by:
roynaufal earned 400 total points
ID: 34221587
verdana with one of these colors should look nice:
#3baabb
#33CCCC
#96BC43
0
 
LVL 23

Assisted Solution

by:jeremyjared74
jeremyjared74 earned 800 total points
ID: 34221788
Here are some suggestions and the code to go with it: Headers
Arial Font White CSS:

h1, h2, h3, h4, h5, h6 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #FFF;
h1 {
	font-size: 42px;
}
h2 {
	font-size: 34px;
}
h3 {
	font-size: 24px;
	}
h4 {
	font-size: 18px;
	}
h5 {
	font-size: 16px;
	}
h6 {
	font-size: 14px;
	font-variant: small-caps;

	}
	
=================================================

Trebuchet MS Font White CSS:

h1, h2, h3, h4, h5, h6 {
	font-family: "Trebuchet MS";
	font-weight: bold;
	color: #FFF;
h1 {
	font-size: 36px;
}
h2 {
	font-size: 32px;
}
h3 {
	font-size: 24px;
	}
h4 {
	font-size: 18px;
	}
h5 {
	font-size: 16px;
	}
h6 {
	font-size: 14px;
	font-variant: small-caps;

	}
	
=================================================

Palatino Linotype Font White CSS:

h1, h2, h3, h4, h5, h6 {
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-weight: bold;
	color: #FFF;
h1 {
	font-size: 42px;
}
h2 {
	font-size: 34px;
}
h3 {
	font-size: 24px;
	}
h4 {
	font-size: 18px;
	}
h5 {
	font-size: 16px;
	}
h6 {
	font-size: 14px;
	font-variant: small-caps;

	}

=================================================

Trebuchet MS Font White CSS:

h1, h2, h3, h4, h5, h6 {
	font-family: "Trebuchet MS";
	font-weight: bold;
	color: #FFF;
h1 {
	font-size: 36px;
}
h2 {
	font-size: 32px;
}
h3 {
	font-size: 24px;
	}
h4 {
	font-size: 18px;
	}
h5 {
	font-size: 16px;
	}
h6 {
	font-size: 14px;
	font-variant: small-caps;

	}
	
=================================================

Palatino Linotype Font Red CSS:

h1, h2, h3, h4, h5, h6 {
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-weight: bold;
	color: #550000;
h1 {
	font-size: 42px;
}
h2 {
	font-size: 34px;
}
h3 {
	font-size: 24px;
	}
h4 {
	font-size: 18px;
	}
h5 {
	font-size: 16px;
	}
h6 {
	font-size: 14px;
	font-variant: small-caps;

	}

Open in new window

0
 

Author Comment

by:dshrenik
ID: 34222570
I dont need any code. More snapshots with font name and color will be good enough.
Thanks!
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 23

Assisted Solution

by:jeremyjared74
jeremyjared74 earned 800 total points
ID: 34222655
Ok, here are a few more:
More-Fonts.jpg
0
 
LVL 2

Assisted Solution

by:garfld
garfld earned 400 total points
ID: 34230544
Navy blue is gorgeous with grey.

Georgia is a very elegant font and everybody has it.
0
 
LVL 38

Assisted Solution

by:BillDL
BillDL earned 400 total points
ID: 34241285
It really all depends entirely what overall effect you want on the viewer.  You might be looking for more of a blending of shades so that the text heading appears to be chiselled into the background or embossed onto it, in which case you could use a darker shade of grey. Depending on what image editing applications you have at your disposal, you could use more than one colour and create a 3-D type of text effect.

To make the text heading stand out most dramatically and just appear quite obviously as text on a background with the maximum visibility, you could start off with a text colour that is an almost exact opposite (ie. negative) colour of the background. The grey background to your header is (R,G,B) A9, B0, BB. Making the image a negative, the opposing colour is 56, 4F, 44, so you could try that for a starting colour and adjust.

It looks like you are creating image GUI parts for a program or application judging by your "theme" image name.  You could draw some inspiration by creating a new Windows Theme or colour "scheme" and see how the Title Bar, etc. shows, then use the same colours.

Sorry for not providing screenshots, but what I'm trying to say is that different people have very different tastes and there are so many hues of the same basic colour that you may get 200 screenshots, you would like 2 of them, I would like a few of the others, and each other person reading this would like yet another couple.  While you may look at your favourites and say "Yes! That's perfect", I might look at the same ones and say "Oh, no! That just doesn't look right".

It depends on what you intend to use the image(s) for.  One rendering might look perfect for elements of a web-based application in a whole web page, but not for some other application installed on someone's computer where you are just seeing a dialogue in isolation.

If this was a poster for some marketing use I suppose there would be some basic "rules" about what works and doesn't work for best visual impact, or what makes for a seamless blending of components, but even "rules" are open to individual interpretation dependent entirely on the desired effect on the eye.

So, what are you going to use the image for?
0
 

Author Comment

by:dshrenik
ID: 34244627
Thanks for the very informative mail!
The screenshot I posted is actually a PowerPoint slide from my presentation.
I have got some very nice suggestions, but just looking to have a few more! :)
0
 
LVL 38

Expert Comment

by:BillDL
ID: 34277106
Thank you dshrenik
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In a previous article published here at Experts Exchange, Signature Image with Transparent Background (http://www.experts-exchange.com/Web_Development/Document_Imaging/A_12380-Signature-Image-with-Transparent-Background.html), I explained how to cre…
This article shows how to convert a multi-page PDF file into multiple image files, with one image file created for each page of the PDF. It does this by utilizing an excellent, free software package called GraphicsMagick. The solution is amazingly s…
Not only does Prezi allow you to create non-linear presentations, it also makes it easy to apply transition animations between your frames. Learn how to apply a fade-in transition to select items and entire frames in this tutorial Select "Edit Path"…
Learn how to use the remote presentation tool in Prezi to allow you to harness the power of this cloud based presentation platform. You can show your presentation with a remote audience using this free tool.
Suggested Courses

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question