fonts

simple // ur most basic layout tutorials thread

 

 

 

 

discussing :
FONTS
Making your fonts;
when it comes to fonts, there's a wide range or fonts you could use, right? well, unless we're specifically speaking for aff, you can't have many. but you can still some codes to make a simple font like arial and make it look like something special.

when it comes to making your own font, there are eight factors, the first one being the font you choose! yes, the font you choose matters. the second is, of course, color!  color matters! no one wants a layout with black everywhere. and no, by black, i don't mean a monochromatic layout with different shades. the third and fourth are line-height and letter-spacing! the last three are the ones that you see almost everywhere! bold, italics, underline, and strikethrough.

line-height - alternates height of the text cursor, thus alternating the height of the text
letter-spacing - spacing between each individual letter
color - color of your text
font-family - the font you choose
bold - thickening your text
italic - a sloping kind of text
underline - underlines your text
strikethrough - strikes through your text


and yes of course, there's font-size, but i, really, don't think i need to go in-depth with this one.
font-family;
as i had said earlier, the font you choose matters. when it comes to choosing your font, you can pretty much use whatever font you have downloaded onto your computer. however, when you decide to use a font you have downloaded, be aware of the fact that not all aff users may have that font on their own computers.

now, can you ask them to download it onto their computer? sure. but that's a lot of trouble to go through, don't you think?

the easiest way to go about is to pick a font that you are for sure everyone else has. for example: arial, times new roman, georgia, courier, etc. using default fonts is the best way to go about this situation.

and besides, using letter-spacing and line-height to turn an ordinary font like arial into something different is special. but if you take a font like ibleum and use letter-spacing or line-height... well, let's leave those kind of things for posters, yeah?
color;
when picking colors for you layouts, you wanna pick colors that compliment each other or colors that go well with each other. I'm not saying that you can't pick rainbow colors, it's just how you place the colors in the layout.

so i guess in the end, it all depends on where you decide to use a certain color and where you don't.
line-hght&lttr-spcng;
line-height and letter-spacing are two very commonly used attributes in stylizing fonts.
*note; the font size is set to 10px.

example (line-height):
1) this line-height is set to 7px. notice how the lines are a lot closer?
 
2) this line height is set to 12px. notice how there's a larger gap between the lines?

example (letter-spacing):
1) the letter-spacing for this line is set to -1px.

2) the letter-spacing for this line is set to 2px.
b & i & u & s;
the last four are bold, italic, underline, and strikethrough. if using the toolbar to bold and italicize, it'll be < bold> instead of < b> and < em> instead of < i>, both still work nonetheless.

example:
B/bold) this is bold.
i/em) this is italics.
u) this is underline.
s) this is strikethrough.

 

 

 

 

Like this story? Give it an Upvote!
Thank you!

Comments

You must be logged in to comment
starfan24
#1
Chapter 13: ⋆。°✩Reader Comment⋆。°✩

Hi author -esque!!

Love this tutorial!! Thank you so much!!

Reader
⋆。°✩starfan24⋆。°✩
Krystal_Luu
#2
Thank you for creating this!!!!
godna24
#3
Chapter 38: hi erm i wanna ask is it possible to use background image instead of background color in the scroll box?
Mael517 #4
Chapter 32: Thank you; this was very helpful!
sikakira
#5
Chapter 18: I wish text shadow worked :((((
Sakarafreak
#6
Chapter 7: Im still confused on the strikethrough..
Dark_History45 #7
Chapter 23: how to change the background image?
Jisoori #8
Chapter 8: why do i have this 'lorem ipsum dolor sit amet' on my preview?