Share
Ik gebruik graag een typography.css in mijn projecten; een apart bestand dat alle basisstructurele typografische stijlen bevat die ik nodig heb. Veel van wat er in zit is voor de hand liggende dingen (kopgroottes bijvoorbeeld) maar het bevat ook minder voor de hand liggende dingen die ik niet wil vergeten. Laten we ons een weg banen door de checklist ...
Het splitsen van uw CSS-bestanden is een verstandige workflow bij het bouwen van een website. Als je een preprocessor gebruikt (zoals Sass), dan is het splitsen van bestanden in "partials" heel natuurlijk. Als je de voorkeur geeft aan old-school vanilla CSS, dan zijn er nog steeds tools om je te helpen deze te compileren tot een laatste versie.
Notitie: Voor de duidelijkheid: het is geen goed idee om heel veel verschillende CSS-bestanden in je uiteindelijke build te hebben (veel HTTP-aanvragen zorgen voor een prestatie-fles-nek) dus zorg ervoor dat ze samengevoegd zijn voordat je het implementeert!
Hoe dan ook, als je je CSS opsplitst in gedeelten, kun je gemakkelijk stukjes styling gebruiken voor nieuwe projecten en het onderhoud een fluitje van een cent maken.
We gaan een bouwen typography.css zodat, zelfs als we een agressieve CSS-reset gebruiken, onze typografie altijd stevig begint.
Lettertypen worden anders weergegeven afhankelijk van de browser en het platform dat wordt gebruikt. We kunnen nooit alles hetzelfde laten lijken overal, maar laten we beginnen met het optimaliseren van onze typografie waar mogelijk.
Veel lettertypen bevatten luxe extra's om de leesbaarheid te verbeteren. Ligaturen, kerning en geometrische precisie zullen in normale omstandigheden niet vaak door browsers worden gebruikt, maar kunnen worden gebruikt als u de browser specifiek opdracht geeft om dit te doen.
Browsers die op Mac OS X draaien, zullen gewoonlijk hun best doen om lettertypen goed te renderen en het weergeven van engines op verschillende platforms zal soms een bal voor het type spelen met een snelheid van 20px of groter (het is begrijpelijker om een klein type nauwkeurig weer te geven).
Dit is de CSS:
body text-rendering: optimalizeerbaarheid;
Dit vertelt de browser dat het, indien mogelijk, ernaar moet streven om de extra lettertypefuncties weer te geven om de leesbaarheid te verbeteren. Er zijn echter lage uitvoeringskosten. Als u soms voor snelheid over kwaliteit moet gaan, kunt u bovendien de optimizeSpeed waarde op bepaalde elementen:
.foo text-rendering: optimSpeed;
Waar zal dit echt werken? Die aardige kerels bij Mozilla hebben een browserondersteuningstabel samengesteld om dat te beantwoorden.
De standaard weergave van lettertypen in moderne browsers wordt door velen beschouwd als ... ontbreekt. Tekens worden vaak een "beetje dik" weergegeven (met name in OS X) vanwege de extra subpixels die worden gebruikt om randen te effenen. Om deze reden gebruiken veel mensen het volgende:
body -webkit-font-smoothing: antialiased;
Als alternatief zou je kunnen gebruiken:
-webkit-font-smoothing: geen; -webkit-font-smoothing: subpixel-antialiased;
Zoals we al zeiden, -Subpixel anti-aliasing is wat moderne browsers gebruiken als standaard, geen schakelt vloeiender renderen helemaal uit.
Erbij blijven antialiased en je ontwerpen verliezen een paar kilo, maar zoals James Koster aangeeft, kunnen ingangen en knoppen je instructies soms negeren.
De knop en de invoer negeren jou. Daar ga je voor staan?! Als u wilt dat invoer en knoppen meespelen, moet u specifieker zijn:
body, invoer, knop -webkit-font-smoothing: antialiased;
Gesorteerd. Codepen Bijwerken: Zoals opgemerkt door retrovertigo in de commentaren, heeft Firefox OS X nu een eigen vooraf toegevoegde toevoeging om mee te spelen:
p -moz-osx-font-smoothing: grijswaarden;
Dit heeft een soortgelijk effect als de antialiased-weergave van WebKit. Met dit alles gezegd, echter, wees gewaarschuwd dat faffing over met font rending eigenschappen misschien niet de slimste aanpak op de lange termijn is.
Als u aan de slag gaat, begint u waarschijnlijk met uw typografische boilerplate door de basistekstgrootte, regelhoogte en lettertypefamilie in te stellen. Meestal voeren we dit uit op de of de element met de afkorting statement:
html font: 100% / 1.5 Arial, sans-serif;
Dit maakt ons klaar met onze basishoeveelheid op 100% van de standaardinstelling van de browser (meestal 16px), geeft ons een unitloze 1.5 voor de regelhoogte en stelt vervolgens onze lettertypestapel in. Je kunt meer lezen over deze "100%" standaard door Ems Even Verder op Tuts te bekijken+.
Verderop, de volgende typografische pitstop zijn vaak de rubrieken. Er zijn er zes om in te stellen, die elk worden gebruikt voor rubrieken met verschillende gradaties van belangrijkheid.
Om te bepalen in welke grootte uw koppen moeten zijn, moet u een modulaire schaal vinden. We gaan een ongecompliceerde set van waarden gebruiken, gebaseerd op een verouderde versie van normalize.css van Nicolas Gallagher (die je mogelijk toch gebruikt).
h1 font-size: 2em; / * 2 * 16 = 32 * / h2 font-size: 1.5em; / * 1.5 * 16 = 24 * / h3 font-size: 1.17em; / * 1,17 * 16 = 18,72 * / h4 font-size: 1em; / * 1 * 16 = 16 * / h5 font-size: 0.83em; / * 0.83 * 16 = 13.28 * / h6 font-size: 0.75em; / * 0,75 * 16 = 12 * /
Deze waarden zijn in ems, maar u kunt de equivalente pixelwaarden zien die in de opmerkingen worden vermeld.
Alinea's vormen meestal de basis van een HTML-document; hun stijl kan de leesbaarheid van inhoud vergroten of verkleinen. Als een absoluut minimum vereisen ze een goede lijnhoogte en goede tussenruimte.
p regelhoogte: 1,5; marge: 0 0 1em;
Alinea-spatiëring op deze manier geeft ons dit:
Gepubliceerde publicaties (zoals, je weet wel ... boeken) gaan echter vaker met ingesprongen alinea's, die we kunnen krijgen door het volgende te gebruiken:
.streepje p marge: 0; .indent p + p text-indent: 2em;
Hiermee wordt de marge verwijderd en wordt in plaats daarvan een inspringing toegepast op alle elementen behalve de eerste alinea (met behulp van een broer / zus-selector).
Het enige probleem dat dit oplevert, is dat er nu geen marge is onderaan de laatste alinea; alle volgende elementen zouden ertegen worden geplet. Gelukkig kan dit worden opgelost. Harry Roberts suggereert Mo Robust Paragraph Indenting en het is een techniek die ik graag gebruik:
p regelhoogte: 1,5; marge: 0 0 1em; .indent p + p text-indent: 2em; margin-top: -1em;
Hier kun je zien dat we de oorspronkelijke vormgeving op onze paragrafen behouden, de marge onderaan is er nog steeds op alle alinea's. Deze keer passen we echter een gelijke negatieve bovenmarge toe op alle behalve de eerste alinea, die het hele lot shunt om de gaten te dichten.
In dit tijdperk van vloeiende lay-outs veranderen onze meetwaarden (lijnbreedten) voortdurend. In tegenstelling tot de statische wereld van afdrukken, kunnen we niet handmatig regeleinden specificeren om dingen netjes te houden. CSS-ondersteuning voor woordafbreking is nog niet geweldig, dus veel mensen begraven verborgen personages in hun inhoud die fungeren als zachte koppeltekens (), suggereren waar een woord moet worden gesplitst indien nodig. De praktische aspecten hiervan zijn vreselijk.
Gelukkig verbeteren de dingen. De word-break eigendom wordt ondersteund door Chrome en ouder IE, plus toekomstige ondersteuning is aan de horizon voor afbreking van CSS3. De bijzonderheden van dit alles worden heel goed behandeld door Kenneth Auchenberg, maar voorlopig is hier CSS-afbreekactie voor meerdere browsers in al zijn glorie:
p word-break: break-all; / * Niet standaard voor webkit * / woord-pauze: breekwoord; -webkit-koppeltekens: auto; -moz-koppeltekens: auto; -ms-koppeltekens: auto; koppeltekens: auto;
Bijwerken: Nogmaals, dankzij retrovertigo om dit aan te wijzen; IE8 ondersteunt feitelijk het niet-voorgeïnstalleerde word-break. Zie developer.mozilla.org voor meer informatie.
Hoe zien uw hyperlinks eruit? Standaard zullen de meeste browsers een actieve link met een onderstreep weergeven. Dit is zo'n gevestigde norm geworden, dat je een goede reden kunt hebben om het te verwijderen! Evenzo verwachten gebruikers dat onderstreepte woorden binnen een kopie ergens naar verwijzen, dus onderstreep geen willekeurige woorden voor de nadruk.
Ook het vermelden waard is het : visited staat van links (een andere kleur is nuttig, maar dat is ongeveer alles wat je kunt controleren) en de : hover staat.
a, a: bezocht text-decoration: onderstrepen; a: hover text-decoration: none;
Sommige mensen beweren dat een onderstreping de leesbaarheid van een link belemmert, dus u kunt ook een border-bottom in plaats daarvan, wat de ruimte tussen regel en letter zou vergroten.
Bovendien (zoals Bowie me in de opmerkingen heeft herinnerd) moet je echt de :actief en :focus pseudo klassen. Deze toestanden zijn niet erg handig voor het gebruik van de muis (en daarom vergeet ik ze soms), maar voor het doornemen met het toetsenbord, of voor toegang via andere ondersteunende technologieën, zijn ze de moeite van het definiëren waard.
Notitie: U kunt zelfs een : Focus: hover als je je een beetje obsessief voelt!
/ * staat voor toegankelijkheid http://meyerweb.com/eric/css/tests/css2/sec05-11-03.htm * / a: active color: tomato; a: focus border: 1px gestippelde tomaat;
Een laatste opmerking, terwijl we het over ankers hebben, is dat dit een goede plaats kan zijn om styling in te stellen voor verschillende soorten links. Als u wilt, met behulp van CSS-attribuutselectoren, kunnen we externe links anders inrichten, of misschien koppelingen die tot een download leiden:
a [href $ = ". zip"] color: tomato;
Tenzij je al je stijlen hebt teruggezet naar het absolute nulpunt, wordt je hier waarschijnlijk door de browser behandeld, maar het is een goed idee om zeker te zijn van je bases. Doe je sterks opvallen? Zijn jouw ems benadrukt?
sterk font-weight: bold; em font-style: italic;
We gebruiken een * lot * van elementen op Tuts +, dus het is niet iets dat ik ooit zal vergeten, maar de uwe heeft een code-achtige en leesbare stijlopstelling?
code, pre font-family: monospace, serif; lettergrootte: 1em;
Heel aardig. Onze goede vriend, het lettertype Monospace, zorgt ervoor dat elk personage gemakkelijk te onderscheiden is, vandaar dat het wordt gebruikt in code-editors over de hele wereld. We nemen de elementselector hier ook; "code" moet worden gebruikt voor inline-fragmenten, "vooraf geformatteerd" moet worden gebruikt voor codeblokken (regeleinden enz. worden op prettige wijze waargenomen).
Terzijde, ik vind het altijd leuk hoe Bootstrap zijn code-elementen opmaakt:
Dit is natuurlijk stilistisch, maar geef me elke dag een mooie afgeronde achtergrondkleur op mijn inline-fragmenten ...
U hoeft niet overboord te gaan met uw elementen, maar ze visueel onderscheiden van de rest van uw inhoud is belangrijk. Ze accentueren de stroom van een artikel, voegen interesse toe en helpen met ritme.
Laten we, om niet te diep in stijlen te duiken, het feit benadrukken dat het blockquotes zijn:
blockquote font-style: italic; blockquote: before content: "\ 201C"; weergave: inline-block; opvulling rechts: .4em;
Dit geeft ze een cursieve stijl (hopelijk heeft het gebruikte lettertype een specifieke cursieve variant, in plaats van het aan de browser over te laten om te trainen) en leunt dan op een pseudo-element voor een aanhalingsteken.
Eenvoudig. Dat aanhalingsteken \ 201C zal vanaf nu altijd dynamisch in onze blockquotes worden geïnjecteerd. Elke verdere styling is geheel aan jou!
Styling voor het scherm is één ding, maar hoe vaak heb je echt nagedacht over wat er gebeurt wanneer je gebruikers op "print" klikken? We hebben de neiging om de papieruitvoer niet te zien, dus we hebben de neiging er niet over na te denken.
Als we een leaf-out van de HTML5-boilerplaat verwijderen, kunnen we een paar stijlen toepassen om te zorgen voor diegenen die graag op papier lezen. Eerst nesten we alles binnen een afdruk mediatype:
@media print
Laten we nu het bord leegmaken door ervoor te zorgen dat alles als zwart wordt afgedrukt, alle achtergronden verwijdert (we willen er geen toner aan verspillen) en overbodige schaduwen verwijderen. En ja, we zullen gebruiken !belangrijk, wat in dit geval best handig is en nooit zal moeten worden overschreven.
@media print * background: transparent! important; kleur: # 000! belangrijk; / * Zwart drukt sneller af: h5bp.com/s * / box-shadow: none! Important; text-shadow: none! important;
Een paar andere dingen die ik ga uitkiezen uit HTML5BP hebben betrekking op de leesbaarheid op de afgedrukte pagina. Nogmaals, deze zullen worden genest binnen onze @media-afdruk, kijk eens:
p, h2, h3 weeskinderen: 3; / * http://css-tricks.com/almanac/properties/o/orphans/ * / weduwen: 3; / * http://css-tricks.com/almanac/properties/w/widows/ * /
Deze eigenschappen zijn specifiek van toepassing op paged media (zoals onze "print") en hebben geen enkele invloed op het scherm. Ze controleren de paging van een bepaald document, voorkomen dat verdwaalde lijnen boven aan een nieuwe pagina terechtkomen, of verspillen in eenzame opsluiting onderaan een oude pagina.
Chris Coyier vat het goed samen.
weduwen = minimumaantal regels in een alinea opgesplitst op de nieuwe pagina.
weeskinderen = minimaal aantal regels in een alinea op de oude pagina.
Bijvoorbeeld, weduwen zijn de laatste regels van een alinea, gevonden bovenaan een nieuwe pagina:
Dit is een weduwe (citaat: Anton Ego, Ratatouille) Terwijl weeskinderen zijn de beginregels van een alinea, gevonden aan het einde van een pagina:
Zeg hallo tegen Oliver Twist (citaat: Anton Ego, Ratatouille) Het splitsen van een alinea (of kop) in beide situaties breekt de stroom van de lezer, dus de bovenstaande CSS-regels zorgen ervoor dat er in elk geval minimaal drie regels zijn. Als dat niet het geval is, worden weduwen naar de volgende pagina gestoten, alinea's met onvoldoende wezen worden ook naar de volgende pagina getrokken.
Laten we ten slotte voorkomen dat de pagina onmiddellijk na een kop stopt (wat er zo uitziet :)
Gah. (citaat: Anton Ego, Ratatouille) Nogmaals, we hebben het volgende nodig om binnenin ons te zitten @media-afdruk sectie.
h2, h3 page-break-after: avoid;
pagina-einde kan een aantal waarden aannemen. We hebben gebruikt vermijden die voorkomt dat de pagina na de kop breekt (door de kop op de volgende pagina te trekken). Houd er rekening mee dat deze accommodatie op een dag plaats maakt voor een pauze.
We kunnen eeuwig doorgaan, maar het is nu tijd om de vloer te openen en te luisteren naar de typografische basisstijlen die jullie allemaal gebruiken. Wat ontbreekt er in deze standaard?
Een artikel is nooit compleet zonder een streepje verder lezen ...
Accentsconagua