Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Working with lining figures (numbers) and acronyms

From: Typography for Web Designers

Video: Working with lining figures (numbers) and acronyms

In this lesson, we are going to attend to acronyms and lining figures in our text. You need the files biblio_serif_acronyms. html and biblio_serif_acronyms.css from the Exercise folder. You'll also need the Fonts folder with the Chopin Script web font files in it. Drag a copy of your Fonts folder from your desktop into your Exercise folder so Chopin Script continues to load properly. You also need the files biblio_sans_ acronyms.html and biblio_sans_acronyms.css from the Exercise folder because we'll be working with both the serif web page and the sans serif web page in this lesson.

Working with lining figures (numbers) and acronyms

In this lesson, we are going to attend to acronyms and lining figures in our text. You need the files biblio_serif_acronyms. html and biblio_serif_acronyms.css from the Exercise folder. You'll also need the Fonts folder with the Chopin Script web font files in it. Drag a copy of your Fonts folder from your desktop into your Exercise folder so Chopin Script continues to load properly. You also need the files biblio_sans_ acronyms.html and biblio_sans_acronyms.css from the Exercise folder because we'll be working with both the serif web page and the sans serif web page in this lesson.

We will start with the serif web page. Open the serif bibliography web page in the browser to see what we are working with. Scroll down to the second to last resource on the page. We are looking for I Love Typography. Notice that the I-L-T stands out from the rest of the text. Why? Because capital letters are bigger and squarer. We all know that if we email or text in all caps, we are yelling. All caps just feels louder on the page.

We can fix this so the acronyms are more subtle and fit in with the rest of the text. Will this change the meaning of the text or make it more readable? Probably not. Will it make the text more beautiful with a better texture and tone? Yes, it will. So we are going to do it. In the CSS for the serif page, we are going to add a class. I am going to scroll down. So I am near my h tag. I like to keep my classes together, with the text I use them with and we are going to create a class called acronyms and make sure I do our opening and closing curly bracket, and then we are going to make it font-size: 13px.

This is 2 pixels smaller than the text. We are also going to use the text-transform: uppercase. Now, this isn't necessary here because our ILT is already capitalized in the text, but some acronyms may come in as lowercase and they'll need to be capitalized. So we might as well make it part of the class. Also, while we're here I should mention that there is CSS syntax for small caps but I do not recommend that you use it because it does not work across browsers.

It's much better to use a text-transform: uppercase and then make the font size a little bit smaller. Let's save this, and we are going to go into the HTML for our serif web page. We are going to find that ILT down in the bottom of our site here and inside the parentheses because we do not want to change the size of the punctuation, we are going to add a span. I am going to span the class acronyms.

We can save this and we can review it in our browser. Before I refresh it, I am going to make it a little bit bigger so you'll really be able to see the difference when I hit Refresh. Nice. You can see that the ILT is now smaller. I wouldn't reduce the size of the acronym anymore than the 1 pixel or actually the 2 pixels that we've done here, because the 2 pixels is about 13% of the overall font size.

I usually like to hover right around the 10% mark when I'm making changes to size here. If you make the acronyms too small, they will start to stand out because they'd feel too small and too spacious. So now we are also going to look at our numbers. We have some numbers here right under I Love Typography, August 7, 2007, and then also a little later we can see the dates here, the life of Ben Shahn, and these numbers are old-style numbers. We're using Georgia. The old style numbers are designed to look more like lowercase letters.

So they have ascenders and descenders and they blend in with the text. These numbers are great. We don't have to do anything with them. They are not standing out. But you'll find that that's not the case for the sans-serif version of the page. Let's open up our sans-serif version and I'll show you the difference. I am going to scroll down and I'll zoom in a bit and here you can see that the date August 7, 2007 is really jumping out of the text.

