15 Användbara verktyg för webbtyper, bibliotek och ramar
Att hantera typografi på webben har varit riktigt knäppt. Varje webbläsare har sin egen algoritm för att göra teckensnitt vilket kan leda till oväntade avvikelser. Det finns bara några få CSS-egenskaper som du kan använda för att få viss kontroll över teckensnitt, till exempel typsnittskärning, utskrift av teckensnitt, skapande av DropCaps etc. Dessutom måste vi hantera många layoutproblem när det gäller teckensnitt.
Den goda nyheten är att det finns resurser som du kan använda för att ta över hjulet när det gäller webbplats typografi. Här är 15 webbverktyg, bibliotek och ramverk du kan använda till det ändamålet.
Mer om Hongkiat:
- 9 WordPress-plugin för att göra mer med dina teckensnitt
- 20 bästa WordPress typografi plugins för att förbättra läsbarheten
- Bättre och skarpare UI-ikoner med webbfonter
TypeRendering
I ett nötskal, TypeRendering fungerar som Modernizr, förutom att den bara identifierar webbläsarmotorn för fontåtergivning. Detta bibliotek lägger till anpassade klasser baserat på dess upptäckter som kan användas för att tillämpa specifika stylingsregler för typgodkännande.
KerningJS
Kerning är inte anpassningsbar för användning på webben än - font-kerning Stöd är fortfarande fattigt just nu - men en ny standardegenskap kommer på väg. KerningJS är ett Javascript-bibliotek som ger dig några nya egenskaper för bättre kerningskontroll, till exempel -brev-kern.
#heading -letter-core: 1px 1px 0 0 0 1px 0 2px 0 0 0 0 0;
Tänk på att ovanstående exempel är icke-standard och endast gäller med KerningJS.
DropcapJS
Även om man skapar en dropcap är genomförbar med nuvarande CSS-standarder, är resultatet inte perfekt ännu. Ibland är det helt oönskade. DropcapJS, som utvecklats av Adobe Web Platform, är uppdraget att tillåta webbdesigner att applicera en perfekt dropcap lätt.
LiningJS
LiningJS är ett JavaScript-bibliotek som lägger till linje klass i varje rad i din paragraf. Detta låter dig ställa in linjen separat. Det simulerar tanken på :: n: te-linje (), :: n: te-sista-linje () och ::sista raden pseudoklasser som fortfarande inte finns i CSS. Här är ett exempel på hur vi utformar första raden i ett stycke med LiningJS:
p. line [first] font-weight: 600; text-transform: stor bokstav;
Dessutom stöder LiningJS också kinesiskt styckeflöde.
UnderlineJS
UnderlineJS är ett JavaScript-bibliotek som underlättar texten. Kolla in demoen för att se vad jag menar, var noga med att sväva över linjerna. Jämför demo med undersignalutgången från nuvarande CSS text-decoration standard och du skulle förmodligen vara en fan av underlineJS också.
FlowType
Det här pluginet justerar dynamiskt justeringsstorleken baserat på en specifik wrappbredd. FlowType hjälper dig att tillämpa ett idealiskt antal tecken per rad vid vilken skärmbredd som helst. Biblioteket levereras med alternativ där man kan ställa in min / max skärmbredd, min / max teckenstorlek och teckensnitt.
HatchShow
HatchShow expanderar storleken på ett teckensnitt för att fylla hela behållarens bredd. Pluggen fungerar ur lådan med algoritmen; i ett nötskal, mäter det behållarens bredd och längden på teckensnittet och lägger till rätt storlek på teckensnittet.
GridLover
GridLover är ett bra verktyg för att generera grundläggande stilar för typografi arrangemang (storlek, linjehöjd och marginal) med ett enkelt skjutreglage-gränssnitt. Det genererar stilar i SCSS, LESS och Stylus så att du kan inkludera det direkt i ditt projekt oavsett vilken CSS-preprocessor du använder.
TypeScale
TypeScale är ett onlineverktyg som hjälper dig att enkelt bestämma rätt typsnitt för din webbplats. Verktyget ger en enkel intuitiv GUI för att infoga basstorlekstorlek, skala och typsnittsfamilj du vill använda. Resultaten kommer att visualiseras för dig så att du kan leka med skalan för att bara få rätt värde. Ta bara CSS när du är klar.
Modular Scale
Modular Scale är ett verktyg för att generera perfekt typsnittskalning för kropps- och rubriktext. Den matas ut i Sass som ska användas tillsammans med sitt Sass-bibliotek. Alternativt kan du använda JavaScript .
Font-bredd
Font-To-Width (FTW) är ett Javascript-bibliotek som gör en typsnitt passform till dess breddbehållare. Det bestämmer teckenstorleken tillsammans med det ordavstånd som krävs för teckensnittet. Om du vill göra en söt rubrik, det här är det bibliotek du kanske vill försöka.
FFFFallback
FFFFallback, ett praktiskt verktyg som låter dig hitta den bästa fontstacken som kommer att försämras graciöst. Verktyget kommer i form av en bokmärke, som analyserar typsnittfamiljen på din sida och föreslår en uppsättning teckensnitt som ska användas som fallback.
Teckensnitt
Google Font är ett av de mest populära webbtypsbibliotek som används av miljontals, och värd över 500 teckensnittfamiljer. Teckensnitt är en samling av parade Google Fonts, där du enkelt kan hitta en kombination av typsnittsfamiljer och typfamiljer. FontPair gör att välja paraparering lite mindre överväldigande.
TypeSettings
TypeSettings är en samling av CSS-regel som är inställd för att definiera ordentlig typsnittskalning, vertikal rytm och responsivt förhållande typografi. TypeSettings kommer i Sass och Stylus vilket möjliggör flexibilitet för att möta dina projektbehov genom att justera variablerna.
typplatta
typplatta är förmodligen ett av de mest kompletta startpaketen för inställning av typografi. Typskylt skickas med en handfull grundläggande typografiska stilar som adresserar skalering, färger, liten kapital, dropcap, indenting, bindning, blockquote, kodblock och mycket mer saker.
Läs nu: Utställning av webbdesign med vacker typografi
