customize your text

CRASH COURSE TUTORIALS — learn how to code!
customize your text
GLOSSARY
span
font-family
font-size
color
text-transform
letter-spacing
background-color

you may notice that plain text in the AFF editor, with just the < p > tag and nothing else, gives you somthing like this:

Hi. This text looks quite plain and simple. It's alright for a story, but for a layout, it needs a little more OOMPH!

pretty boring, right? in this tutorial I'm going to teach you how to make your text more attractive, like the text you're reading right now. to begin editing your text, first choose a font and size in the editor. you can also choose a highlight color and font color.

choose font

i'll do font Verdana, size 10, colored teal. let's compare the text with its source code.

Hi. This text looks quite plain and simple. It's alright for a story, but for a layout, it needs a little more OOMPH!

< p >< span style="font-family:verdana;" >< span style="font-size:10px;" >< span style="color:#008080;" >Hi. This text looks quite plain and simple. It's alright for a story, but for a layout, it needs a little more OOMPH!< /span >< /span >< /span >< /p >

this source code looks a bit messy; i like to clean it up a little bit by deleting all the text highlighted in blue. each attribute for the text is located in a span tag and separated by a semicolon. the font-familly attribute tells you the font. the font-size tells you the font size, and color tells you the color.

some other attributes you can try are:

letter-spacing: #px
text-transform: uppercase/lowercase
background-color: #hexcode

the generic text i use has the following attributes:

font-size: 11px
text-transform: lowercase
letter-spacing: 1px
font-family: arial
color: #000000

personally, i like to use arial in most of my layouts, with one px letter spacing. feel free to try out your own combinations and see what looks best for you!

thanks for checking out crash course tutorials! upvote and subscribe for more updates.

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

Comments

You must be logged in to comment
lilico
#1
is this still a thing : ))
PMEroleplay #2
Chapter 5: Please make tutorials on:
*how to put text on pictures
*how to link pictures to websites
*how to make text boxes that scroll
*more general basics

thank you ^~^
velvetred #3
omg i love this
john green and hank green < 3
-mrchuu
#4
Chapter 2: eue, I have a question...
You know how sometimes the layout overlaps in the comment section?
Why does that happen and how do you change it?

btw. I like your layouts. Tbh, sometimes, people who do layout tutorials make their layout all fancy and cute so you can't read anything nevertheless learn how to use the tutorial OTL
Yours is simple and nice :3
MickeyC7914
#5
Chapter 2: these are so helpful, thank you so much!
BestFriend18
#6
Chapter 2: update soon please.... /puppy eyes
I need your another tutorial^^
-Daezed-
#7
Chapter 2: please update soon ^^;
--starlightmelody
#8
Amaaaazing C:
Thanks for doing a layout tutorial~
May I request? I've been seeing layout with text on boxes, at first I thought it was picture with margin, but wrong, then I found that it can have borders~! Could you please do a tutorial about that? Thanks ^^
toukyo #9
Chapter 2: i can't put the text overlapping the image for some reason
toukyo #10
Chapter 2: just found this tutorial