This is because PT Sans uses what we call lining figures and the lining figures feel more like capital letters than like lowercase letters. So what we're going to do is we're going to slightly reduce the size of the numbers in our sans serif bibliography. I've already done it here next to Ben Shahn's name. They are a little bit smaller. You can compare them here to the number 14. Let me scroll down a bit and zoom in. I know this is very subtle. But the number 14 is a bit larger than what's happening next to his name.

So what we're going to do is go in and slightly change the size of our numbers. You can see it again here how that really jumps out. We are going to do this in our CSS for our sans- serif. I just wanted to show you in the CSS for the sans serif that I have already created the acronyms class for you. I am using a font-size of .925 em, the text-transform for uppercase, because we're also going to use it for the ILT.

Here, instead of using pixels, I have used ems to define the font-size because we built the page using ems. Classes reference the property they are used with. So the .925 em does not mean .925 of the base font size. It means .925 of whatever font size is being used when you apply the class. So that means that this is .925 of the p font size because we are using this within the p tag.

So that means we are making these a little bit smaller, about 92.5% of the size of the text. This is a little bigger than what we did for Georgia. The class in that file, in the more traditional bibliography using the Serif font, was reduced by 13%. So the acronyms were coming in at about 87% of the font size. I am pointing this out because you need to know there's no mathematical rule for sizing your acronyms. All fonts are a little bit different. Use the measurement that's right for the font.

Again, I started about a 10% reduction in size and then I go up and down from there whenever I need to and whenever I can. So okay, this acronym class is already set. We just need to apply it. Let's go into the HTML for our sans serif bibliography. We are working with the numbers down at the bottom, scrolling down. Here we go! You can see I have already applied the acronyms class to the ILT and I have already applied it to the date here by Ben Shahn's name.

We need to apply it to all the other numbers in the site and this is going to be a little tricky because we need to make sure that we do not apply it to the little bits of punctuation within the numbers, because we don't want the punctuation to get smaller. So what I'm going to do, again I am a big fan of copying and pasting, I am going to find the one down here by Ben Shahn's name, span class="acronyms", and I am going to copy it. I am going to find my first number here. Number 7. I am going to paste it, and then right after the number 7, I am going to end that span.

I need to start it again for the number 2007 and then I need to end it again and then I am going to come down here. Here is the number 14, paste it in front of the number 14, and I am going to end it again. Finally, I happen to know there is a number all the way up at the top I referred to Chapter 6, all the way at the top in the very first resource. Start it, and end it.

I think we've got all of them. Let's go ahead and review this in our browser and you can keep an eye on August 7, 2007 as it gets smaller. I missed an end span tag there. I am going to go back and change that down at the bottom. There it is right after the number 7. Missed my forward slash. Take a look at it again. Although you can see, before I refresh, you can see the difference in the number size here in 2007 versus 7.

Now, I will refresh it and all will be good again. Excellent! So all the numbers are now a good size and they don't yell at us off the page and that's great. Again, will this make the text more legible, more readable? Probably not, but it does make it more beautiful. You've worked really hard to create beautiful type. So it's good to really pay attention to the details.

Show transcript

This video is part of

Image for Typography for Web Designers
Typography for Web Designers

74 video lessons · 13722 viewers

