INTRODUCTION

Hi silent_but_crazy! I'm Holly (silent_but_crazy) & welcome to Nebula, a font tips and tricks site! I've tried to compile the nuances and tricks of font-making to help people make better fonts. So kind of like a nebula, it's a cloud (of information) where stars (fonts) are said to be formed. That's not a very eloquent analogy, but I digress. This isn't really a beginner's font help page because there are tons of tiny tidbits of information. HOWEVER, coding guides for beginners are linked below. HERE WE GOOOOOOO

Contact me

This site is new so I would LOVE any feedback, suggestions, and corrections from you! Also, let me know if you have questions, need clarification, or want font advice. I'm happy to help, just neomail me! Just don't ask me to make you a font.

BASICS

coding

I'm going to be super straightforward and brief about basic coding because other sites have covered it extensively: See Fontabulous and Fontastic for more in-depth explanations with pictures!

Font face/color/size: [fontf=FACEc=COLORs=SIZE][/font]
Size can be 1-4.
Color can be a hex code (#123456) or a name (see NeoColors for colors with names under 7 characters long).
Due to glitches, you MUST specify a color in your font code or it will show up as a bright color rather than black like it should. Instead, use c=0 (or any other digit).
Bold: [b][/b]
Italics: [i][/i]
Underline: [u][/u]
Superscript: [sup][/sup]
Subscript: [sub][/sub]
Line break (like pressing 'enter' once): [br]
Paragraph break (like pressing 'enter' twice): [p]
Center: [center][/center]
Getting rid of the sig line: Put a [ at the very end of your neoHTML and a ] at the very beginning of your NeoSignature box. Think of it like the brackets are catching the sig line n_n

Font example a condensed demonstration

neoHTML: [center][fontf=tahomac=1]neoHTML[/font][p][fontc=#123456s=4f=rockwell][u]nebula[/u] [/font][fontc=gray][sub]★[
Signature: ][/sub][sup]★[/sup][/font][br][fonts=1f=georgiac=#456789][i][b]an example font[/b][/i][/font][/center]

BUT THIS LOOKS LIKE GIBBERISH, you say. Hopefully this graphic will help you understand what's going on a bit better. (I'm truly sorry about the heinous color scheme, I only have Word 2003.)

Like I said, if this is still too much for you to take in, check out Fontabulous or Fontastic for a simplified, step-by-step guide.

COLOR

Eyedropping: A color eyedropper is an essential tool for making fonts! It lets you get the exact color (hex code) for a pixel. Trying to match av colors by eye just doesn't cut it. A few popular eyedropper programs: Colorzilla (Firefox add-on and Chrome extension), GetColor (downloadable program for Windows), Instant Eyedropper (downloadable program), and Sunnyneo's Online Eyedropper.

^Colorzilla in Firefox (left) and Chrome (middle), and SN's eyedropper (right). drag to address bar for full size

Gradients: Also called rainbow fonts or fades. It's easy to generate the colors for a gradient with the right program. The gradient generator that most fontmakers use is Sunnyneo's Rainbow Font Maker. Bookmark this page!!! It's essential! I use the Rainbow Font Maker even when I'm not making gradients. It's also useful for when the colors you end up eyedropping from an avatar are too dark and too light: Just input two colors and find a medium shade!

Rainbow Font Maker, drag to address bar for full size

Matching to the av general guidelines

Generally, the color distribution in a font should be proportional to that of the avatar for the purpose of matching. This isn't a "rule," but it's usually a safe guideline to follow especially if you're newer to fonts. Here's an example:

Also consider the brightness of your av. I usually use gray or black for my neoHTML, which depends on how bright the av is that I'm matching with. Black goes better with bolder colors, and gray complements lighter, pastel colors. You can make the neoHTML any color in the av, but I usually don't (unless the main color in an av is an almost-black color) simply because I like to reserve coding space for my sig. But just make sure you don't have the neoHTML too light! You do want people to notice your font AND read your post, right? Here's an example:

It's subtle, but brighter sigs wash out gray text and black text looks rather stark with light-colored sigs. Likewise, match bright avatars with bright colors, soft avatars with soft colors.

While an eyedropper is essential for getting colors from an av, sometimes the main shade of gray eyedropped av may not match your font well; maybe it's too light or too dark. I usually just eyeball shades of gray using this easy-to-remember range:

Sorry about the grody picture, but you get my point. This makes selecting shades of grays quick and easy for me without having to eyedrop.

Something else to note is that a small/thin font will appear lighter than a big/thick font. For example, this block ██ looks darker than the surrounding text even though they're the same color. In a similar vein, reserve the use of very light colors such as gold or yellow for symbols. Light colors are hard to read for some people, and it's best to use them for simple stuff like symbols.

COMMON MISTAKES

Rule number 1: Always check your coding!!! Using the Page Source function, I have seen easily avoidable mistakes in people's font coding too many times. ALSO, make sure you're using your sig space efficiently: check out how to save space.

Colors: When using a hex code for color, make sure you always put a # in front of the hex code! Otherwise, the color won't show up in every browser. Some people only put in half of the hex code (#ABC), but this doesn't work in all browsers either. If you're desperate for space and need to do that, it's nice to have a screenie. If you are using a color word, again make sure you spell it correctly--blue not bleu, stuff like that n_n

Code: If your font is still wonky, look through the code in your sig boxes, or copy+paste them into Word, to double-check your code for extra, missing, or misplaced brackets. Also check for proper ending code tags!

Font faces: Tahoma is commonly misspelled tohamo/tahama/tohomo/tahamo. Verdana is commonly misspelled as veranda/vernada/veradna. Make sure you're spelling the font face correctly; typos happen.

Spelling, grammar, and punctuation: Know the difference between you're/your, they're/their/there, other stuff like that... basically, please proofread. And double-check your song lyrics ~_^
Also, I see tons of sigs that don't have apostrophes where they should be since the normal apostrophe disappears on the boards. To make apostrophes show up, use the unshifted key (either ~ or ¬) next to the '1' key above your QWERTY keyboard:

FONT FACES

If a font doesn't show up properly (i.e. it shows up on your browser as the default font face), you don't have it installed on your computer.

Two basic terms. A serif font is one that has little "feet" at the end of the strokes, like Times, Georgia, and Courier. A sans-serif font is one that doesn't have these "feet," like Arial, Tahoma, and Calibri. Sans-serif fonts tend to be easier to read, which is why Tahoma, Verdana, and the like are so popular for neoHTML.

serif (top) and sans-serif (bottom)

Getting more font faces a how-to

1. Go on a school/library/friend's computer, and bring a flash drive with you. Go to C: » Windows » Fonts. For Macs, Library » Fonts. This is the computer's font folder. Copy and paste the font files you want into your flash drive. When you get back to your own computer, cut and paste the font files into the font folder. Yay! Your fonts are installed!

If you can't see many symbols, I suspect you are missing a specific family of fonts: MS Mincho, MS Gothic, MS PGothic, MS PMincho, etc. Be sure to download one of those, too! I don't think it matters which one you take.
Just so you know, many fonts are proprietary, and you are supposed to pay for them in order to download and use them. So this method may be rather ~unsavory~... but I still do it haha.

2. If you are still using Windows XP or Office 2003, you may not have fonts like Calibri, Consolas, or Constantia. You can download the FREE Microsoft Office compatibility pack which allows you to see such font faces.

3. DaFont has tons of fonts that you can download for free. (Some fonts there are proprietary, though.) To install the font, first download it (will be a zipped folder). Right-click the zipped folder and click Extract All. Then move the font file (usually ends in .TTF) from the newly extracted folder to your fonts folder. Know that other people will ONLY be able to see the font you're using IF they have it installed too.

screenshot of installation directions from dafont, and extracting a zipped folder

MISCELLANEOUS TIPS

Know keyboard shortcuts: It saves so much time and clicking! Use them for all your computer stuff, really. (On Macs, use the ⌘ key instead of ctrl, but correct me if I'm wrong.)
COPY = ctrl+c
CUT = ctrl+x
PASTE = ctrl+v
FIND = ctrl+f
SELECT ALL = ctrl+a (useful for clearing an entire text box)
UNDO = ctrl+z (if you made a mistake while typing your coding in the boxes)
REDO = ctrl+y

Be aware that browser and operating system differences exist. For example: Firefox users can't see Wingdings/Webdings. The width of pasteable spaces varies across browsers. Windows XP displays text more "pixellated" than in newer operating systems and Macs. There are also font faces that are only available for Macs, like Zapfino. Most picture fonts won't work on Macs. Stuff like that. This section will be expanded in a later update.

Page source. By right clicking on a page (make sure you're not right-clicking over an image or link) and selecting Page Source, you can access the web page's HTML source. There, you can find out everything somebody did with their font using ctrl+f. This is what I use when I suspect I'm not seeing somebody's font properly. Common sense, but DON'T USE THE PAGE SOURCE TO STEAL FONTS!

Page source in Firefox (looks slightly different in other browsers). Use ctrl+f to find stuff. drag to address bar for full size

Highlighting. Like page source, this is mostly for checking out other people's fonts. I highlight text to tell the size of text in relation to text around it and also what kind of white space somebody's using (whether it's the alt+255 or wider pasteable space).

Finding an avatar in your Preferences list easily. Click on the drop-down box and start typing in the name of the avatar. Of course, you need to know the name of the avatar, but Sunnyneo/Jellyneo can help with that. Piece o' cake!

For XP users: Text in XP appears grainier or more pixelly than it does in Vista, 7, or Macs:

So for nicer-looking text that's easier to read, right-click on your desktop, select Properties » Appearance tab » Effects, and on the check box that says "smooth edges of screen fonts, select ClearType, then click OK. WHOA EVERYTHING IS SMOOTH-LOOKING AND NOT PIXELLY, NICE!! It'll look weird to you, but you'll get used to it ^_^

Getting ClearType, drag and drop to address bar for full size

SAVING SPACE

Without a Neoboard Pen, you have 120 characters of space for each your neoHTML box and Signature box. With a NBP, you get 150 characters of space for each box. And no, you can't stack NBP effects for even more space. So consider these tips to condense character space if you're low on space. I'm not saying you should use ALL of these tips ALL the time. I only use some of them as a last resort xP In the gray box are the things you should always do.

always do these and the rest if you need more space

1. If you're using a code (bold/italics/underline/center) on more than one font tag, you don't need to put a beginning and ending code for each font tag! For example, centering your whole font doesn't require a start and end center tag for each type of font in there. Just put [center] at the very beginning of your neoHTML box and [/center] at the very end of your signature box! So yes, you can put a beginning tag in the neoHTML box and end it in the sig box.

2. To make your font black, DON'T use c=black, c=#000, or c=#000000. If you set the color to a digit, say c=0 or c=1, the color will register as an error (of course a number isn't a color!) and show up black.

3. You don't need to put spaces anywhere in your coding except for the actual text that will display in your sig obviously. None of this "[font f=times c=4]this is my siggy[/font] [br]" nonsense!

4. If your text is size 2, don't bother putting s=2 in; it's default. Additionally, if you run out of space, making your text size 2 can make things fit just enough.

5. It's almost always more efficient to use pasteable spaces (　　　　) or no-break spaces (alt+255) instead of white text to push stuff over (for more info, see symbols). But if you do need white text, use #FFFFFE or c=snow.

If you want your font to be gray but don't have space for a hex code, you can use c=gray. (Remember, grAy with an A, not grey with an e! GrEy shows up green in IE.) Also, check Neocolors for color names that are less than 7 letters long (red, green, tomato, slate). There aren't many and they may not be the most remarkable colors, but they come in handy.

When you're using filler spaces, put them inside the font tag that's the biggest font size so you'll have, say, wider size 4 spaces instead of smaller size 2 spaces. It's not always ideal though because sometimes you want smaller spaces for more precision.

To get size 1 black Verdana (Neoboards only!) as your neoHTML, superscript or subscript your neoHTML instead of doing the regular code, like this: [sup]neoHTML[/sup]. However on guild message boards, it'll show up as Arial which is much smaller.

Try left aligning. Some people don't like the look of left-aligned text, but taking out the center tags frees up a lot of space. You can make your font more interesting by pushing over the neoHTML and/or sig to the right with filler space.

If you use Webdings/Wingdings, check if there's a symbol equivalent on the symbols page to save space AND so Firefox users can see them.

Having centered neoHTML with an uncentered sig can sometimes rearrange tags in your neoHTML and sig boxes enough so that you can fit an extra bit of code where you couldn't before. Also, the (/center) after the neoHTML code automatically creates a line break so you don't have to put a (br) after the neoHTML.

Sometimes if I want to use uppercase size 1 Georgia or Monospace but don't have space, I'll substitute them for Times. At size 1, they're similar enough not to detract from the font.

A comparison of Monospace/Courier, Times, and Georgia; regular and bolded. Uppercase Times and Georgia are quite similar at size 1, see?

You can use [p] instead of [br] right after your neoHTML to separate it from the sig.

SCREENIES

This section doesn't concern font coding, but it's important for font makers regardless. The appearance of a font can vary widely from browser to browser, so it's super useful to have a screenie handy for someone who can't see it properly (and to show off your fabulous font on a page!)

ALWAYS SAVE YOUR SCREENSHOTS AS A .PNG FILE! It doesn't leave weird fuzzies behind like a JPG does.

^Selecting .PNG from the drop-down list

Personally, I prefer to keep ONLY the font in my screenie--no avatar, no Preferences page box, etc. I then use the image HTML code to display a matching av (if there is one) next to the screenie. It's faster to load, is less cluttered, and you don't have to drag it to the address bar to see the full size (this is a pet peeve of mine). Others like to have the date and av included in the screenie, but it's up to you.

taking screenies how-to with different methods

For PC: Print Screen. Simply press the Print Screen or "prt sc" button on your keyboard. To screenshot just your active window, alt+print screen. For laptops, fn+(alt)+prt sc. Then paste (ctrl+v) into Paint, use the rectangle Select tool to select the area you want to keep, right click that, and select crop. Don't forget to save as a .png!

Also for PC, Snipping tool. The easier version! It's a program that comes with Windows Vista and 7. To find it, open your Start Menu » Programs » Accessories » Snipping Tool. To use it, drag-select the area of your screen you want to screenshot, and there you go! No need to crop—you've already done it! Click on options to customize Snipping Tool, namely to get rid of the red selection line when saving your screenies.

For Mac: Command+shift+4 allows you to select an area (when you see the crosshair, drag and select) and save it to your desktop. There are other screenshot shortcuts, but this is the quickest method for fonts.

There are Firefox add-ons and Chrome extensions that let you take a screenie inside the browser. BUT I don't know what they're called so you'll have to look that up for yourself.

After that, upload your screenie(s) to your favorite image-hosting site. Huzzah!

SYMBOLS

Are you perchance looking for THE SYMBOLS PAGE? Adding symbols is a basic and easy way to spice up a font!

Letter symbols. These are usually letters that are used in different languages. The most commonly-used type used is Greek. I've try not to include much of my own opinion in this guide, but I really want to discourage you from going crazy with letter symbols. LESS IS MORE. Even if half a line of text as letter symbols is too much IMO. I think using lots of letter symbols is hard to read, messy, and outdated-looking. Here's a demonstration:

^Bolded Georgia with no alt letters. Harmless and perfectly acceptable.

^Added alt As and Os. They're more subtle than other alts.

^Added alt Es. They're vεry noticεablε, ja?

^Added alt Us, Ls, and Ts. This is what fonts looked like a few years ago; try avoiding it.

^Definitely too many alts, too much going on.

AHHH KILL IT WITH FIRE!!!!!! But seriously, no bueno. DON'T do this, it's extremely hard to read.

Picture symbols. Rather self-explanatory. Again with certain picture symbols, less is more. But you can use some repeating symbols (stars, sparklies, clouds) to create a pattern or picture which can look cool yet not overly busy.

Wingdings/Webdings. These aren't very common anymore because of Firefox's popularity, but they are symbols so I'll include them here. If you're going to use them, have a screenie.

Character Map (Windows) shows you every symbol/character available on every font on your computer. This is where I got all the symbols for the symbols page from. To access it, go to Start Menu » Programs » Accessories » System Tools » Character Map. It has more symbols than you'll ever need really; I picked the most used/useful for the symbols page.

To search for a symbol, click "Advanced" and the search bar should pop up underneath (drag to address bar for full size)

Character Palette is the Mac equivalent. To get it, go to System Preferences » Personal » International » Input Menu, and check the box next to Character Palette. A flag should display in the menu bar; click on it to get to Character Palette.

filler space how-to and commentary

White text: Use c=#FFFFFE or c=snow. But it's usually more efficient to use no-break spaces or pasteable spaces.

No-break space: Also called the alt+255 space, this space is the same width as a spacebar space, but it isn't pasteable and must be typed in each time you use it. While they're tedious to use, they're recommended because they show up the SAME across browsers and are best for picture fonts, particularly Monospace/Courier pic fonts. To use it, type alt+255 in the number pad (duh). For laptops, press alt+fn+255 or fn+num lock to turn on the number pad so you can type alt codes normally. For Macs, the shortcut is option+space.
Some PC laptops don't have a num lock or number pad function at all, sadly (why manufacturers would do this is beyond me). ANOTHER way to use the no-break space is to go to Character Map, check the Advanced View box, and search "no break space." It is only pasteable when you copy it DIRECTLY from Character Map. In other words, you can't copy it from another font or even from inside your font boxes.

Pasteable spaces: I've already mentioned them, but these guys (　　　　　　　　). Unfortunately, they look different across browsers, so I'm hesitant to recommend them unless you don't have space. Anyway, be sure you have a screenie. A visual:

the exact same font in different browsers: firefox (top) and chrome (bottom)

The width difference is apparent when you highlight in Firefox (top) and Chrome (bottom). For reference, these spaces are used in size 3 bolded Georgia. Because of the browser issues, it's recommended to use alt+255 spaces instead.

THE END

... ... Anyway, that is the end of my guide. o3o Do check out the font face chart and sitely for more font resources! If you'd like to add something I omitted, please neomail me!! Thanks for reading, and hope it helps OuO

FONT FACE CHART

All right, I hope this is useful. Here's a font face chart of some font faces you might see on the boards. You can actually use any one-word font that's installed on your computer; these are just the ones I have. If one shows up as a default font face (either Arial or Times), you don't have it on your computer.

Right now I've only included them in one size. Zooming out once (ctrl-) is the equivalent to size 1 text, zooming in once (ctrl+) = size 2, thrice = size 3, and 5 times = size 4. Now because I am an utter buffoon when it comes to CSS editing, there is normal, bold, italic, and bold+italic, but no underline. You know what underlines look like, right? ¬_¬

I've said that I try not to make this guide too opinionated, but the fonts that look best italicized are those that look "curvy," not just slanted. Also, just because something is included included here doesn't mean it's useable, like bolded italicized Impact; it's more for continuity than anything.

Also important: Standard neoHTML for fonts is size 1 or 2 Tahoma or Verdana in gray or black. When you're new to fonts, it's tempting to use a fun and cool-looking font, but they're usually harder to read than you think. It's best to save the fancy stuff for your sig, but always make sure everything is easily readable.

index

Arial

The quick brown fox jumped over the lazy dog.
THE QUICK BROWN FOX JUMPED OVER THE LAZY DOG.
1234567890?!@#$%^&*()
The quick brown fox jumped over the lazy dog.
THE QUICK BROWN FOX JUMPED OVER THE LAZY DOG.
1234567890?!@#$%^&*()
The quick brown fox jumped over the lazy dog.
THE QUICK BROWN FOX JUMPED OVER THE LAZY DOG.
1234567890?!@#$%^&*()
The quick brown fox jumped over the lazy dog.
THE QUICK BROWN FOX JUMPED OVER THE LAZY DOG.
1234567890?!@#$%^&*()

Georgia

Monospace (Courier/Courier New)

Just for clarification, some browsers set Courier New as their "monospace" or fixed-width font face. In older versions of Firefox, Courier was pixelly unlike Courier New, which is why we used Monospace. But with newer browser versions, Monospace is now the same as Courier (at least on my computer, I need to test on others.)

Tahoma

Times

Verdana

Calibri

Cambria

Candara

Consolas

Constantia

Corbel

Elephant

Eurostile

Forte

Garamond

Gisha

Impact

Mistral

Nyala

Perpetua

Pristina

Rockwell

Sylfaen

Vivaldi

SITELY

If you link me back, want to be affiliates, or list me in your directory, please NEOMAIL me! I'd appreciate it very much OuO

link back

affiliates/resources

I will accept affiliates that have a font-related page that has high-quality content (please, no "beginner" mistakes).

listed at

updates

July 25: Listed at Dragon's Lair!
July 24: New affiliate - Chrysalis, new font premades by Shyann!
July 22: New affiliate - Tropix, premade fonts by Sam! Also listed at Smiley Central, Angel's Directory, and Plethora :D I feel so... ~official~
July 21: New affiliates - The Font Barista, Mint Condition, and CobaltPool Fonts!
July 19: New affiliate - BoardPaint!
July 16: First button completed! Nebula is officially open ^___^ Added The Star Factory and A La Carte (premade fonts) as affiliates!

CREDITS

- Layout template from Opulence. I'm especially happy with the coding; it has practically everything I need for laying out the info for this guide!
- A special thanks to Sera for helping me with CSS editing for the font face chart!
- I'm really grateful to Create Impressions and Impulse's Tutorial for their amazing button-making guides!
- Some screenshots taken from SN, DaFont, and Computer Hope.
- My guildies and font friends for their suggestions, knowledge, help, and support!

Nebula:FontTips&Tricks