Viewing Character Spacing P L E A S E!

Character Spacing P L E A S E!



User: Marcos D. 9 years ago
Character (or text) spacing is and would be an invaluable tool to the text spacing options in Everweb. I used it frequently in iWeb and have found myself having to create text in other applications and then import them into Everweb to achieve the desired look of the typography.

thx.
User: jefflopezdesigns 9 years ago
I second this. Seems like a pretty basic feature to be lacking?
User: Roddy 9 years ago
CSS uses the letter-spacing selector for this adjustment.
In general, messing with the default letter spacing is to be avoided since it can cause readability issues. The letter spacing is the font designers job. If the spacing isn't adequate for legibility then choose another font.

Most of us are used to being presented with web pages that use fonts from the web safe group. If you alter the spacing of any of these it causes unnecessary strain for most of us and downright pain for those with reading difficulties. In web design, badly adjusted letter spacing is almost as heinous a crime as using justified text!

An exception would be in "artistic" headings which employ a box shadow and particularly ones that use a large font size.

Some of the text widgets incorporate a letter spacing function such as this one for creating a 3D effect…

http://everwebcodebox.com/widgetbox/text/3d-text.html

Headings like this are not so much designed to be read as to express the web designers ego.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Michael K. 9 years ago
Personally, I find being able to adjust tracking can create a much more readable and user-friendly application. I do agree that it can be over used, therefore creating an unattractive and dysfunctional looking page or site. I guess that my old eyes like the flexibility of tracking adjustment and I lament mobile sites for the very same reason. When your eyes get older you may understand my rational behind it.......
User: Alborz H. 8 years ago
Roddy,

"Headings like this are not so much designed to be read as to express the web designers ego."

your example shows a really shitty heading. I'm not sure who you think is expressing their ego with that. That just scream: "I'm a 60 year old web designer who has;t learnt anything in 30 years and I refuse to learn new design techniques because the web is evolving too fast and i'm secretly afraid of it, but I choose to fight it instead."

Letter spacing is just another tool in the tool box the designers need to make what the need. You can't possibly count for every single outcome of use for letter spacing and say: "oh this is a bad feature to have". that makes no sense at all.
User: Paul-RAGESW 8 years ago
@Alborz: Please don't use this kind of language with other users of EverWeb. This is a community of EverWeb users to help each other.

Character spacing is something we plan to add very soon.

I apologize for the wait for this feature.

-------------------------------
Paul
EverWeb Developer
User: Franklin M. 7 years ago
I just bought EverWeb and I need "character spacing" to please a client. This is a problem. Is there a work around I can use until you address this?
User: James G. 7 years ago
Use CSS.
In every industry I have ever worked, literally half my job became teaching the clients right from wrong, and convincing them to do what is right instead of what they want. It saves massive headaches down the road.
User: Franklin M. 7 years ago
Jim G. While I appreciate your comment, it is veryhelpful, I do not program in CSS, that is why I use EverWeb.

So if you could provide me a quick few line of CSS to do the following I would appreciate it.

The Type: FranklinMillerArt.com
Typeface: GillSans
Character Spacing: 5px
Color of font: White
Size: 24
User: Roddy 7 years ago
The first instance of FranklinMillerArt.com is inserted as a paragraph element but should be an h1 heading since it is the website name.

Gill Sans is not a web safe font so you need to either host it, use a Google hosted font or provide a web safe fallback. See THIS page for more info about fonts.

This HTML Heading widget will allow you to insert the heading as an h1, use a non web safe font with a fallback and adjust letter spacing.

If you want to use code insertion - rather than a widget - you will find some basic info about creating and styling HTML headings - and why they are important for SEO - HERE.

Info about code general insertion HERE.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Franklin M. 7 years ago
Roddy, Thank you for your insight and help! While I am not a coder, I've spent much time using code when needed, so I am a half-assed coder and need help at times - especially since EverWeb still does not do everything I would like it to do. This problem is an example.

I had not considered the implications of using the title at a paragraph element vs a h1 heading. But you are right and I will work on it. I am redesigning an old page done in iWeb, so I have needs, but I also want to do things right this time around. The website is www.franklinmillerart.com and the test page I am using is at http://www.franklinmillerart.com/test.html

Your kind suggestion on using the HTML Heading sounds like what I need, and I will try it later today. The code insertion will be something I will read and digest.

You have been VERY helpful and I appreciate your time and knowledge. Just a little background on me, I am a retired fine artist, I taught web design, digital media, photography,counseling and educational psychology and other classes at the University of Nevada, Reno and community college. I now specialize in my art and local community art projects. Reno has an annual SculptureFest that is coordinated with Burning Man each year. I am in the process of documenting all the sculptures in Reno and providing a map system for visitors to navigate when they visit our city for the annual event. While it is not complete, your help is making it a reality: http://www.franklinmillerart.com/sculpturefest/index.html
User: Franklin M. 7 years ago
Roddy,
This is what I created so far using the Snippet Widget, maybe it will help others.

<!DOCTYPE html>
<html>
<head>
<style>
p.serif {
font-family: "GillSans-Light", Times, serif;
}

p {
letter-spacing: 5px;
}

p {
text-shadow: -0.0523px 1.4991px 0.0px rgba(0, 0, 0, 0.9);
}

p {
font-size: 200%;
}

p {
color: rgb(255,255,255);
}

</style>
</head>
<body>

<p class="serif">FranklinMillerArt.com</p>

</body>
</html>
User: Franklin M. 7 years ago
Thanks to everyone who is helping on this problem!

Last edit 7 years ago
User: Franklin M. 7 years ago
Thank you

Last edit 7 years ago
User: Roddy 7 years ago
In iWeb, an HTML Snippet created a separate HTML doc. EverWeb does not do this. The code is inserted into the page HTML doc so the code you are proposing is inaccurate. You are inserting an HTML doc inside another one.

Have a look at THIS page to see how styles are created and insert - either internal or inline. SIte wide styles are better inserted via a stylesheet. Internal styles - those in the head code - should be used if possible and inline styles used only for individual item changes such as font color. Spans can be used to change the style of individual words.

To style an h1 heading you would insert this into the HTML Snippet widget...

<h1>Website Name</h1>

... and the styles into the Head Code box - either in the Page inspector or in the Site Wide Head Code box if the style is being applied to every page.

All the selectors are grouped together like this...

<style type="text/css">
h1{
margin:0;
padding:5px 10px;
font-family:Gill Sans, helvetica, sans-serif;
font-size:24px;
font-weight:200;
font-style:normal;
text-transform:uppercase;
text-decoration:none;
color:#000000;
letter-spacing:1px;
text-aligh:left;
line-height:20px;
}
</style>

NOTE: Unless you have good reason, all items inserted into an HTML Snippet should have the margins set to zero.

You can also specify fonts using the short form...

h1{
font: font-style font-variant font-weight font-size/line-height font-family, fallback, generic group;
}
h1{
font: italic small-caps 200 24px/28px Gill Sans, Helvetica, sans-serif;
}

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.


Post Reply
You must login or signup to post.