Shop Mobile More Submit  Join Login

CSS Tricks: Fonts and Text Basics

Sat Nov 2, 2013, 12:13 PM
Today I want to talk about fonts in journal skins :XD: You probably saw this one coming :giggle: And maybe you also saw coming that this will be a rather long tutorial :faint: There is just a lot to say about this! Actually this will only be the first one about fonts and text. This one will cover the basics of working with fonts.

I will start by talking a bit about web-safe fonts and the concept behind a fallback hierarchy. Further down you'll find a selection of properties that can be styled with examples and explanations.

So, let's go! :eager:

The standard web safe fonts


A font is defined as web safe when it is installen on a great number of user's computers. They are also called system fonts, and can vary depending on your PC. Fonts on a Mac OS are not necessarily the same as fonts on a Windows OS.

Here's is a little example: on the left side is an image, an image created in PS on the right side. If both sides look the same, or at least very similar, it means they are installed on your and my system. It is worth mentioning that each browser renders fonts differently, too. I am using Chrome on a Mac, if you use Firefox on Windows, the fonts may look different, even if they are the same. This is due to difference in rendering, f.e. I think browser fonts are not using anti-aliasing on Windows by default. 

Arial
Arial Black
Courier New
Georgia
Impact
Lucida Grande
Tahoma
Times New Roman
Trebuchet MS
Verdana


But don't fret, you're not limited to those!


Almost two years ago deviantART integrated Google Webfonts into journal skins. This means that you can use fonts from their directory in your journal skin. (It is limited to journals, and text deviations, only at the moment.)

Since there are constantly new fonts added the this directory, not every font will be available on dA immediately. You just have to test it. A lot. Sometimes.

Fallback Hierarchy


If you use a font that may not be available for a user, it is important to add a "fallback hierarchy" to your code. You offer alternative fonts in case one of them is not available. It usually starts with the font you want, a websafe font and the classification of said font.

.gr-box {

font-family: 'Rufina', Georgia, Serif;


}


If you apply this CSS to your code, the font you want everything to be set in is Rufina, from google webfonts. If for some reason a user cannot view Rufina, he will see the text in Georgia, a very websafe font. If Georgia fails as well, the text will be presented in an "undefined" Serif font.
With no fallbacks set (aka defining only Rufina as the font-family) you will have text displayed in some other font. Which one? You can never really know. In the example below it happens to be Times New Roman. Even tho I can't be sure, at least it is Times New Roman for me :lol:

This is Rufina, our font of choice.
The first fallback is Georgia.
And the last fallback is an "undefined" Serif font.


Setting a hierarchy for font-families in CSS helps you to display your design as close as possible to the perfect scenario. You can already see in the example, how the size of the fonts appear different, even though they are all set to the same size of 18px.
By selecting fallback fonts that are a) web safe and b) similar to your font of choice, you can make sure that your design looks good, no matter what fonts the user has installed or available.

A "perfect" example of a fallback font is Arial for Helvetica. Arial was specially comissioned by Microsoft as a replacement for Helvetica which was used on Macintosh systems. The corresponding letters of each font have (roughly) the same height and width, thus not causing a change in how wide or tall a piece of text flows.



Copy texts in Helvetica and Arial, the line breaks appear at the same spots and the text always flows to the same length.


Here Tahoma is used on the right column, you can clearly see how different the lines break and how much bigger Tahoma's letters are compared to Helvetica.

When selecting fallback fonts, stay in the same classification and try to find a font that runs as wide as your first choice.


CSS font-families


As mentioned earlier, the last font-family in your font stack/hierarchy should always be the 'undefined' family (or classification). There are 5 of those in CSS, the only problem is that you may never know what font it is actually going to be. Sans-serif usually is Arial and Serif Times New Roman; Monospace ist most likely Courier; Fantasy on my system seems to be Papyrus :meow:

sans-serif

serif

fantasy

cursive

monospace


Using non web-safe fonts?


If you want to use a font that is not websafe for items in your CSS, the only real safe way to display them is to use images. You'd need a .GIF or .PNG of your texts and you'd have to insert them into your journal.
This means if you make a typo, you have to replace the image. If you don't like the color, you have to replace the images. Others cannot mark and copy your text, especially frustrating with links.

It gets even worse when you want to create an installable journal skin for others to use. They may not have the font or a program to edit the image of the text with.
The only exception to this may be a link list which contains general elements like "gallery", "blog", "twitter" or "contact" which can be used by anyone. Or the "Comments" link at the bottom of a journal.

Each image also adds to the loading time of the journal, as images load slower than web-safe fonts.

Generally inserting text as images should be avoided at all costs!


Font & Text Properties


I will not explain all properties that can be defined in CSS. Some due to the fact that they are not yet supported on dA others because their usage is seldom and/or unhelpful. Or I will explain them in another tutorial ;) (I am looking at you, shadows. I would prefer to talk about them in general and not only font related at some future tutorial ^^)

Font Properties


Font properties define the look of your text by taking information from the basic font/typeface file; they can change the style and weight of your font and require this information to be contained in the font file. F.e. if your font only comes in one style and does not contain italic or bold, the font-style and font-weight properties may not work or display wrong.

An example of how to write the CSS for font properties:

.gr-box {

font-family: 'Rufina', Georgia, Serif;


font-size: 18px;


font-style: italic;


font-variant: small-caps;


font-weight: bold;


}


The properties explained:

font-family
As explained before, this defines the typeface/font of your element. If you want to use a font that is not "web-safe" or which name consists of more than one word, you need to use '. . .' to make the font name readable. The fallback hierarchy is seperated with commas.

font-size
You can define font-size in px, em or %; or use values from xx-small to xx-large. Em is a relative value depending on the parent element, px is an absolute value.

font-style
This property let's you change your font from normal to italic or oblique, depending on what value is avaiable in the typeface.

font-weight
Let's you change the font from normal to bold. Another option to apply values is to use steps hundreds between 100 to 900, where 400 resembles normal and 700 resembles bold.

font-variant
This makes text display in either normal letters or small-caps.
A lot of font files do not contain small-caps, so it may be wise not to use this. I have seen this very often in use, because the author did not know about the text-transform value.


Text Properties


Text Properties do not require any information form the font file. They apply no matter what is contained in the file. The exception being fonts that only contain one case (upper- or lowercase), but those are usually less applicable and seldomly used.

An example of how to write the CSS for text properties:

.gr-box {

text-align: right;


text-decoration: underline;


text-transform: uppercase;


}


The properties explained:

text-align
This varies between the default left, to center and right.

text-decoration
This property let's you underline text.

text-transform
This let's you define the transformation of letters from the default mix (normal) to either force all letters to be uppercase or lowercase.
capitalize forces the first letter of each word to be uppercase; this is especially common in titles of books/movies and headlines in editorial designs such as newspapers.


Other Properties


Two more properties related to text and fonts are color and line-height:

.gr-box {

color: #000000;


letter-spacing: 0.1px;


line-height: 20px;


}


color
Color requires HEX values in this format: #cc0055. You can also use CSS Color Names.

letter-spacing
This can be added in px or em and increases the space between single letters. It can also be a negative value.

line-height
You can define line-height, the same as font-size, in px, em or %. Traditionally it should be between 120 - 150% of the font-size.


Examples


Here is where I try to create an example that contains most of the properties mentioned before. I used the font Josefin Sans because it contains 10 styles, from thin to bold and italics. Every element uses the same font, only with different property settings.

If a property is not mentioned, it will either be the default value (normal) or the value of the parent element; f.e. the headlines h1 and h2 will both be white, because this value is defined in the parent box.

.box {

color: #ffffff;


font-family: 'Josefin Sans', Century Gothic, Arial Sans-serif;


font-size: 16px;


font-weight: 400;


line-height: 25px;


}

.box h1 {

font-size: 24px;


font-style: italic;


font-weight: 100;


letter-spacing: 5px;


text-align: right;


text-transform: capitalize;


}

.box h2 {

font-size: 18px;


font-weight: 700;


letter-spacing: -1px;


text-decoration: underline;


text-transform: uppercase;


}


The CSS for .box defines the font-family of the whole element as Josefina Sans, with the fallback fonts Century Gothic and Arial, font-size to 16 px, the line-height of 25 px, the font-weight of 400 or "Normal" and the colors as white.

If we want a contained element to have those features, we do not have to rewrite them for that class! We only write down those properties that we want to be different from the parent element.

The first headline h1 will be bigger than the copy text (24 px), it will be in the italic version, a lighter weight (100 or "Thin"), the spacing between letters will be increased to 5 px, it will be right aligned and in the first letter of each word will be a capital letter.

The second headline h2 is smaller than the first headline, but bigger than the copy (18 px), it will be bolder (700 or "Bold"), with an decreased letter-spacing, underlined and in all caps.

Lorem ipsum dolor sit amet


Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet


Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.


:lightbulb: Using CSS to turn text into capitals is much more practical than writing text with caps lock. If you work for a client and they change their minds about text that was written with caps lock, you will have to retype the whole text. But if you do that with CSS, you only have to take out that property once and you're done.
Uppercase should mostly be used for headlines or titles, long texts become very hard to read written in all caps. If something has more than 3 lines, it should probably not be in capitals.

:lightbulb: I recommend not using the underlined property, if you are not using it on links. People are so used to underlined texts being links, they will try to click it. I know, I try everytime! :lol: I usually use this property to remove the underlining from links, and replace with a different styling.

:lightbulb: Be careful with letter-spacing, too little or too much space between letters can make the text harder to read.


Conclusion


  • Make sure the fonts you used in your design actually show up on other people's browsers.
  • Provide a fallback hierarchy, in case a user cannot see a font.
  • Go for fonts with many styles (light, thin, condensed, bold, black, expanded, italic, oblique, bold italic etc.) and use those styles to create variety.
  • Keep it readable! Pay special attention to font-size, letter-spacing and line-height.
  • Avoid duplication in CSS. If you have set a property once for a parent element, you do not have to write it for each element again.
  • Learn the vocabulary ;) or bookmark this CSS reference sheet!


Happy creating :heart: :peace:

Have a suggestion?


Let me know in a comment or a note. I'd love to hear what you want to know and learn. With your input and suggestions this series can continue and grow.

Learn a bit about how to use Fonts in journals and what to pay attention to. What's a fallback hierarchy and why is it important? How do I style my fonts? What is a font-family? and so on and on :D

This one covers the basics, more advanced ones are in the planning :) If there is something you want to know about, let me know and I will add it to future tutorials :la:

I wanted to submit this much earlier, but a bug in the category selection prevented me from submittting to S&R. That has now been fixed and I can submit it as a tutorial now :XD: 


Previous CSS Tricks


:bulletgreen: Limiting .text width
:bulletgreen: Responsive dA?
:bulletgreen: Background Images
:bulletgreen: Article Layout


Any questions? Just ask :eager:

:heart: :peace:
Add a Comment:
 
:iconkakarotcakes:
kakarotcakes Featured By Owner Oct 18, 2016  Hobbyist Digital Artist
None of the google fonts are working for my journal skin? 
I'm using the css tag font-family: 
Reply
:iconsolarxolverite-arpg:
Solarxolverite-Arpg Featured By Owner Aug 9, 2017  Hobbyist Digital Artist
Did you change all?
Reply
:iconpeacefulturmoil:
PeacefulTurmoil Featured By Owner Jun 23, 2016  Hobbyist General Artist
Hello!
I tried to upload my journal skin to Deviantart, but it doesn't seem to work. It is saying the following...
This deviation is incomplete
It will become installable when all the CSS file's relevant images have been attached:

How do I fix that? Here is a link to the journal skin if that helps. Sunrise Mountains
Reply
:iconpica-ae:
pica-ae Featured By Owner Jun 23, 2016  Professional Interface Designer
That message usually appears when you haven't uploaded the images for a skin yet. 
There should be a button and some "empty" elements somewhere on the left side of the page (I haven't uploaded a skin in a while, so it may have moved). I can't see that button, it's only visible to the owner of the deviation.
As soon as all images are uploaded, there should be some green check marks to indicate it worked. 

The .png or .jpg files need to be named exactly like in the CSS or it won't work. 

I hope that helps :)
Reply
:iconpeacefulturmoil:
PeacefulTurmoil Featured By Owner Jun 24, 2016  Hobbyist General Artist
Awesome! It did! 
Reply
:iconpica-ae:
pica-ae Featured By Owner Jun 24, 2016  Professional Interface Designer
Excellent :) 
Reply
:iconpeacefulturmoil:
PeacefulTurmoil Featured By Owner Jun 24, 2016  Hobbyist General Artist
thanks a bunch!
Reply
:iconepelito:
epelito Featured By Owner Jun 10, 2016
hi, i have a question. so when trying to format custom profile widgets obviously you're unable to edit any css file, but im just wondering what is the .css file they use for custom widgets so im able to find out all the different classes (such as "gr-box" from your tutorial) i can use in the widget

i had a look in the .html but there is like 10 links to different stylesheets and im not sure which one would be the one meant for custom widget use

