Page 1 of 1

Font creation tools?

Posted: 20 Aug 2011, 21:35
by spillerrec
I have been trying to design a website for RICcreator:
screenshot.gif
I wanted to imitate the raw feeling of a 2 color bitmap, so only black and white is used. (I'm not good at creating color themes anyway...) To really spot the pixels, everything (other than text) is 2x the actual size.
(The mouse pointer hovers over the "Download" link, when clicked links invert in color, becoming black with white text.)


Well, typography is still to be done. (I'm not good at this either! ; ) )
I would like text to look pixelated like on the NXT screen, so I want like to convert my RIC font to a normal font so I can embed it to the website. I only want to format the title and headlines like this though, I'm not going to ruin the readability of the main body, don't worry.

I do not know any software to create fonts in though. And in this case I would properly have to convert a raster font into a vector font too for browser compatibility. Any suggestions? (And no, I do not want to replace each headline with an image.)

Re: Font creation tools?

Posted: 20 Aug 2011, 22:08
by nxtboyiii
Wow! That would be neat to see a NXT Screen-looking website. Just download a font from a website.

Go to dafont.com. It has tons of fonts.

Re: Font creation tools?

Posted: 20 Aug 2011, 23:04
by muntoo
Colorschemes: http://colorschemedesigner.com/

I recommend NOT using a custom font. I think everyone will have to have it on their machine to see the custom font...? Use the standard fonts. Your headers/etc can be statically rendered as PNGs after posting, though that might be a bit difficult to implement.

P.S. Is the site up? I'm assuming it will be at riccreator.sf.net

Re: Font creation tools?

Posted: 20 Aug 2011, 23:30
by spillerrec
muntoo,
You can embed fonts in CSS nowadays, so I can place the font file on the server and it is made available for all people. Works in all browsers. Old browsers will simply use the fall-back font in a normal CSS manner.

The site is not up yet, however the url is indeed correct. Just the default SF page there right now.

Re: Font creation tools?

Posted: 21 Aug 2011, 00:44
by muntoo
Google "pixelated font".

http://www.dafont.com/pixelated.font

Re: Font creation tools?

Posted: 21 Aug 2011, 23:47
by spillerrec
Using someone else's font is also a possibility, but I just rarely find something that I like.
However I found out that the font you linked to was created on a site called "fontstruct" which has made a flash application for this which allows you to create fonts by using building blocks. Free (requires registration) and licenses it under a Creative Commons license of your choice. Link to my font: http://fontstruct.com/fontstructions/show/nxt_ancii_8px

I just need to create my all-caps 5px font now and make sure it works properly in all the browsers. The font didn't look too good in Opera but I think that is an Opera issue though, looks fine everywhere else. EDIT: Opera made the font bold, looks fine after I fixed my CSS.

I actually wanted to use it for more than the website.
z10.jpg
Here it is used for the display in my Z-10 speakers. Japanese/Chinese characters will not work, but I have almost twice the space compared to the old font.


EDIT: website is up! http://riccreator.sourceforge.net/

Re: Font creation tools?

Posted: 24 Aug 2011, 10:54
by timpattinson
muntoo wrote: I recommend NOT using a custom font. I think everyone will have to have it on their machine to see the custom font...?
True, it's not worth the worry

EDIT: it looks really nice ;)

Re: Font creation tools?

Posted: 31 Oct 2011, 02:47
by bungeshea
Nice! I like the HTML5 & CSS3 code. ;)
EDIT: That's strange... at school using Chromium the URLs in signatures appeared clickable, but now in Google Chrome they are normal...