Shop More Submit  Join Login
×

:iconbradleysays: More from bradleysays


Featured in Collections

News And Journals by AquaQueen27

CSS Help by PirateLotus-Stock


More from deviantART



Details

Submitted on
May 31, 2013
Submitted with
Sta.sh Writer
Link
Thumb

Stats

Views
11,067 (3 today)
Favourites
68 (who?)
Comments
22
×

CSS Did You Know? - May 31st, 2013

Fri May 31, 2013, 1:18 AM

{

CSS Did You Know?

}


Volume 12


:iconcss-dyk:

Welcome

CSS can be difficult when you're unfamiliar to it. So that's why we're writing these articles! If you have any suggestions or would like to write a section in future CSS Did You Know? articles, please note CSS-DYK. :)

Inside

Google Webfonts by im-not-sana
Advanced Typography by LabLayers


:iconim-not-sana:

Google Webfonts



 Hey Devious CSSkinners!

A great part of making an appealing web design, whether its a Website or a Journal article skin, is the Typography. Fonts play a big role in this. Many websites and journal skins had to resort to using common typefaces that were installed on all machines. With CSS3, several websites use the @font-face property to implement the font file in their web pages. As this feature is not available for Journal skins, there is another way to use fancy fonts that dA has allowed to integrate into Journal Skins (it's not yet available for use in Gallery CSS).

Google Fonts are open source fonts hosted on Google's services for everyone to view and use. They will work just about anywhere online: webpages, google documents and presentations. So instead of using the limited fancy fonts *cough*HelveticaNeue*cough* that may not work for everyone, why not try adding a Google webfont to make your Journal Skin or even website look appealing?

Note: Don't include too many different fonts because it'll take longer to load. For example, Ravenswd has provided the complete list of Google Fonts right in this journal, but notice how long it takes to load.

So let's have a look at the Google Fonts page below and the important features it offers:



  1. There's a total of 626 different font families in Google Fonts at the moment, but this number changes as you filter them
  2. This is where you can search for a specific font family if you know what the font begins with or by the Name of the Creator of certain fonts
  3. You can narrow down the font families with all the different filter options:
    • Serif - Characters that have lines at the edges
    • Sans Serif - Characters that don't have the lines at the edges
    • Handwriting - Characters that look handwritten in print or cursive
    • Display - Monospaced characters where I think they each have the same width
  4. You can display all styles in the font family if any, for example, Normal, Italic and Bold
  5. There's many options in the Preview of Fonts
    • By Word, Sentence, Paragraph or Poster format. This makes it easier for you to decide if you want the font for your Headers or Paragraph text
    • You can change the preview text, even add your own specific text to help you decide
    • Change the size of the font
    • Order the fonts by Popularity, Alphabetical order, Newest, Trending fonts and by font families with the most number of styles to least
  6. You can then quickly Add the fonts you like to your Collection for later use
  7. This is the part where the fonts are all collected for you to bookmark, download, import to your website and the code to integrate into your CSS when you click on Use




Here you can see a collection of my favorite fonts from each Category (Serif, Sans Serif, Display, Handwriting) with all the different Styles (Normal, Bold, Italic), if any. But to integrate the font into our skin, what we want to do is skip until number 4 to include into your Journal Skins.



As you can see in the figure above, all you have to do is copy paste the CSS under whichever selector you want to use the font for. Here's a working example:

CSS


h1 {
font-family: 'Amaranth', sans-serif;
font-size: 20px;
font-weight: 400;
font-style: normal;
font-variant:normal;
}


HTML


<h1>The quick brown fox jumps over the lazy dog.</h1>

OUTPUT


The slick brown rocks humps over the crazy log.


Now there's a few things to keep in mind when integrating a font into your CSS.

CSS Font Properties


font-family


font-family: 'Amaranth', sans-serif;

The font-family property should have a generic family as a fallback system. If the browser does not support the first font (or takes time to load that one), it shows the next font as plan b. This font should be something that all machines have pre-installed in their systems.

CSS:
font-family: 'Lobster', cursive;

Output:
This is some fancy text.


font-size


font-size: 16px; | font-size:12pt | font-size:1em; | font-size:100%;


Basically you can either fix the size of your font in pixels, points, em or percentage:
  • Pixels are fixed-size units used for screen media. One pixel is equal to one dot on the computer screen resolution so this allows for pixel perfect representation. The problem with the pixel unit is that it does not scale upward or downward to fit mobile devices.
  • Points are traditionally used in print media, such as documents that need to be printed on paper. One point is equal to 1/72 of an inch. Points are also fixed-size units and cannot be scaled.
  • The good thing about "em" is that it's a scalable unit that is popularly used in web document media due to their mobile-friendly nature. An em is calculated by the current font-size. Most browsers default font-size is 16px, so 1em is equal to 16px or 12pt, 2em would equal 24pt, .5em would equal 6pt, etc.
  • The percent unit is similar to the "em" unit. The current font-size is equal to 100%, so 16px = 100%. While using the percent unit, your text remains fully scalable for mobile devices if the user increases or decreases their default font-size percentage.


font-weight


font-weight: 400; | font-weight: normal;


This is basically the thickness of the letters and characters. The property values start from lighter, to normal, to bold, to bolder. Or you can define their value by numbers from 100 - 900.

100 = lighter

200

300

400 = normal

500

600

700 = bold

800

900 = bolder


You have to make sure if the font family you're using even has the different weight styles. Look at the at the end to find these easily.

font-style


This specifies the font style for text such as normal or italic and inherit can be included in here so that the font uses the style from the parent element.

font-style: normal;
font-style: italic;


font-variant


This is used if you want your text to be displayed in a small-caps font or not

font-variant:normal;
font-variant:small-caps;


font


font: font-style font-variant font-weight font-size/line-height font-family;

Sets all the font properties in one declaration with that order but it may get confusing so it's probably better to declare them separately.

CSS:
font: italic small-caps 400 32px 'Exo';

OUTPUT:
This text has ALL the properties! :iconallthethingsplz:



Anyway, think that's about it! Here's a cool link dhik-a showed me to help you narrow down the Google font families that have ALL styles:



So what are some of your favorite Google webfonts? :la:


:iconlablayers:

Advanced Typography



If you want even more options to customize your fonts, you're in luck! In this section, I will demonstrate some of the many properties you may use to customize your fonts:

The Basics


Let's start off by changing the text color. It's as simple as picking a color!
Code: h1 { color: red; }
Example: IMPORTANT: The contest will end tomorrow!

Next, we'll change the background with. This is great for highlighting content.
Code: h1 { background:yellow; }
Example: Limit 1 (one) entry per person.

Now, if you want to use a dark background, it is probably a good idea to have lighter color text (and vice versa.)
Code: h1 { background:black; color:white; }
Example: The skunk stole the squirrel's acorn from the den.

Text Decoration


The text-decoration property allows you to put lines above, below, and through your text.

The overline is great for people who like gravity backwards! ;)
Code: h1 { text-decoration: overline; }
Example: I want to buy a one-way ticket and fly to Pluto in a starship.