unless there isnt actually one devoted to that ?
Reply
:iconpica-ae:
pica-ae Featured By Owner Jun 10, 2016  Professional Interface Designer
You can actually use CSS in custom widgets, if you use a workaround. On my profile I created "journals" that are posted as art (usually DA related) and those I added as featured deviations widgets on my profile.
People usually refer to that as a "Profile Directory". 

You should check out CustomizeYourProfile, they should have all the answers in one way or another.
I learned most of profile customization in that group :) 
Reply
:iconepelito:
epelito Featured By Owner Jun 10, 2016
oooo true, thanks for the help!
Reply
:iconpica-ae:
pica-ae Featured By Owner Jun 11, 2016  Professional Interface Designer
I am just not as good at explaining these things :P
The people in that group on the other hand know what they are doing.
Reply
:iconshelilla:
Shelilla Featured By Owner Jul 16, 2015  Hobbyist General Artist
May I include some of the information here (with credit, of course) in a font tutorial I'm making?
Reply
:iconpica-ae:
pica-ae Featured By Owner Jul 17, 2015  Professional Interface Designer
Sure, that is not a problem :)
Reply
:iconshelilla:
Shelilla Featured By Owner Jul 17, 2015  Hobbyist General Artist
Thank you! Your tutorial is super helpful, btw :D
Reply
:iconpica-ae:
pica-ae Featured By Owner Jul 29, 2015  Professional Interface Designer
I am glad to hear that! :la: 
Reply
:iconshelilla:
Shelilla Featured By Owner Jul 29, 2015  Hobbyist General Artist
np! :D
Reply
:iconpica-ae:
pica-ae Featured By Owner Jul 30, 2015  Professional Interface Designer
:)
Reply
:iconroguemudblood:
RogueMudblood Featured By Owner Mar 16, 2015   Writer
This was incredibly helpful - thank you so much!
Reply
:iconpica-ae:
pica-ae Featured By Owner Apr 7, 2015  Professional Interface Designer
I am glad it was helpful :) :hug: 
Reply
:iconbrigadierbenchpress:
BrigadierBenchpress Featured By Owner Edited Mar 15, 2015  Hobbyist General Artist
That's great! But, is it possible to work it into Stash Writer? If it is, can you please explain how? Thanks!
Reply
:iconroguemudblood:
RogueMudblood Featured By Owner Mar 16, 2015   Writer
You can also change the font in sta.sh writer using html code.
< font face="algerian">This is only a test</ font>

will result in Algerian font being used. I have only been able to get this to work so far with commonly installed fonts. It has not been working with the Google Fonts.

(Do remember to take out the spaces in the font tags, or it won't work.)
You don't have to switch to HTML mode to use that - it works in the RTE (I tested it.)

This way, you can actually format parts of your story (if you're posting a story) in different ways. So if you have one character writing a letter to another, you can use "brush script mt" where "algerian" is. Just remember the closing font tag at the end of the letter section, or your readers might not be happy with you.

(This does also work for the < font size=#> code as well.)
Reply
:iconbrigadierbenchpress:
BrigadierBenchpress Featured By Owner Mar 17, 2015  Hobbyist General Artist
Thank you! I didn't know you could use HTML coding on Sta.sh writer. Thank you very much!
Reply
:iconroguemudblood:
RogueMudblood Featured By Owner Mar 17, 2015   Writer
Some, yes. You'll want to muck about with it a bit to make sure it displays the way you want, so I'd definitely recommend that preview button. ;)
Reply
:iconbrigadierbenchpress:
BrigadierBenchpress Featured By Owner Apr 23, 2015  Hobbyist General Artist
Thank you again! :D
Reply
:iconroguemudblood:
RogueMudblood Featured By Owner Apr 24, 2015   Writer
You're definitely welcome. :)
Reply
:iconbrigadierbenchpress:
BrigadierBenchpress Featured By Owner Apr 24, 2015  Hobbyist General Artist
:D
Reply
:iconpica-ae:
pica-ae Featured By Owner Mar 16, 2015  Professional Interface Designer
Yes, you can use all this in stash writer by applying a journal skin with whatever styling you prefer :) 
If you are new to journal skins, this tutorial may help you CSS Tricks: Journal break-down, there are also links to other tutorials in the description that may help you. 
Reply
:iconbrigadierbenchpress:
BrigadierBenchpress Featured By Owner Mar 16, 2015  Hobbyist General Artist
Thank you!
Reply
:iconpica-ae:
pica-ae Featured By Owner Mar 16, 2015  Professional Interface Designer
No problem :) 
Reply
:iconbrigadierbenchpress:
BrigadierBenchpress Featured By Owner Mar 17, 2015  Hobbyist General Artist
:D
Reply
:icontophat-queen:
TopHat-Queen Featured By Owner Jan 23, 2015   Digital Artist
You are a saint
Reply
:iconpica-ae:
pica-ae Featured By Owner Feb 1, 2015  Professional Interface Designer
I wouldn't go that far ;) I'm just glad I can be helpful :huggle: 
Reply
:iconmiontre:
miontre Featured By Owner Dec 13, 2013  Hobbyist Photographer
:lol: I use Ubuntu and don't ever see any of the supposed web-safe fonts. :P

