CSS Typography and Font Styling
Nerds. We always strive to stay on par with the ever-evolving computing technology at a pace which many can't withstand. Now it is an exciting time to familiarize ourselves with the modern CSS tips and tricks that are available and at our disposal. After years of what felt like same old techniques for the same old browsers, we are finally seeing browser implementation with HTML 5, CSS 3, and other technologies, which give developers cool new tools and tricks in their designs.
We’ve looked closely at display:none; CSS3, using CSS Syntax for web design, some basic tips and tricks, and vertical content alignment. Now, in our sixth and final post in this series, let’s wrap this up by gaining an understanding of modern CSS typography and font styling.
In this guide, we are going to put the primary focus on the design trends and styles which characterize the modern CSS-based layouts, as well as the broad underlying concepts that you need to comprehend, in creating the most successful CSS layouts.
Modern CSS: Underlying Concepts
Typically, a modern CSS-based website is progressively enhanced, modular, efficient, and adaptive to diverse users.
Progressively enhanced. This means creating a solid page with the appropriate markups for the content and adding the advanced stylish to the page for the browsers that can handle it. The result is the creation of web pages that are usable by all browsers, but do not look identical in all browsers. This concept brings about more robust pages, happier users, reduced development time as well as reduced development time, and more fun.
Modular. The modern day modular pages are no longer collections of static pages. Pieces of content and design components are reused throughout a website and even shared between the websites. This makes the pages adaptable in different places depending on the use and type of the information which they contain. Use of modular CSS has benefits such as smaller file sizes, reduced development time, reduced maintenance time, easier maintenance for others, and more consistent design and flexibility.
Efficient. The modern based CSS websites should be both efficient for you to develop and efficient for the server and browser to display to the users.
Adaptive to diverse users. The modern web pages that are powered by CSS should be able to accommodate the diverse range of browsers, devices, font sizes, screen resolutions, and the assistive technologies. This concept is growing quickly as web users are becoming increasingly diverse.
Modern CSS: Design Trends, Tricks, and Tips
There are six main trends that are helping designers create outstanding CSS effects. These include box model, floated columns, sizing using ems, image replacement, floated navigation, and sprites.
Box Model. At the center of modern web applications development is the box model. You may know your margins and padding, but that which happens when elements start to interact with each other is a different scenario. A good box model involves understanding the difference between quirk mode and strict mode. In fact, you need to have an understanding of the box model, Tantek's box model hack, quirks mode and strict mode, and activating the correct layout mode by the use of doctype declaration.
Floated Columns. Floating concepts is what has opened the doors to replace the table-based layouts. A developer should learn how to float and how to clear floats so that content that follows appears correctly. Understanding this trick requires prior knowledge of floatorial, clearing floats, faux columns, and creating liquid faux columns.
Sizing using Ems. When it comes to sizing using ems, we put into consideration the fonts and layouts. By use of fonts, we allow to resize the text using specified pixels. Layouts allow more flexibility. Styling elements by use of ems allow containers of content to grow along with text and maintain the consistency of design.
Image Replacement. Any boring text elements do not excite neither the developer nor the user. Users want graphical flairs along with gradients and glass effects. Image replacement tricks allow us to replace the existing content-rich and SE0 friendly text with stylish images or flash files with embedded fonts.
Floated Navigation. If you have the mastery of floating columns, the other tricky part that you need is the mastery of using floated navigation. You need to have an understanding of listamatic and sliding doors.
Sprites. Just like the video games, packing multiple images into one single image has become a popular technique in the modern CSS. This reduces the number of requests a browser has to make while at the same time improving the time that is required to download all files from your server.
Hopefully you’ve gained some useful knowledge from reading our CSS Tips and Tricks series. Our next series will build on our Microsoft's Entity Framework blog.