The strikethrough effect can be achieved by using the <s> tag.
Code: h1 { text-decoration: line-through; }
Example: Commission slot 7: OPEN!

The underline effect can be achieved by using the <u> tag.
Code: h1 { text-decoration: underline; }
Example: The Hunger Games by Suzanne Collins

You can also combine multiple text decorations to form a cool handwriting-grid effect.
Code: h1 { text-decoration: overline line-through underline; }
Example: You think I'm paranoid but I'm just complicated.

(not recommended) If you're feeling nostalgic, there's also the obsolete <blink> effect that works only in older browsers!
Code: h1 { text-decoration: blink; }
Example: I am an eye blinking at you.

Text Transformation


Sometimes, you even may want to edit text capitalization in bulk or force all uppercase letters to show up for emphasis. That's where text-transform comes in.

Capitalize capitalizes the first letter in each word.
Code: h1 { text-transform: capitalize; }
Example: The quick brown fox jumped over the lazy dog.

Uppercase forces every single letter to appear in their uppercase form.
Code: h1 { text-transform: uppercase; }
Example: The quick brown fox jumped over the lazy dog.

Lowercase forces every single letter to appear in their lowercase form.
Code: h1 { text-transform: lowercase; }
Example: The quick brown fox jumped over the lazy dog.

(not recommended) Full-width forces every single letter to appear in their full width form. It is currently rolling out in  major browsers and is not yet fully available for everyone. Some Windows XP users may see boxes instead of text.
Code: h1 { text-transform: full-width; }
Example: The quick brown fox jumped over the lazy dog.

Letter Spacing and Line Height


These two CSS properties will allow you to manipulate space between letters and space.

If you want to space out individual letters, letter-spacing will do the trick!
Code: { letter-spacing: 2px; }
Example: I live in a mansion. Lots of room to run around here!

Additionally, you may use the negative-spacing attribute to squeeze in individual letters.
Code: h1 { letter-spacing: -2px; }
Example: I am a pack rat. I like to squeeze myself inside any small box I can find!


You can use line-height to space out individual line. Refrain from using a line height smaller than your font-size. Below is an example of line-height being used to achieve double spacing.
Code: h1 { line-height: 2em; }

Example: Cotton candy caramels cupcake marzipan I love bear claw powder chupa chups tiramisu. Cheesecake brownie cupcake chocolate lemon drops I love oat cake chocolate bar donut. Chocolate candy sugar plum gummi bears. Lollipop cheesecake faworki muffin ice cream powder. Toffee halvah apple pie fruitcake caramels fruitcake I love lemon drops. Macaroon fruitcake halvah pudding. Oat cake biscuit pastry halvah. Lollipop carrot cake dragée bonbon. Wypas wafer dragée carrot cake applicake bonbon bear claw powder wafer. Gummi bears I love gummies faworki.