Laura Franz
Author

 
Expand all | Collapse all
  1. 6m 18s
    1. Welcome
      1m 9s
    2. Using the exercise files
      1m 57s
    3. Things to consider before starting this course
      3m 12s
  2. 41m 3s
    1. Understanding how good typography promotes reading
      2m 9s
    2. Understanding legibility
      4m 41s
    3. Understanding how fonts convey meaning
      5m 19s
    4. Choosing web-safe fonts to convey meaning
      6m 13s
    5. Using font size, case, style, letter spacing, weight, and color to convey meaning
      6m 22s
    6. Choosing web fonts to convey meaning
      6m 23s
    7. Downloading web fonts
      4m 9s
    8. Applying web fonts in CSS with @font-face
      5m 47s
  3. 38m 0s
    1. Choosing a web-safe font for use in text
      4m 13s
    2. Applying the web-safe font to the text and the heading
      3m 4s
    3. Setting a class for the resource titles in the text
      3m 45s
    4. Choosing a second web-safe font for the heading
      2m 42s
    5. Applying the second font to the heading
      2m 16s
    6. Choosing a web font from the Google Font API for use in text
      5m 44s
    7. Adding and applying the Google Font API syntax
      4m 29s
    8. Choosing a second web font from the Google Font API for the heading
      2m 56s
    9. Adding and applying the second font to the heading
      4m 52s
    10. Analyzing the fonts on some professional sites
      3m 59s
  4. 55m 31s
    1. Understanding how we read
      4m 34s
    2. Finding and applying a good font size and line height
      4m 50s
    3. Finding and applying a good line length
      8m 6s
    4. Understanding ems
      6m 17s
    5. Using ems to set font size
      6m 9s
    6. Using ems to set line length
      3m 40s
    7. Understanding how color affects readability
      3m 58s
    8. Improving a color palette by improving contrast
      5m 39s
    9. Improving a color palette by reducing optical vibration
      4m 59s
    10. Analyzing text readability on the professional sites
      7m 19s
  5. 1h 11m
    1. Understanding how we "chunk" visual elements
      3m 59s
    2. Developing a system of hierarchy
      2m 17s
    3. Applying hierarchy in HTML and CSS
      7m 16s
    4. Developing a system to help chunk text for readers
      6m 1s
    5. Applying the system in the CSS
      4m 19s
    6. Changing an element by creating and applying a class
      5m 0s
    7. Using multiple columns to create hierarchy
      4m 12s
    8. Building a two-column system in HTML and CSS
      10m 56s
    9. Refining the horizontal space in a two-column layout
      6m 1s
    10. Adding rule lines to improve chunking
      5m 50s
    11. Adding emphasis within a heading
      4m 36s
    12. Analyzing the chunking on the professional sites
      11m 18s
  6. 17m 57s
    1. Understanding classic and modernist typographic pages
      7m 3s
    2. Understanding how to create rhythm and tension
      6m 0s
    3. Applying typography skills when making design decisions
      4m 54s
  7. 55m 47s
    1. Designing typographic links for the traditional page
      5m 54s
    2. Adding a list of links to the traditional page
      8m 44s
    3. Describing the link states in CSS
      6m 30s
    4. Returning links to their original "unvisited" style
      2m 38s
    5. Using different CSS for different kinds of links
      7m 28s
    6. Using CSS notation to organize syntax
      5m 34s
    7. Choosing a background color or image
      4m 0s
    8. Applying a repeating background image
      2m 58s
    9. Shaping the traditional page layout
      6m 38s
    10. Analyzing the traditional typographic elements on the professional sites
      5m 23s
  8. 43m 0s
    1. Designing typographic links for the modernist page
      6m 47s
    2. Making a list of links run across the page
      2m 14s
    3. Adding and removing space between the navigation links
      6m 50s
    4. Styling the inline links on the modernist page
      5m 33s
    5. Choosing a background color or image for the modernist bibliography
      4m 4s
    6. Applying a no-repeat background image
      4m 13s
    7. Shaping the modernist page layout
      6m 58s
    8. Analyzing the modernist typographic elements on the professional sites
      6m 21s
  9. 52m 53s
    1. Fixing quotation marks and apostrophes
      6m 59s
    2. Fixing dashes
      6m 33s
    3. Working with lining figures (numbers) and acronyms
      9m 28s
    4. Fixing characters that don't look right
      8m 19s
    5. Hanging punctuation
      2m 54s
    6. Applying typographic accents
      2m 36s
    7. Vertically centering text
      5m 18s
    8. Creating drop caps
      5m 59s
    9. Analyzing the typographic details on the professional sites
      4m 47s
  10. 3m 9s
    1. Additional resources
      3m 9s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Typography for Web Designers.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.