![\"\"](\"http:\/\/116.62.123.213\/wp-content\/uploads\/2019\/07\/basic-tips.jpg\")
<\/figure>\n\n\n\nWith web\nfonts natively supported in almost all browsers, and more and more\ntypographic features being implemented in the latest versions of HTML and CSS,\na bright new era of increasingly sophisticated web typography is upon us. This\nmeans web designers need to get (re)acquainted with the rules of classic\ntypesetting \u2013 but it doesn\u2019t end there.<\/p>\n\n\n\n
Whereas\nprint typography is static, web typography is a fluid medium. More than simply\nlearning how to achieve a specific look, designers have to\ntackle responsive typography, and be able to predict the end result across\ndifferent browsers and devices. Here are some of the basic dos and don\u2019ts of\ntypography, specifically applied to the web.<\/p>\n\n\n\n
01.\nFind out what your fonts can do<\/p>\n\n\n\n
Check\nyour font has all the characters and features you need<\/p>\n\n\n\n
The\nvery first thing you must do is check the capabilities of the fonts you are\ngoing to use. All fonts are created equal, but some fonts are more equal than\nthe others. Unicode encoding means fonts can hold literally tens of\nthousands of glyphs, and the OpenType font format supports numerous\nfeatures like small caps, old style numerals, discretionary ligatures and\ncontextual alternates.<\/p>\n\n\n\n
Yet any\nfont is only as good as the type designer who built it. What use are all those\ntypographic niceties if the designer neglected to draw the necessary characters\nor failed to code the relevant features? Creating professional fonts takes an\nenormous amount of time and effort, and some designers are not prepared to go\nall the way.<\/p>\n\n\n\n
This is\nwhy it is very important to check the character set and the features of a font before\nincorporating it in your web design. A font is like a toolbox; if a crucial\ntool is missing, you won’t get far \u2013 if there is a screwdriver, a saw and\npliers but no hammer, not a lot of hammering will get done.<\/p>\n\n\n\n
02.\nSubset cleverly<\/p>\n\n\n\n
Font\nfallbacks happen on a character by character basis. As soon as character is\nmissing in the specified font, the fallback system will use the corresponding\ncharacter from the next font in the list, then switch back to the original\nfont. <\/p>\n\n\n\n
This\ntechnique can be used in an unconventional way with surprising results. If, for\nexample, the character set of a font has no old style figures, find a\ncorresponding font that has them. Subset it, leaving only the desired numerals,\nand put it first in the fallback list. All numerals in the text will then be\nset in that old style figure subset, and the rest of the text in the regular\nfont. This prevents you from having to format numerals separately and keeps\nyour text file clear of unnecessary HTML tags.<\/p>\n\n\n\n
03.\nFigure out numerals<\/p>\n\n\n\n
Most\nprofessional quality fonts have several sets of numerals, each with a specific\nuse. For example:<\/p>\n\n\n\n
Tabular: Each\ncharacter occupies the same amount of space, so they will line up in vertical\ncolumns<\/p>\n\n\n\n
Proportional: Character\nwidths vary according to their design<\/p>\n\n\n\n
Old\nstyle: Figures mimic the lowercase characters with an x-height, ascenders\nand descenders; blend perfectly with mixed-case text<\/p>\n\n\n\n
Lining:\nMeant to be used in numerical matter or in combination with all-caps text<\/p>\n\n\n\n
04.\nDon\u2019t fake styles<\/p>\n\n\n\n Typeface:\nFF Ernestine by Nina Stoessinger<\/p>\n\n\n\n CSS\nenables you to fake a number of things. If there is no bold variant of your\nfont the <b> tag will artificially embolden the text by\nrendering it double with a slight lateral translation. Applying\nthe <i> tag to a font without an italic style will digitally\nslant the characters. The resulting distorted letters invariably look dismal.\nGenerally speaking, you want to define all your text formatting in the CSS\nfile, and avoid local character formatting as much as possible.<\/p>\n\n\n\n 05. …\nbut when you do, fake well<\/p>\n\n\n\n Faking\nsmall caps when they are missing in the character set always makes them look\ntoo thin by comparison with the surrounding text. When the type family has a\nsemi-bold variant, or the difference between the regular and bold weight is\nmoderate, use that bolder weight for the small caps to adjust the darkness of\nthe text. Don\u2019t forget to give the small caps a little extra character space.<\/p>\n\n\n\n 06. Be\ncareful with copy-pasting text<\/p>\n\n\n\n You can\nsometimes find words in web pages with illegible character strings where there\nshould have been an accented or other special character. This occurs when text\nis copied from text editing software using a character encoding other than\nUTF-8. Character encoding systems map all glyphs in a given character set to\nfacilitate the transmission of data (generally numbers or text) through\ntelecommunication networks or for data storage.<\/p>\n\n\n\n As HTML\nworks with UTF-8 it will misinterpret copy-pasted text from any other encoding\nsystem, turning specific characters into bizarre combinations of random letters\nand signs. Furthermore certain content management systems will not only copy\nthe text but also the formatting, causing unpredictable results. The best way\nto avoid this is to convert the copied text to text-only format in a simple\ntext editor, then copy it from there and paste it into the CMS.<\/p>\n\n\n\n 07.\nLearn your HTML entities<\/p>\n\n\n\n Typeface:\nFF Spinoza by Max Phillips<\/p>\n\n\n\n Looking\nat your keyboard, you may not realise what a wealth of characters is available.\nMany of them are defined by HTML entities, so it is a good idea to\nmemorise the most common ones and have an overview handy when typesetting for\nthe web. <\/p>\n\n\n\n A\nlowercase x is not the same as a multiplication sign, the trademark sign is not\nsimply a raised capital T and M, and a floating acute accent will not do for an\napostrophe. For more detail on this, take a look at our article\non typographic mistakes everyone makes. <\/p>\n\n\n\n 08.\nDefine relationships, not absolute dimensions<\/p>\n\n\n\n A big\nadvantage of text on the web is that it can be resized by the user. If text is\ndefined in pixels, resizing a web page may cause discrepancies in the relative\nsizes of the different text styles and, for example, body text may end up\nbigger than the headlines. It is crucial for all text sizes to be defined in\nems in relation to the standard body text size. This ensures that all text in a\nweb page is resized accordingly, respecting the relationships between the\ndifferent text sizes.<\/p>\n\n\n\n 09.\nTake control over line breaks<\/p>\n\n\n\n Typeface:\nFF Spinoza by Max Phillips<\/p>\n\n\n\n Resizing\nthe browser window makes text columns go narrower or wider, and end-users can\nalso alter text sizes. This could make you believe that you have no control\nover line breaks. Yet when you look beyond the desired end result and\nunderstand what exactly you want to achieve there are certain aspects that can\nbe steered.<\/p>\n\n\n\n Line\nbreaks occur at the end of paragraphs that are wrapped with\na <p> or <div>tag. In all other cases, line breaks\nare very seldom inserted solely for the purpose of having the next word start\nat the beginning of the next line, so use the <br> tag\nsparingly. The most common reason is to keep two or more words together.<\/p>\n\n\n\n 10.\nSpace with care<\/p>\n\n\n\n Advertisement<\/p>\n\n\n\n The\nnon-breaking space is not the only special space character available in HTML.\nAn em space is as wide as the type size, creating a perfectly square separator.\nThe en space is half its width. Very useful in tabular material is the figure\nspace, which takes up as much room as the numerals in the font, while the\npunctuation space is as wide as the dot or comma. Thin spaces can be used\nbetween the dot and the next letter in abbreviated names, and hair spaces to\ndetach em dashes from the neighbouring characters. And then there\u2019s the\nthree-per-em space, the four-per-em space, the six-per-em space \u2026<\/p>\n\n\n\n Reading\nis as much about the space within and between letters as it is about the black\nof the letters themselves. The correct hierarchy is that the space between\nletters is smaller than the space between words, and the space between words is\nsmaller than the space between lines of text. Avoid adding space between\nletters as this causes words to break up and hinders legibility. Judiciously\nincreasing letter spacing is only warranted for text in very small sizes. On\nthe contrary text in display sizes often benefits from tighter tracking, but\nhere as well don\u2019t overdo it.<\/p>\n\n\n\n Advertisement<\/p>\n\n\n\n Full\njustification has an adverse effect on the appearance of text. The process of\njustifying the words to fit the line length increases the spacing between\nwords, making those word spaces vary wildly between subsequent text lines. This\ngives the text an uneven appearance and creates unsightly gaps between words in\nsome lines. Justified left\/ragged right is the preferred alignment for ease of\nreading.<\/p>\n\n\n\n Besides\ncharacter spacing and word spacing, line spacing also influences legibility.\nLines of text that are too close to each other create a dense text image that\nis hard to decipher. If on the contrary the line spacing is too generous the\nreader has difficulties finding the correct next line after a line break.<\/p>\n","protected":false},"excerpt":{"rendered":" Better web typography in 13 simple steps By Yves P […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-154","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\n![\"\"](\"http:\/\/116.62.123.213\/wp-content\/uploads\/2019\/07\/Don\u2019t-fake-styles.jpg\")
<\/figure>\n\n\n\n![\"\"](\"http:\/\/116.62.123.213\/wp-content\/uploads\/2019\/07\/HTML-entities.png\")
<\/figure>\n\n\n\n![\"\"](\"http:\/\/116.62.123.213\/wp-content\/uploads\/2019\/07\/1.jpg\")
<\/figure>\n\n\n\n