Documentation - if needed


Color: You can use a name, hex code, or rgb value.
h1 {color: red;} will give you red text.
h1 {color: #4da400;} will give you green text.
h1 {color: rgb(142, 68, 173);} will give you purple text.

Background: You can use a name, hex code, or rgb value. If you have a dark background, you may want to use a lighter color for text.
h1 {background: yellow;} will give you a yellow background.
h1 {background: #d8ffc4;} will give you a light green background.
h1 {background: rgb(142, 68, 173); color:white;} will give you a purple background with white text.

Text-decoration: You can use one of four effects. Combinable.
h1 {text-decoration: overline;} will give you a line above text.
h1 {text-decoration: line-through;} will give you a line through text.
h1 {text-decoration: underline;} will give you a line under text.
h1 {text-decoration: blink;} will give you blinking text. This is no longer supported!

Text-decoration: You can use one of four effects.
h1 {text-transform: capitalize;} will give you words with capital letters.
h1 {text-transform: uppercase;} will give you all uppercase letters.
h1 {text-transform: lowercase;} will give you all lowercase letters.
h1 {text-transform: full-width;} will give you all  full-width  letters. This is not yet fully supported!

Letter-spacing: You can use positive or negative values. Supports px, pt, and em.
p {letter-spacing: 2px;} will give you 2px of space between letters.
p {letter-spacing: 2pt;} will give you 2pt of space between letters.
p {letter-spacing: 1em;} will give you double spacing between letters.

Line-height: You can use positive or negative values. Supports px, pt, em, and %.
p {line-height: 40px;} will give you a line height of 40px.
p {line-height: 40pt;} will give you a line height of 40pt.
p {line-height: 2em;} will give you double spacing.
p {line-height: 200%;} will give you double spacing.

The <font> Tag


Additionally, you will be able to customize your fonts without a premium membership using the <font> tag:
Code: <font face="Times New Roman" size="5">This text is in Times New Roman! font>

Example: This text is in Times New Roman!



Notes


Here is the CSS used for this tutorial:
/* Tutorial Styles */
.css.color-red{color:red;}
.css.color-white{color:white;}
.css.bg-yellow{background:yellow;}
.css.bg-black{background: black;}
.css.deco-overline{text-decoration: overline;}
.css.deco-thru{text-decoration: line-through;}
.css.deco-underline{text-decoration: underline;}
.css.deco-blink{text-decoration: blink;}
.css.deco-all{text-decoration: overline line-through underline;}
.css.trans-capitalize{text-transform: capitalize;}
.css.trans-uppercase{text-transform: uppercase;}
.css.trans-lowercase{text-transform: lowercase;}
.css.trans-full-width{text-transform: full-width;}
.css.space-neg2{letter-spacing: -2px;}
.css.space-2{letter-spacing: -2px;}
.css.lh-double{line-height: 2em;}

/* Journal Styles */
.css.color-purple{color: rgb(142, 68, 173);}
.css.color-green{color: #4da400;}
.css.bg-purple{background: rgb(142, 68, 173);}
.css.bg-green{background: #d8ffc4;}
.css.lh-40{line-height: 40px;}


Add a Comment:
 
:icondevilishdb:
DevilishDB Featured By Owner Jun 1, 2013
Great article! You could've also mentioned that the font tag is not part of html5 any more, but since it still works it's not too important. Also in css you can use the font property to set everything in one tag, and also with the background you can use background-color if you want to set other properties for the background.
Reply
:iconim-not-sana:
im-not-sana Featured By Owner Jun 1, 2013  Hobbyist General Artist
Thanks for your feedback but I did mention at the end that in CSS you can declare them all under font :)
Reply
:icondevilishdb:
DevilishDB Featured By Owner Jun 2, 2013
sorry! I missed it ;)
Reply
:iconim-not-sana:
im-not-sana Featured By Owner Jun 2, 2013  Hobbyist General Artist
No worries, very easy to miss in my TL;DR post :D
Reply
:iconlablayers:
LabLayers Featured By Owner Jun 1, 2013  Student Interface Designer
Thanks for your feedback, we'll take all this into consideration when we write out future articles! ;)
Reply
:iconkalteeinsamkeit:
KalteEinsamkeit Featured By Owner Jun 1, 2013  Hobbyist Digital Artist
Thanks for this! Can't wait to try it out on my next skin commission! :iconstarelaplz:
Reply
:iconmiontre:
miontre Featured By Owner May 31, 2013  Hobbyist Photographer
Awesome! :D
Reply
:iconlablayers:
LabLayers Featured By Owner Jun 1, 2013  Student Interface Designer
:party:
Reply
:iconastrikos:
Astrikos Featured By Owner May 31, 2013   General Artist
:la: Google webfonts is awesome.
Lovely work `im-not-sana, ^ladygagz, and ~LabLayers
Reply
:iconlablayers:
LabLayers Featured By Owner Jun 1, 2013  Student Interface Designer
:squee:
Reply
Add a Comment: