FontLens

Selecteer tekst, klik met de rechtermuisknop en inspecteer direct het lettertype, de grootte, het gewicht, de kleur en de CSS –…

Bent u ooit op een pagina beland, hebt u de belettering bewonderd en vroeg u zich af "welk lettertype is dit?" LettertypeLens beantwoordt die vraag met één klik. Selecteer willekeurige tekst op een website, klik met de rechtermuisknop en kies "Lettertype inspecteren met LettertypeLens". Een schoon, gericht paneel verschijnt rechtstreeks over de pagina en onthult precies hoe die tekst is gestyled: het lettertype, de grootte, het gewicht, de regelafstand, de kleur en elk ander detail achter het ontwerp. Of u nu een ontwerper bent die een lay-out nabootst, een ontwikkelaar die aan een specificatie voldoet, of gewoon nieuwsgierig bent naar een mooie kop, deze tool verandert elke webpagina in een open boek van typografie. LettertypeLens is een lettertypezoeker en CSS-inspector in één. Het geeft u niet alleen de lettertypefamilie, het geeft u ook kant-en-klare code, een interactieve speelplek om ideeën te testen en toegankelijkheidstools om ervoor te zorgen dat uw tekst leesbaar is. Geen account. Geen aanmelding. Gewoon selecteren, rechtermuisknop en onderzoeken. 🔍 Wat u kunt doen - Onthul de volledige typografie van geselecteerde woorden: lettertypefamilie, lettergrootte, lettergewicht, regelafstand en de kleur in één oogopslag - Zie extra styling die gemakkelijk over het hoofd wordt gezien, zoals letterafstand, teksttransformatie en letterstijl - Kopieer elke enkele eigenschap met één klik, of pak de hele regelset als een compleet CSS-fragment - Converteer dat fragment naar Tailwind, SCSS of SASS via eenvoudige tabbladen, en kopieer het vervolgens helemaal of regel voor regel - Experimenteer in een live, bewerkbaar voorbeeld: herschrijf de voorbeeldwoorden, pas de waarden aan, verwissel de achtergrond en zie het direct bijwerken - Identificeer waar een weblettertype vandaan komt met een providerbadge (Google Fonts, Adobe Fonts, zelf gehost, of een ingebouwd systeemlettertype) - Sla een weblettertype op uw computer op met de knop "Lettertype downloaden", rechtstreeks van de eigen bron - Controleer het kleurcontrast volgens WCAG-normen, met de exacte verhouding plus AA- en AAA-geslaagde of mislukte resultaten - Kies en sample kleuren met een volledige kiezer, inclusief een pipet om elke pixel op het scherm te pakken - Schakel maateenheden tussen px, rem, pt en em, toegepast op zowel de velden als de geëxporteerde code 🖱️ Hoe het werkt Het gebruik van LettertypeLens duurt seconden. Markeer de woorden die u wilt bestuderen, klik met de rechtermuisknop op de selectie en kies "Lettertype inspecteren met LettertypeLens" in het menu. Het paneel verschijnt over de huidige pagina, netjes gestyled zodat het nooit botst met de eigen look van de site. Vanaf daar kunt u de details lezen, kopiëren wat u nodig heeft, of beginnen met bewerken. De live preview is waar het leuk wordt. Verander de bewoording om een echte kop te testen, pas de grootte aan, pas het gewicht aan, of stel een nieuwe achtergrondkleur in om te zien hoe het lettertype zich houdt. Uw bewerkingen blijven behouden terwijl u tussen pagina's beweegt en later terugkomt, dus een idee dat u op de ene site begon, wacht op u op de volgende. Wanneer u de oorspronkelijke waarden terug wilt, herstelt de knop "Reset naar site" alles wat de pagina daadwerkelijk gebruikt. Heeft u het onbewerkte bestand nodig? Voor een downloadbaar weblettertype haalt één knop het echte bestand van de @font-face-locatie. Voor een lettertype dat al met uw besturingssysteem wordt geleverd, vertelt LettertypeLens u dat het een ingebouwd lettertype is, zodat u weet dat het beschikbaar is zonder download. 🔒 Privacy eerst LettertypeLens draait volledig in uw browser. Er is geen gegevensverzameling, geen tracking, geen analyses en geen externe servers betrokken bij het inspecteren van tekst. Alles wat u onderzoekt, blijft op uw computer. De extensie doet precies één netwerkverzoek, en alleen wanneer u bewust op "Lettertype downloaden" drukt, waarna het contact opneemt met de eigen bron van dat lettertype om het bestand op te halen. Niets anders verlaat uw apparaat. Machtigingen zijn bewust beperkt. De contextmenu-toestemming voegt de rechtermuisklik-vermelding toe. De actieve-tab-toestemming laat de tool de tekst lezen die u hebt geselecteerd op het tabblad waar u het aanroept, en nergens anders. Opslag bewaart uw voorbeeldtekst en uw eenheid- en opmaakvoorkeuren, zodat ze de volgende keer worden onthouden. Er is geen brede toegang tot uw browsegeschiedenis en geen uitgebreide hostmachtigingen. 👥 Voor wie is het - Webdesigners die een lettertype willen identificeren, een palet willen vastleggen en stijlen snel willen hergebruiken - Front-end ontwikkelaars die een mockup matchen of exacte lettertypefamilie- en spatiëringswaarden in code opnemen - UI- en UX-engineers die consistente, merkgetrouwe typesystemen bouwen - Studenten die CSS en typografie leren en willen zien hoe echte sites zijn opgebouwd - Toegankelijkheidsauditors die controleren of tekst voldoet aan de WCAG-contrastvereisten voordat deze wordt gepubliceerd - Bloggers, marketeers en nieuwsgierige lezers die gewoon willen weten welk lettertype een site gebruikt ✨ Waarom mensen het bewaren - Eén rechtermuisklik geeft u het antwoord in plaats van te moeten zoeken in ontwikkelhulpmiddelen - De code is klaar om te kopiëren in gewoon CSS, Tailwind, SCSS of SASS, zodat hij rechtstreeks in uw project kan worden geplaatst - Het bewerkbare voorbeeld laat u lettertypekeuzes prototypen zonder een enkele regel code aan te raken - De contrastchecker bouwt toegankelijkheid in uw workflow in, in plaats van het als een bijzaak te laten - De kleurkiezer en pipet betekenen dat u exacte kleuren van overal op de pagina kunt sampelen en hergebruiken - Lichte en donkere thema's volgen automatisch uw besturingssysteem, zodat het dag en nacht thuis voelt - Eenheidswisseling tussen px, rem, pt en em houdt de uitvoer afgestemd op hoe uw codebasis ook is geschreven 🎨 Een nadere blik op de details Typografie is meer dan een naam. LettertypeLens brengt de kleine beslissingen naar boven die tekst goed doen aanvoelen, van het gewicht van een kop tot de ademruimte in de regelafstand en de subtiele spatiëring van de letterafstand. Door deze waarden naast elkaar te zien, begrijpt u waarom een ontwerp werkt en hoe u het opnieuw kunt maken. De providerbadge voegt ook context toe, door u in één oogopslag te vertellen of u kijkt naar een Google Fonts-asset, een Adobe Fonts-lettertype, een zelf gehost bestand of een systeemstandaard, wat vaak de eerste aanwijzing is wanneer u een lettertype wilt matchen of vinden. De kleurtools gaan verder dan een statische uitlezing. De kiezer biedt een HSV-vierkant met tint- en alfachuifregelaars, en spreekt HEX, RGB en HSL, zodat u kunt werken in welk formaat u ook uitkomt. Combineer dat met de pipet en u kunt de precieze tint van elk element opnemen en in uw voorbeeld of notities plaatsen. 🚀 Begin met inspecteren Voeg LettertypeLens toe, markeer wat woorden en klik met de rechtermuisknop om de typografie, stijlen en kleuren achter elke pagina te onthullen. Het is een snelle, privé en echt nuttige metgezel voor iedereen die geeft om hoe het web leest. Installeer het, houd het bij de hand en vraag u nooit meer af welk mysterieus lettertype er wordt gebruikt.