I'm tired of Titillium that isn't legible in small font sizes! I need a sans-serif font which be totally legible in small sizes!

Hello people!

I'm tired of Titillium and TitilliumText22L! It's not legible in small sizes or in 11, 13, 14px in the sites or blogs! Titillium isn't like Arial, Helvetica and Verdana. Titillium is totally legible only in Word 2007 with optimized ClearType, Paint, Photoshop, Illustrator, Inkscape and Gimp.

I need a free and ORIGINAL font which...
— sans-serif
— totally legible in small sizes (10 to 14px)
— contemporary
— corporate
— fashionable
— modern
— squarish
— techno
— text.

Thanx u all!

Kevin

Arno Enslin's picture

@ Kevin

You don’t need Kernest or Typekit for using webfonts. Check the EULA of Delicious and embedd the font data, if the license allows that. But you will probably be uncontented with the look on screen, because it is PostScript flavored OpenType.

kevintheophile's picture

@Armo

I found, copied and pasted here:
4.b.IV. Direct Linking or Embedded Opentype Files with
the @font-face CSS property (ONLY for FREE fonts)
If the font is a free font ($0.00 license fee), you may use this font for Font-Face embedding, but only if you put a link to www.exljbris.nl on your page and/or put this notice /* A font by Jos Buivenga (exljbris) -> www.exljbris.com */ in your CSS file as near as possible to the piece of code that declares the Font-Face embedding of this font.

kevintheophile's picture

@Armo, does he mean I can use his fonts for @CSS font-face for mu blog?

Arno Enslin's picture

@Armo [sic!], does he mean I can use his fonts for @CSS font-face for mu blog?

Yes, you only have to put link and notice on your page and the CSS file. And Jos Buivenga provides more free fonts, but not only Delicious.

But non of the fonts will be as legible as Verdana, Georgia, Trebuchet MS ans so on in 11, 13, 14px.

kevintheophile's picture

Armo, I don't know to put it. How do I put?

Arno Enslin's picture

Armo, I don't know to put it. How do I put?

Arno.

You probably mean, how to put the font into the CSS?

http://www.w3.org/TR/css3-fonts/#the-font-face-rule
http://people.mozilla.org/~jkew/woff/
http://www.motobit.com/util/base64-decoder-encoder.asp
http://www.fourmilab.ch/webtools/base64/

@font-face {
font-family:"FONT-FAMILY-NAME";
src:url(data:font/woff;base64,BASE-64-CODE);
}

kevintheophile's picture

@Arno, sorry for having written your name so the size of your's letters is small, I confonded "rn" with "m". For example:

@font-face {
font-family:"Delicious";
src:url(http://www.josbuivenga.demon.nl/delicious.html);
}

Am I right?

kevintheophile's picture

CSS3 Fonts site that you gave me is very interesting.

Arno Enslin's picture

No. You have to link to the source of the font data. Jos wants, that you put this into your CSS file:
/* A font by Jos Buivenga (exljbris) -> www.exljbris.com */

This notice would be unvisible for the visitor of your site, as long as he doesn’t open the CSS file.

Alternatively or additionally you can put a visible link on your site.

kevintheophile's picture

I searched for Base64 code at Wikipedia. I unknow this.

kevintheophile's picture

Do I put the code /* A font by Jos Buivenga (exljbris) -> www.exljbris.com */ on after the url of src code or on the code < head >?

Arno Enslin's picture

You have to put this into the CSS:

@font-face {
font-family:"FONT-FAMILY-NAME";
src:url(data:font/woff;base64,BASE-64-CODE);
}

/* A font by Jos Buivenga (exljbris) -> www.exljbris.com */

You only have to convert the OTF to WOFF and encode WOFF as Base64. Or you can convert the OTF directly to Base64. In this case you also should change the filetype after "data".

But Kevin, if all this is so new for you, I wonder, why you think, that just the font will improve your web page.

Have a look into the CSS Zen Garden, if you want to get an impression from the power of CSS. The meaning of embedded body text fonts is totally unimportant with regard to that, what makes websites different from others. Actually! This may partly change in future.

kevintheophile's picture

Arno, I think I understood. First I put the code /* A font... */ on the head. (I have just just converted Delicious OTF to Base64-CODE, oh, the the number of letters and numbers is big!). Now, in second place, I copy and paste the BASE64-CODE on after the code url of src? I must put the font's name on the font-family?

kevintheophile's picture

Why can't I put the Delicious.otf on the url?

Arno Enslin's picture

With regard to the font family name I am not sure, if it must be the original family name. Just google a bit. And I am not sure, if you are allowed to store Delicious outside the CSS on the server. Send Jos a mail and ask him.

kevintheophile's picture

OK, Arno! Thank you a lot for your help!

Arno Enslin's picture

@ Kevin

There neither should be line breaks nor spaces in the base64 code. The base64 code must be in one line. This was more difficult, than I thought. UltraEdit seems to dislike such long lines. I just had trouble with that in Ultraedit (and the first crash with UltraEdit). And the font-family has not necessarily to be be called Delicious. You can take the name of your choice.

Frode Bo Helland's picture

Kevin, drop me an e-mail and I’ll help you set up the CSS and font files. It’s really quite easy.

Arno Enslin's picture

@ Kevin

I am just writing an example html file with embedded CSS and the six Delicious styles. I will attach it a little bit later, because of the problems with Ultraedit, that I actually have.

Arno Enslin's picture

@ Kevin
The zip file contains a HTML file, in which the six styles of Delicious are embedded: http://www8.zippyshare.com/v/28264337/file.html

Frode Bo Helland's picture

Goody, now you don’t need me :)

