Making Textual Webpage Content Responsive

Transcription

1 Making Textual Webpage Content Responsive Web page content can be quickly broken down into the following categories: 1) Textual Information 2) Image based information 3) Video information i.e. videocasts 4) Audio information i.e. podcasts That said, by and large textual content on a web page, is normally much greater than any of the other web page content categories. Web page, textual information is delivered aesthetically to the site visitor by appropriately styling the web page font using its font attributes some of which are indicated below: Font-family Font-size Font-weight Color To fit the web page content displayed. Typography is therefore an important aspect of responsive web design. Optimizing fonts to display appropriately on mobile devices with widely varying viewports is an absolute necessity. Fortunately today making sure that web page content is displayed aesthetically across a host of screen sizes ( i.e. viewports) is not very difficult. Responsive Web Page Textual Content The fonts used to display web page content must resize appropriately when the display screen size changes. The size of the web page font is determined by the value that is passed to the font-size attribute in the web page s CSS style sheet. i.e. As the display screen size reduces, the font-size should appropriately reduce, while continuing to deliver site visitor, readable / legible, textual content. Different units of measure can be used to define font-size, such as pixels, ems, rems, or percentages. Choosing the right unit of measure, when defining font-size, is fairly important for delivering responsive textual webpage content to site visitors accessing the website using different devices. Using the right unit of measure to define font-size, helps a great deal in ensuring the fonts used for the display of webpage content behave responsively. i.e. When being displayed on small display screen sizes they reduce while maintaining readability / legibility, and when the screen size increases they increase proportionately. This material explains how to craft and manage responsive web page textual content. Let s look at how pixels, ems, rems, or percentages can be used to define font sizes on a web page whose textual content is expected to behave responsively. 1

2 Pixels For a long time, pixels have been the unit of measure preferred by web designers when specifying font-size simply due to the precision and accuracy in which the font-size could be defined. Regretfully, once the pixel is chosen as the unit of measure to define font-size, the font-size will remain exactly the same across all devices and Browsers irrespective of their screen size ( i.e. viewport). Hence, while the unit of measure pixel offers very precise control over font-size, its precision actually prevents responsiveness in fonts. Most programmers use a Cascading Style Sheet in which they set font-size in the HTML and/or BODY tags and then they override this font-size wherever necessary across the web page. That is because the font-size set in the HTML and/or BODY tag(s) is inherited across the entire web page. Wherever web page content font-size must change, for example in page and/or paragraph headlines, the headline is bound to a specific ID or CLASS in the CSS file which has the appropriate font-size defined, which overrides the default font-size specified in the HTML and/or BODY tag. When font-size is specified with this level of precision the display of web page content will not be automatically responsive when being read on different screen sizes ( i.e. especially on smaller view ports such as mobile devices and tablets). Today, multiple devices with varying screen sizes, as well as varying screen pixel densities, can be used to view the very same web page. For example, iphones, Android phones, Tablets, Net books, Note books, Laptops, Desk tops and so on, each with their own screen size and screen pixel density. Hence, attempting to define web page textual content font-size in pixels, thus ensuring one font-size for such a large range of screen sizes and screen pixel density, goes contrary to the responsive font approach. Today, in Browsers that support CSS3, (i.e. most modern mobile Browsers do) the web developer can use mediaqueries to change the default font-size specified in the HTML and/or BODY tag and headline font sizes used across the web page to deliver responsive textual web page content. CSS3 media-queries are bound to the horizontal pixel width of the display device s screen size. Hence, appropriate media-queries can be crafted that would fire as the Browser senses the reduced or enlarged device display screen size. Simply override the HTML and/or BODY tag default font size and the headline font-size within each media-query and the fonts used to display web page content will behave beautifully responsive and readable on multiple devices with various display screen sizes and pixel density. 2

