<!doctype html>
<html lang="en">
<head>
<title>Web Typography</title>
<meta charset="utf-8">
<style>
a{
display:block;
text-decoration:none;
}
code{
font-weight:bold;
}
footer,header{
margin:2em 0;
}
.word-break{
width:65px;
border:1px solid;
word-break:break-all;
}
.overflow-wrap{
overflow-wrap:break-word;
width:65px;
border:1px solid;
}
.break-example{
overflow:auto;
padding:1em;
}
strong{
display:block;
clear:both;
}
.line-break{
margin-top:1em;
margin-bottom:1em;
}
.line-break:first-letter{
font-size:30px;
font-weight:bold;
}
.hypauto{
box-sizing:border-box;
resize:both;
padding:20px;
border:1px solid;
font-size:18px;
width:100%;
overflow:auto;
hyphens:auto;
margin-top:1em;
}
.hypauto:before{
content:"hyphens:auto";
display:table;
margin:10px auto;
color:blue;
font-weight:bold;
text-transform:capitalize;
}
.hypnone{
box-sizing:border-box;
resize:both;
padding:20px;
border:1px solid;
font-size:18px;
width:100%;
overflow:auto;
hyphens:none;
margin-top:1em;
}
.hypnone:before{
content:"hyphens:none;-""no hyphens even if hypenation characters are used";
display:table;
margin:10px auto;
color:blue;
font-weight:bold;
text-transform:capitalize;
}
.hypmanual{
box-sizing:border-box;
resize:both;
padding:20px;
border:1px solid;
font-size:18px;
width:100%;
overflow:auto;
hyphens:manual;
margin-top:1em;
}
.hypmanual:before{
content:"hyphens:manual;-" "possibile hyphenation when hyphenation characters are available";
display:table;
margin:10px auto;
color:blue;
font-weight:bold;
text-transform:capitalize;
}
.hypmanual span,.hypnone span{
color:red;
}
</style>
</head>
<body>
<header>typography is part of the document design.there are many many ways to enhance the way text rendered in the web.appearently all of these ways are important and each plays it's role to have enhanced text.these ways could be listed as:</header>
<main>
<article>
<h3>Font-properties</h3>
<p>font properties (font,font-family,font-size,font-style,font-kerning,font-stretch,font-weight,font-size-adjust,line-height)should be used wisely-this includes @font-face at-rule and it's descriptors.what we have left from font properties is font-variant and it;s subproperties and font-feature-settings properties.
now these two properties are about font-features.font-features are specific features that are contained inside the used type-face.they are used seperately from font properties listed above.now these properties are used to enable and use font-features.that is:
</p>
<p>
<h4>what is openttype fonts?</h4>
<a href="http://www.adobe.com/products/type/opentype.html">adobe describing opentype fonts</a>
</p>
<p>
<h4>how css is used with opentype fonts?</h4>
<a href="https://blog.webtype.com/?p=4085">ref-1</a>
<a href="https://helpx.adobe.com/typekit/using/open-type-syntax.html#liga">ref-2</a>
<ahref="https://helpx.adobe.com/typekit/using/use-open-type-features.html">ref-3</a>
<em>usage note:</em><p>generaly there are only two css properties that deal with opentype fonts-font-variant & font-feature-settings.as ageneral rule font-variant is used to enable font feature-if failed to do so font-feature-settings is used instead.</p>
</p>
</p>
<p><a href="http://stateofwebtype.com/">current browser support for everything font</a></p>
</article>
<article>
<h3>text-properties:</h3>
<p>
<ul>
<li><code>text-rendering</code>
tells the browser's text-rendering engine to optmize either speed,legibility or geometricprescesion.legibility will improve kerning and ligatures,speed will disable kerning and ligatures.geometric precision will disable both speed and legibilty.each case has it's side effects.generally if text size is greater than 20px legibilty(kerning & ligature) will affect the speed significantly.<code>auto</code> is the default value and will let the browser do educated guess to choose between speed,legibility or geometricprecesion(browsers behave differently).
</li>
<li><code>text-overflow</code>:this property controls the way the browser tell the user that there is more text to read but it is cut either using <code>ellipsis</code> or simple <code>clip</code>.inorder for the overflow of text to be happen and to cut it:overflow of text need to occure using<code>white-space:nowrap</code> and <code>overflow:hidden</code>.this way we will have a text that is overflowing it's <b>block-level container</b> and the overflowing part is hidden from the user.<code>text-overflow</code> will decorate how to tell the user about the hidden text either by ellipsis or clipping.
</li>
<li><code>hyphens</code>:it is supposed to handel hyphenation when line brakes occure.it is better to define lang tag to choose language-specific hyphenation.russian lang for example has different hyphenation than english.testing property values on firefox results in:</li>
<div class="hypauto">as a certain way of embeding a webfont.they use a link request in the head tag of the html document to <span>request</span> the font the user decieded to use.the href attribute that holds the link that requests the webfont intended to be used can be customized inorder to specify the exact font face the user wants.ther are many many options and preferences to be selected through that link custoization including font-weight, font-style,subset of a font,etc.keep <span>in</span> mind that if a certain font does not have a specific font style or weight(or combined) as an indivisual font-face.then customization is not effective.
google fonts let us download the font file as a package of font faces(or as available).when downloading the file 1-unzip it 2-install the prefered faces(or as available) 3-use it in the document.</div>
<div class="hypnone">as a certain way of embeding a webfont.they use a link request in the head tag of the html document to <span>request</span> the font the user decieded to use.the href attribute that holds the link that requests the webfont intended to be used can be customized inorder to specify the exact font face the user wants.there are many many options and preferences to be selected through that link custoization including font-weight, font-style,subset of a font,etc.keep <span>in</span> mind that if a certain font does not have a specific font style or weight(or combined) as an indivisual font-face.then customization is not effective.
google fonts let us download the font file as a package of font faces(or as available).when downloading the file 1-unzip it 2-install the prefered faces(or as available) 3-use it in the document.</div>
<div class="hypmanual">as a certain way of embeding a webfont.they use a link request in the head tag of the html document to <span>request</span> the font the user decieded to use.the href attribute that holds the link that requests the webfont intended to be used can be customized inorder to specify the exact font face the user wants.there are many many options and preferences to be selected through that link custoization including font-weight, font-style,subset of a font,etc.keep <span>in</span> mind that if a certain font does not have a specific font style or weight(or combined) as an indivisual font-face.then customization is not effective.
google fonts let us download the font file as a package of font faces(or as available).when downloading the file 1-unzip it 2-install the prefered faces(or as available) 3-use it in the document.</div>
<li><code>hyphens</code> and <code>overflow-wrap</code>&<code>word-break</code>:see the similarities and use cases of <code>hyphens</code> and in-word breaking properties: <a href="typo-sub-1.html">Here</a>.
</li>
<li>
<code>caret-color</code>:
find it <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color">here</a>.
</li>
<li>
<code>letter-spacing:</code>
it is called tracking as well.it is different than kerning-<code>font-kerning</code>.it sets the space between text characters.remember kerning was practicaly a little adjustment-a bit like stretching the characters either away or close to each-that is when set to auto and let user agent descied.it might be bad to use it on small letters as they might get too close to each other and affect readability.
</li>
<div class="line-break">jumping to new lines could happen in two ways:breaking words themself onto two lines(long words for example using <code>overflow-wrap & word-break</code>) thus creating new line.the second way is by jumping to new line at a line-break point.that is when normally we see words end then comes a little space and finnaly the next word is written on new line.this second way is either done by default or by using <code>white-space</code>.</div>
<li>
<code>overflow-wrap:break-word & word-break:break-all: </code>
the first one used to break only long words that cause text overflow
whereas the second will break both long words that cause text overflow and any word that can be broken on two lines.however the second one will fill the current inline with characters and leave no space empty on the it before jumping and continue rendering the remaining characters of a word.think of it as element with fixed width and text characters filing every space reserved for a character even if that space is supposed to be empty beacuse line break should take place-which is what happens by default. this behaivor however is not good for readability.
what to use? overflow-wrap:break-word; will break long words and prevent text overflow and other words remain as they normaly would(break normally on line-breaks).
word-break:break-all;will break every single word just to fill the line with characters.
<div class="break-example">
<div style="float:left;">
<h3><code>word-break:break-all;</code></h3>
<div class="word-break">
i am at er building in b and waittingggggggggggg for someone i know who whas some job related duties with me.</div>
</div>
<div style="float:right;"><h3><code>overflow-wrap:break-word;</code></h3>
<div class="overflow-wrap">i am at er building in b and waittingggggggggggggg for someone i know who whas some</div>
</div>
<strong><code>word-break</code> will override new lines suggestions that prupose for new words to jump on new lines.which results in having all lines filled characters hwich is against default or normal behaivor of text rendering.<code>overflow-wrap</code> will caus elong words <b>only</b> to be broken on two or more lines inorder not to overlow.</strong>
<br>
<em>note that property name <code>word-wrap</code> is the same as property name <code>overflow-wrap</code>.the first name used as legacy name with browsers with no support.</em>
</div>
</li>
<li>
<p>
<code>text-align text align-last text indent text-transform:</code>
i can find them at <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text#Reference">MDN-text module</a>
</p>
</li>
<li><code>tab-size % white-space:</code>
<code>white-space</code> property controls how lines are rendered.<code>nowrap</code> for example will cause to display text on a single line no matter how long this line would be.usualy this causes text overflow that can not be broken using any breaking mechansim(breaking words or breaking lines).the other values <code>pre,pre-line,pre-wrap,normal</code> can be tested <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/white-space">here</a>
<code>tab-size</code> property controls the size of the html entity <code>Tab size</code>.in html the moudle html entities is :any character that is either reserved(for html) like the greater than and less than characters that when typed in will be interpreted as code not string of text.or any character that is not available to be used on usual keyboards.have a look <a href="https://dev.w3.org/html5/html-author/charref">here</a>keep in mind taht html entities are text typed inside html document to be displayed as character the meets one of the two options described above.one of the html entities is the tab size character.the <code>tab-size</code> prperty controls the size of the character.it is measured in number of a one character size.the property can take effect with the prescence of the <code>white-spcae</code> property values <code>pre</code> & <code>pre-wrap</code> only.
</li>
<li><code>text-size-adjust</code>: support is shit at the moment.</li>
<li><code>@charset</code>:
@charset: it is one way of many that is used to set the character set encoding of a document.<code>@charset</code> should be the first thing in the document.nothing should be before it.defining many @charset for the document will be ignored and only the first one will be used.there are many ways that can set the character set encoding of a document.the browser will try several methods in a fixed order and choose the one that yeilds a result.one of wich is the @charset.the order of methods can be found <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@charset">here</a>.
</li>
</ul>
</p>
</article>
<article>
<h3>practices that will enhance typography:</h3>
<p><a rel="help" hreflang="en" target="_blank" href="https://cssauthor.com/typography-tools/">ref-1</a><a href="https://csswizardry.com/2017/02/typography-for-developers/">ref-2</a><a href="https://ithemes.com/2017/06/23/typography-for-web-designers-5-things-you-need-to-know/">ref-3</a><a href="http://csskarma.com/blog/typography-kerning-tracking/">ref-4</a></p>
</article>
</main>
<footer>finally browser support is shit for <code>font-variant-alternate</code> and <code>@font-feature-values</code>.later check is needed.</footer>
</body>
</html>
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.