kevintheophile's picture

Thank you a lot, Arno, I understood your test's HTML, but do I put this HTML on the code "head" or on the code "body"'s end of Blogger's HTML?

Arno Enslin's picture

I understood your test's HTML, but do I put this HTML on the code "head" or on the code "body"'s end of Blogger's HTML?

You should put the CSS into a separate file with the extension .css.
And in the head of the HTML file you insert the line …

<link rel="stylesheet" media="screen,projection" href="nameOfTheCSSfile.css" title="schm8-style" type="text/css">

… while the media-attribute is just an example. You can, for example, provide different CSS for print and screen.

But in earnest, Kevin, because you obviously don’t know much about HTML and CSS, what makes you believe, that your blog will not look similar to other blogs? Your aim was making it look different – individual. And you did ask for a body text font. Except from the fact, that different does not necessarily mean better, the body text font will not make your blog to something, that is really individual. Even, if you would invest much money into a commercial font family, it will not improve your blog, if you miss the basic knowledge about hand coded webdesign (and naturally the feeling for and knowledge about graphic design).

If you understand German, I can recommend SELFHTML (also available in French), CSS4you and the XHTMLforum.

And I strongly recommend the book CSS – The Definitive Guide. From the four books, that I have about CSS, it is the only one, that really is worth to have. It is very good.

kevintheophile's picture

@Arno, thank you a lot again!

*I don't speak German yet, but I'll study this language soonly. But I can speak in French, Spanish and Portuguese.
*I'm going to keep your informations (Font-Face Rules, WOFFs, Base64, your test's HTML, the HTML's head code, SelfHtml and the book CSS — The Definitive Guide).
*I won't buy this book because I cut the credit cards. Maybe in the next months I'll make a credit card, I prefer buying it with the money, but I see many shops demand the credit card, when I buy with the credit card, I'll pay it with the money, I don't want to buy it with the credit card and without the money because I would be indebted.
*As you told I don't know much about HTML and CSS, but I do know enought only about HTML, I understood some codes because I learned with my friens who are graphic designers and web designers, which taught me a lot, with the blogs or sites of tips and teachings about HTML. I've HTML e-books. I don't know only the CSS because I don't learn and understand it yet.

Arno Enslin's picture

@ Kevin

Are there no local bookshops in Canada? I had posted the link to the website of the publishing house. This book is also available from Amazon.

kevintheophile's picture

@Arno

*There are, but I'm lazy of go shopping. (lol)
*I still have a doubt.

I know how to put the code on the head as you taught me, but I'll copy the big parte of the code body from start to end of the group (first to last Delicious fonts) and the codes .Delicious and paste on after the code body? And in each code group, for example, #header .description, #outer-wrapper, h2, etc., will I copy and paste the @font-face and the /* A font by Jos Buivenga (exljbris) -> www.exljbris.com */ on before each code (header, outer-wrapper, h2, etc.)? Wll I paste the src:url(data:font/woff;base64,BASE-64-CODE); on after the code font or font-family? I'll copy one part of my HTML'S blog on the notepad and transform it as image PNG for you to see the exmaple:

