literature

CSS Tricks: Fonts and Text Basics

Deviation Actions

pica-ae's avatar
By
Published:
30K Views

Literature Text

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:
© 2013 - 2022 pica-ae
Comments51
Join the community to add your comment. Already a deviant? Log In
CalamityWinter's avatar
This is probably stupid to ask 

But I'm trying to change the "title" "header" and "subtitle" text color in journal skins and I'm not sure what the code is for that - ; ; I'm a beginner and it's just confusing. Are you able to help??
Example on what I'm trying to change, I just don't know how ugh..

Capture by AlyMarieB