Nice article :)
Reply
:iconpica-ae:
pica-ae Featured By Owner Dec 13, 2013  Professional Interface Designer
:O_o: not even Arial? (but yeah, that's a font commissioned by Microsoft, so I wouldn't be surprised if not) What fonts do you have then?

Thank you :hug: 
Reply
:iconmiontre:
miontre Featured By Owner Dec 13, 2013  Hobbyist Photographer
No not even that! :XD: I have default fonts for serif, sans-serif, and monospace. They're actually pretty good replacements, and most people wouldn't notice the difference. I actually like some of them better than their "websafe" equivalents. The strange thing is, Ubuntu comes with hundreds (okay, not hundreds, but a lot) of default fonts. Most of them are serif, some are sans-serif, and a few are monospace; but they look almost all the same to me. You wouldn't be able to tell the difference between a lot of them unless you actually sat down and examined them closely. :P

I've also installed a few fonts from Google Webfonts. :nod:
Reply
:iconpica-ae:
pica-ae Featured By Owner Dec 19, 2013  Professional Interface Designer
Oh yeah, I have a lot of "the same" fonts on Mac, too. Some of them, I think, are Chinese or other Asian languages, but also contain a "basic" Latin Alphabet used to preview them. So the Latin part doesn't really matter and they make it look "the same".

I love google webfonts :meow: I used to download all the shit from dafont, but that phase is luckily over :lol: 
Reply
:iconmiontre:
miontre Featured By Owner Dec 19, 2013  Hobbyist Photographer
Google Webfonts is great! :la: :la:
Reply
:iconpica-ae:
pica-ae Featured By Owner Dec 20, 2013  Professional Interface Designer
I was so excited when I learned dA had them implemented :eager: :la: 
Reply
:iconcality:
cality Featured By Owner Nov 11, 2013  Hobbyist Writer
This is so useful, thanks for providing this tutorial! :love:
Reply
:iconpica-ae:
pica-ae Featured By Owner Nov 11, 2013  Professional Interface Designer
I am glad you like it :aww: Thank you :huggle: 
Reply
:iconcality:
cality Featured By Owner Nov 13, 2013  Hobbyist Writer
You're welcome! :hug:
Reply
:icontehangelscry:
TehAngelsCry Featured By Owner Nov 5, 2013  Professional Interface Designer
:wave: Hey there!
Your tutorial has been featured in my weekly blog: Tutorial Tuesday #24!
I'd love if you could come take a look and offer your support to your fellow tutorial writers :la:
Reply
:iconpica-ae:
pica-ae Featured By Owner Nov 6, 2013  Professional Interface Designer
Thank you :hug: 
Reply
:iconikue:
Ikue Featured By Owner Nov 4, 2013  Hobbyist Digital Artist
:clap: :worship: Magnificent. Brava.
Reply
:iconpica-ae:
pica-ae Featured By Owner Nov 4, 2013  Professional Interface Designer
:blush: Thank you :huggle: 
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Nov 2, 2013  Hobbyist Interface Designer
Wonderful tutorial! :heart: Loving the journal skin as well. :giggle:
Reply
:iconpica-ae:
pica-ae Featured By Owner Nov 2, 2013  Professional Interface Designer
Thank you :) I am glad you like it :la: :hug: 
Reply
Add a Comment:
 
×

:iconpica-ae: More from pica-ae



Featured in Collections


More from DeviantArt



Details

Submitted on
November 2, 2013
Submitted with
Sta.sh Writer
Link
Thumb

Stats

Views
21,750
Favourites
155 (who?)
Comments
47
×