In place of this:

Now, see the exmaple:

Is it right? If not, please correct this.

Arno Enslin's picture

No, it is not right. First you should put either quotation marks or apostrophes around "Titillium Text" because of the space in the string "Titillium Text" (in both cases not the typographical ones, but either Unicode 0022 or 0027). For the same reason you can omit the apostrophes around the string "Delicious".

Furthermore you have put the @font-face into a declaration block.

@font-face {
/* A font by Jos Buivenga (exljbris) -> www.exljbris.com */
font-family: Delicious;
font-style: normal;
font-weight: bold;
src:url(data:font/woff;base64,BASE-64-CODE of Delicious-Bold.woff);
}

#header h1 {
margin: 5px 5px 0;
padding: 15px 20px .25em;
line-height: 1.2em;
text-transform: uppercase;
letter-spacing: .2em;
font: normal bold 200% Delicious, "Titillium Text", "Trebuchet MS", Trebuchet, sans-serif;
/* I prefer not to use the shorthand for the font styling. And, as far as I remember, Trebuchet was ever called "Trebuchet MS". "Trebuchet" can probably be omitted. */
}

This should work. By the way, I thought, that you already have used Titillium. How could your visitors access Titillium in the past?

kevintheophile's picture

@Arno, with Kernest.com's CSS @font-face, the vistors could see the different font.

We're arriving to the end lesson.

In the place of BASE-64-CODE of Delicious-Bold.woff, will I copy and paste the BASE'64's code (that big number of numbers and letters mixtured...) that you've put in the your Delicious' test HTML? Or do I need to convert teh Delicious OTF to WOFF and after WOFF to Base64?

kevintheophile's picture

@Arno, can I put the other five fonts groups between the @font-face and the #header? Can I put the six fonts groups before each code group (for example, outer-wrapper, h2, .post, etc.)

Arno Enslin's picture

The @font-face-declaration-blocks should be at the top of the css file, because I assume, that you would not get access to the fonts, if they would be below the blocks, in which the fonts are declared.

And the base64 code, that is contained in my HTML file, is ready for use. Just copy and paste the blocks. You don’t have to convert anything anymore in case of Delicious, except you want to encode the source font (OTF in this case), but not the woff as base64. But the woff files are compressed and therefore you spare storage.

With @font-face you define the font – comparable with the installation of a font. And later you use it. I doubt, that you could use it, if it is defined later.

Delicious-Bold.otf: 24.648 kilobytes
Delicious-Bold.woff: 15.092 kilobytes

@Arno, with Kernest.com's CSS @font-face, the vistors could see the different font.

I will check that. I did not use @font-face before.

Edited:

I don’t know, what your visitors have seen there, but in my test it does not work. I am not surprised.

Northbay's picture

I don’t know, what your visitors have seen there, but in my test it does not work. I am not surprised.

Hahaha.. I might be too tired (2AM here), but I just died laughing reading that.

This thread really is really something else. I have to admit I switched sides quite a few times in the Newbie vs Typophile war.

I'm off to bed. I'll read this again tomorrow and see if it makes any sense.

gabriel00's picture

BEST. THREAD. EVER.

Michael Jarboe's picture

Check back with us in 2024.

kevintheophile's picture

That's very difficult. I made that all, it didn't work in my blog. I didn't understand why. :-(
I think I have to desist of that. :-(
I have to study a lot, a lot and a lot the HTML and CSS for discovering the secret...
Then I continue using the font "Titillium Text 22 L". It's all OK.

kevintheophile's picture

@Mike Jarbone

We all are going to die in 2012. (lol/lmao)

rubenDmarkes's picture

LOL
Thank you for playing, everyone! :P

Kevin: you're welcome. :P
That last statement was very enlightened of you. I think we can all agree that it is a good idea for you to learn more about HTML and CSS. Good luck! And don't forget you also need to take into account anti-aliasing technologies, varying user systems, different browsers… etc., etc.. These are complex fields, webdesign, programming and type.

pers0n's picture

here are some serifs that work at small sizes

times new roman
droid serif

you might look at pixel serif fonts also, but they might not look good in anything but flash sites

Syndicate content Syndicate content