3 Em Let s consider using the unit of measure em for defining font-size. em is a metric used for defining font-size that is based on pixels, i.e. 1em = 16px. Fortunately font-sizes specified in em are resizable in all Browsers. Hence, it s not necessary to set a specific value for the font-size of different HTML elements, such as H1 to H7, p, and so on once a base font-size has been declared in the HTML and/or BODY tag(s). These font-sizes will naturally cascade based on the parent font-size specified and the font-size declarations within the default font-size declaration in HTML and/or Body tag(s) and in turn be bound to the H1 to H7, p, tags via the Browser s rendering engine. Working with the metric em has some pros and cons to consider. While declaring font-size in em in a parent tag such as HTML and/or BODY makes the maintenance of the textual content of a webpage easier, this could actually hinder a developer who is seeking control, precision, and predictability with their fonts. Fortunately, this problem is easily resolved by using the same font-size for the most of the textual content of a webpage and changing the font-size of a few specific text elements as required by the aesthetics of the webpage using an ID or CLASS. Percentage Percentage is another unit of measure that can be used for defining responsive font-sizes. Theoretically, there is not a big difference between percentage and em. Both are malleable units of measurement for font-size. What is important is being decisive about which metric (i.e. unit of measurement) will be used throughout the web page font-size definitions. One should not use em when declaring the font-size of certain web page elements and use percentage for others. A simple way to rule out percentages is to simply make the following site wide CSS declaration: body font-size:100%; After which make all font-size declarations in em. This effectively overrides any Browser defaults or other unwanted percentage declarations, and leaves font-size declarable in other units of measure. In this case, the font-size of the web page content could be em. 3

4 Rem Rem is another metric used for declaring responsive font-size. The rem unit (i.e. Root EM) has a behavior similar to that of em with one important difference. rem is a unit of measure used to declare the font-size of a parent element such as HTML and/or BODY tag. This important difference makes it possible to solve many problems that occur with responsive font-size declaration in nested elements, such as declaring a font-size for H1 to H7 and/or p within nested DIV elements. Unfortunately the nested textual material will take the percentage or em of its parent DIV as the reference font-size. Hence the H1 to H7 and/or p elements may have different sizes across the webpage leading to a lack of visual aesthetics. Declare font-size in rem in the HTML and/or BODY tag(s) as the web page textual control size. Then declaring font-size for all other elements as percentage (or rem) helps correct the nested container, font-size issue. NOTE: All modern Browsers (and modern Mobile browser versions) recognize rem. Use Media-Queries Never forget the power of using well crafted (i.e. carefully thought through) media-queries. Today, all web developers can create aesthetically pleasing web pages with beautifully responsive textual web page content using appropriate media-queries. When the media-query bound to the display s horizontal width fires, appropriate font-size declarations defined in IDs or Classes in the CSS3 style sheet will be automatically applied to textual content within the webpage. This delivers beautifully responsive, textual web page content, which is perfectly legible across different display sizes and pixel densities. NOTE: What follows is an example of how to: Use a custom font face in your web page Declare specific values for font-size Then override these values within the media query section normally located right at the end of the CSS file Here is a CSS code snippet that hopefully describes how to ensure that your textual webpage content is responsive, yet stays legible, across a wide range of display screen sizes. 4

5 Importing and using a custom font face. NOTE: In this specific case the custom font face has been downloaded and saved to a folder named /fonts on the web host used for the website. /* Importing Fonts STARTS font-family: 'Roboto Slab'; font-style: normal; font-weight: 400; src: url('../font/roboto_slab.woff') format('woff'); /* Importing Fonts ENDS */ /* HTML Tags STARTS */ body font-size:1em; font-style:normal; line-height:normal; color:#000000; background-color:#ffffff; h1 h2 h3 font-size:2rem; letter-spacing:1px; font-size:1.8rem; letter-spacing:1px; font-size:1rem; 5

6 h4 h5 p font-size:1rem; font-style:italic; letter-spacing:1px; font-size:0.75rem; letter-spacing:1px; font-size:0.85rem; letter-spacing:1px; /* HTML Tags ENDS */ A sample for Media Queries that you can use to override the font-size (or any other font attribute) depending on the display size of the device. /****************************** Media Query STARTS *********************************/ /* Large desktop (min-width: 1200px) /* tablet - landscape (max-width: 1024px) /* Landscape phone to portrait tablet (max-width: 767px) 6

7 /* Portrait tablet to landscape and desktop (min-width: 768px) and (max-width: 979px) /* Landscape phones and down (max-width: 480px) /* mobile phone (max-width: 320px) /* mobile (max-width: 240px) /****************************** Media Query ENDS *********************************/ Choosing Fonts for Your Responsive Website Mobile Safe Fonts Arial/Helvetica Courier/Courier New Georgia Times/Times New Roman Trebuchet MS Verdana NOTE: Unfortunately, if the webpage on which these fonts are used must be responsive, this list does not apply at all. Browsers that run on Android devices are still replacing the fonts specified above with either Droid Sans or Droid Serif (depending on the font type). So, what s to be done then? The New Web Safe Fonts: Custom Fonts Honestly using these visually boring Web Safe Fonts are over. Here s the thing, use any font you wish on a web page and it will be web safe, as long as you have the permission (license) to use it and the font face is implemented correctly within the web page. 7

8 It s really a designer s dream, I believe so. Now before you flip out on your web page typography, let s take a quick look at how to embed custom fonts within a web page This is the most tried, tested and trusted way to implement custom fonts within a web page. All web font service providers are built on this CSS property. The CSS is now supported in all modern web Browsers. Here is an example code font-family: 'Roboto Slab'; font-style: normal; font-weight: 400; src: url('../font/roboto_slab.woff') format('woff'); The value passed to the font-family attribute ('Roboto-Slab') will be the font name bound to the font. Notice the single quotes used, this is because two words have been used in the value passed to the CSS3 attribute font-face. The src attribute informs the Browser s CSS processor where the font face is physically located. In this specific case the font-face has been downloaded and stored in a folder named /font on web server (web host) that delivers the website. The font-style and font-weight attributes are optional really, load these attributes with appropriate values or omit them as you see fit. Normally it s a good idea to call the font right at the start of your CSS file and immediately below set the default font for the web page in either the HTML and/or the BODY tag(s). We normally set the default font for the web page in the BODY tag. For example: /* Importing Fonts STARTS font-family: 'Roboto Slab'; font-style: normal; font-weight: 400; src: url('../font/roboto_slab.woff') format('woff'); /* Importing Fonts ENDS */ 8

9 /* HTML Tags STARTS */ body font-size:1em; font-style:normal; line-height:normal; color:#000000; background-color:#ffffff; NOTE: If you take a quick look at the above CSS code snippet you will notice that the font-style and font-weight attributes declared in call have been overridden in the BODY tag. Hence, these attributes can be happily deleted in declaration. Web Fonts Service Providers Using a web fonts service provider is the best way to implement custom fonts in your responsive web design project. You don t have to deal with hosting bandwidth or font licensing nor be concerned about the security of the font-face when it s on your web host. Here is a short list of Web fonts service providers: Fonts.com - The Web Fonts service from Fonts.com has been around for several years now. Fonts.com has improved much since it started. The website underwent thorough redesign recently. Web Fonts service also received a huge upgrade to its UI and UX, it certainly feels like it s not in beta anymore. Some great looking fonts at Fonts.com Adobe Jenson Avenir Bickham Script Clarendon LT Frutiger Futura Goudy Text ITC Bodoni Six Kepler Univers 9

10 Typekit by Adobe - Typekit were the guys that delivered web font first if I remember correctly. They were acquired by Adobe back in Typekit is a favorite among many web designers. Google Web Fonts - Google is still my favorite amongst all web font providers. Its ease of use and reliability is second to none. Our responsive websites are built using Google Web Fonts. Some great looking Google Web Fonts Arvo Bitter Cinzel Condiment Gentium Book Basic IM Fell English Libre Baskerville Lobster Oleo Script Swash Caps Open Sans Pacifico PT Sans Raleway Vollkorn Use Awesome Webpage Typography Now that you ve learned how to access and use amazing web fonts you should be able to create responsive web pages with great typography. Please do share your thoughts / critique on web page typography in the comments section below. 10